Title: നിങ്ങളുടെ വീഡിയോ പ്ലെയർ തകരാറിലാക്കാതെ തന്നെ കാസ്റ്റിംഗ് (Casting) ചേർക്കാം

ഒരു ബ്രൗസറിൽ നിന്ന് ടിവിയിലേക്ക് വീഡിയോ കാസ്റ്റ് ചെയ്യുന്നത് ലളിതമായി തോന്നാം, എന്നാൽ മിക്ക കസ്റ്റം HTML5 പ്ലെയറുകളും ഇത് പരീക്ഷിക്കുമ്പോൾ തകരാറിലാകുന്നു. ടോക്കൺ കാലാവധി കഴിയുന്നത് (token expiry), CORS ബ്ലോക്കുകൾ, എത്തിച്ചേരാൻ കഴിയാത്ത ഹോസ്റ്റുകൾ (unreachable hosts), MSE-blob കെണി എന്നിങ്ങനെ നാല് ഒളിഞ്ഞിരിക്കുന്ന പരാജയ കാരണങ്ങളെക്കുറിച്ച് ഒരു പുതിയ ഡെവലപ്പർ ഗൈഡ് വിവരിക്കുന്നു; ഇവ ഓരോന്നും എങ്ങനെ ഒഴിവാക്കാമെന്നും അത് കൃത്യമായി കാണിച്ചുതരുന്നു.

എന്തുകൊണ്ടാണ് കാസ്റ്റിംഗ് കസ്റ്റം പ്ലെയറുകളെ തടസ്സപ്പെടുത്തുന്നത്?

നിങ്ങൾ Cast ബട്ടൺ അമർത്തുമ്പോൾ, ടിവി നിങ്ങളുടെ JavaScript പ്ലെയർ പ്രവർത്തിപ്പിക്കുകയല്ല ചെയ്യുന്നത്. പകരം, നിങ്ങൾ നൽകുന്ന സ്ട്രീം URL എടുത്ത് അതിന്റെ സ്വന്തം ഫേംവെയർ (firmware) ഉപയോഗിച്ച് മീഡിയ പ്ലേ ചെയ്യുന്നു. ഓവർലേകൾ (overlays), അനലിറ്റിക്സ് പിംഗുകൾ (analytics pings), അഡാപ്റ്റീവ്-ബിറ്റ്റേറ്റ് ലോജിക് (adaptive-bitrate logic) എന്നിവ ബ്രൗസറിൽ തന്നെ അവശേഷിക്കുന്നു. ടിവിക്ക് അതേ സാഹചര്യങ്ങളിൽ അതേ URL ലഭ്യമാക്കാൻ കഴിഞ്ഞില്ലെങ്കിൽ, പ്ലേബാക്ക് നിലയ്ക്കും; പലപ്പോഴും കൺസോളിൽ (console) വ്യക്തമായ തെറ്റുകൾ കാണിക്കാതെ തന്നെ ഇത് സംഭവിക്കാം.

നാല് പ്രധാന കാരണങ്ങൾ

  • Token expiry – ബ്രൗസറിൽ കുറഞ്ഞ സമയം മാത്രം നിലനിൽക്കുന്ന ഒരു സെക്യൂരിറ്റി ടോക്കൺ മതിയാകും. എന്നാൽ ഒരു ടിവി ആ സ്ട്രീം തൊണ്ണൂറ് മിനിറ്റ് വരെ നിലനിർത്തിയേക്കാം. ടോക്കൺ കാലാവധി കഴിയുമ്പോൾ വീഡിയോ നിലയ്ക്കുന്നു. കാസ്റ്റ് സെഷനുകൾക്കായി കൂടുതൽ സമയം നിലനിൽക്കുന്ന ടോക്കണുകൾ നൽകുക.
  • CORS errors – ഏത് ഡൊമെയ്‌നുകൾക്ക് ഒരു റിസോഴ്സ് അഭ്യർത്ഥിക്കാം എന്ന് CORS തീരുമാനിക്കുന്നു. ടിവി ഒരു പ്രത്യേക ഒറിജിൻ (origin) ആയി കണക്കാക്കപ്പെടുന്നു, അതിനാൽ നിങ്ങളുടെ വീഡിയോ സെർവർ പേജിന്റെ ഡൊമെയ്ൻ മാത്രം വൈറ്റ്‌ലിസ്റ്റ് (whitelist) ചെയ്തിട്ടുണ്ടെങ്കിൽ, ബ്രൗസറിൽ അതേ URL പ്രവർത്തിക്കുന്നുണ്ടെങ്കിലും ടിവിയുടെ അഭ്യർത്ഥന ബ്ലോക്ക് ചെയ്യപ്പെടും.
  • Unreachable hosts – ഡെവലപ്‌മെന്റ് സെറ്റപ്പുകളിൽ പലപ്പോഴും localhost, ഇന്റേണൽ ഹോസ്റ്റ് പേരുകൾ അല്ലെങ്കിൽ പ്രൈവറ്റ് IP റേഞ്ചുകൾ എന്നിവ ഉപയോഗിക്കാറുണ്ട്. ടിവി മറ്റൊരു നെറ്റ്‌വർക്ക് സെഗ്മെന്റിലായതിനാൽ ഈ അഡ്രസ്സുകളിലേക്ക് എത്തിച്ചേരാനോ റൂട്ട് ചെയ്യാനോ കഴിയില്ല, ഇത് പരാജയത്തിന് കാരണമാകുന്നു.
  • The MSE trap – Media Source Extensions (MSE) ബ്രൗസറുകളെ വീഡിയോ കഷണങ്ങൾ (chunks) തത്സമയം കൂട്ടിച്ചേർക്കാൻ അനുവദിക്കുന്നു, ഇത് പലപ്പോഴും വീഡിയോയെ ഒരു blob: URL ആയി കാണിക്കുന്നു. hls.js പോലുള്ള ലൈബ്രറികൾ അഡാപ്റ്റീവ് സ്ട്രീമിംഗിനായി ഇത്തരത്തിലുള്ള ബ്ലോബുകൾ (blobs) നിർമ്മിക്കുന്നു. ടിവികൾക്ക് ഒരു ബ്ലോബ് ഫെച്ച് ചെയ്യാൻ കഴിയില്ല; അവയ്ക്ക് യഥാർത്ഥ മാനീഫെസ്റ്റ് (ഉദാഹരണത്തിന് .m3u8 അല്ലെങ്കിൽ .mpd) URL ആവശ്യമാണ്. കാസ്റ്റ് ഡയലോഗ് തുടങ്ങുന്നതിന് മുമ്പ് സ്രോതസ്സ് (source) യഥാർത്ഥ മാനീഫെസ്റ്റ് URL-ലേക്ക് മാറ്റുക.

ഘട്ടം ഘട്ടമായുള്ള ചെക്ക്‌ലിസ്റ്റ്

  1. Detect cast support – Chrome-ന് വേണ്ടി Remote Playback API അല്ലെങ്കിൽ Safari-ന് വേണ്ടി WebKit ഇവന്റുകൾ ഉപയോഗിക്കുക. ബ്രൗസറിന് പ്ലേബാക്ക് കൈമാറാൻ കഴിയുമോ എന്ന് ഇത് നിങ്ങളെ അറിയിക്കും.
  2. Monitor connection state – ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്താൽ കണക്ഷൻ സ്ഥിരമായിരിക്കുമെന്ന് കരുതരുത്. Remote Playback ഒബ്‌ജക്റ്റിൽ നിന്നുള്ള connecting, connected, disconnect ഇവന്റുകൾ ശ്രദ്ധിക്കുക. ടിവിയെ തന്നെ കൃത്യമായ വിവരമായി (source of truth) കണക്കാക്കുക; ഒരു connected ഇവന്റ് ലഭിച്ചതിന് ശേഷം മാത്രം UI അപ്‌ഡേറ്റ് ചെയ്യുക.
  3. Swap to a long-lived, direct URL – remotePlayback.prompt() വിളിക്കുന്നതിന് മുമ്പ്, വീഡിയോ എലമെന്റിന്റെ src ടിവിക്ക് ലഭ്യമാകുന്ന മാനീഫെസ്റ്റ് URL ഉപയോഗിച്ച് മാറ്റുക. ലോക്കൽ പ്ലേബാക്കിനായി യഥാർത്ഥ ബ്ലോബ് അധിഷ്ഠിത സ്രോതസ്സ് നിലനിർത്തുക, എന്നാൽ കാസ്റ്റ് സെഷന് വേണ്ടി മാത്രം ഇത് മാറ്റുക.
  4. Validate with a bare-bones test – മാനീഫെസ്റ്റ് URL-ലേക്ക് വിരൽ ചൂണ്ടുന്ന ഒരു <video> ടാഗ് മാത്രമുള്ള, ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാത്ത ഒരു സാധാരണ HTML പേജ് നിർമ്മിക്കുക, അത് ഒരു മണിക്കൂർ പ്രവർത്തിപ്പിക്കുക. വീഡിയോ നിലയ്ക്കുകയാണെങ്കിൽ, സ്ട്രീം ടിവിയിലും പരാജയപ്പെടും. കാസ്റ്റ് ബട്ടൺ ചേർക്കുന്നതിന് മുമ്പ് ടോക്കൺ കാലാവധി, CORS ഹെഡറുകൾ അല്ലെങ്കിൽ ഹോസ്റ്റ് ലഭ്യത എന്നിവ പരിഹരിക്കുക.

ഡെവലപ്പർമാർക്ക് ലഭിക്കുന്ന നേട്ടം

പ്ലെയറിലെ മറ്റ് ഭാഗങ്ങളെ ബാധിക്കാതെ തന്നെ വിശ്വസനീയമായ ഒരു കാസ്റ്റ് ബട്ടൺ ചേർക്കാം.

ചുരുക്കത്തിൽ

കസ്റ്റം വീഡിയോ പ്ലെയറുകൾക്ക് കാസ്റ്റിംഗ് എന്നത് വെറുതെ ഒരു ഫീച്ചർ ചേർക്കുന്നത് പോലെ എളുപ്പമുള്ള കാര്യമല്ല; ഇത് പ്ലേബാക്കിനെ തികച്ചും വ്യത്യസ്തമായ ഒരു എൻവയോൺമെന്റിലേക്ക് കൈമാറുന്നു. കൂടുതൽ സമയം നിലനിൽക്കുന്നതും CORS അംഗീകരിച്ചതുമായ ഒരു URL നൽകുന്നതിലൂടെയും, ബ്ലോബ് റഫറൻസുകൾ ഒഴിവാക്കുന്നതിലൂടെയും, ടിവിയുടെ കണക്ഷൻ ഇവന്റുകൾ ശ്രദ്ധിക്കുന്നതിലൂടെയും, നിങ്ങളുടെ പ്ലെയർ തകരാറിലാക്കാതെ തന്നെ വിശ്വസനീയമായി പ്രവർത്തിക്കുന്ന ഒരു കാസ്റ്റ് ബട്ടൺ നിങ്ങൾക്ക് ചേർക്കാൻ കഴിയും.