Title: ನಿಮ್ಮ ವಿಡಿಯೋ ಪ್ಲೇಯರ್ ಅನ್ನು ಹಾಳು ಮಾಡದೆಯೇ ಅದಕ್ಕೆ Casting ಅನ್ನು ಸೇರಿಸಿ
ಬ್ರೌಸರ್‌ನಿಂದ ಟಿವಿಗೆ ವಿಡಿಯೋವನ್ನು ಕ್ಯಾಸ್ಟ್ ಮಾಡುವುದು ಸರಳವಾಗಿ ಕಾಣಿಸಬಹುದು, ಆದರೆ ಹೆಚ್ಚಿನ ಕಸ್ಟಮ್ HTML5 ಪ್ಲೇಯರ್‌ಗಳು ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿದ ತಕ್ಷಣ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತವೆ. ಇತ್ತೀಚಿನ ಡೆವಲಪರ್ ಗೈಡ್ ನಾಲ್ಕು ಗುಪ್ತ ವೈಫಲ್ಯದ ಅಂಶಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿದೆ—token expiry, CORS blocks, unreachable hosts, ಮತ್ತು MSE-blob trap—ಮತ್ತು ಇವುಗಳನ್ನು ಹೇಗೆ ತಪ್ಪಿಸಬೇಕೆಂದು ತೋರಿಸಿಕೊಡುತ್ತದೆ.
ಕಸ್ಟಮ್ ಪ್ಲೇಯರ್‌ಗಳು ಯಾಕೆ ಕ್ಯಾಸ್ಟಿಂಗ್‌ನಲ್ಲಿ ವಿಫಲವಾಗುತ್ತವೆ?
ನೀವು Cast ಬಟನ್ ಒತ್ತಿದಾಗ, ಟಿವಿಯು ನಿಮ್ಮ JavaScript ಪ್ಲೇಯರ್ ಅನ್ನು ರನ್ ಮಾಡುವುದಿಲ್ಲ. ಅದು ನೀವು ನೀಡಿದ stream URL ಅನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ತನ್ನದೇ ಆದ firmware ಬಳಸಿ ಮೀಡಿಯಾವನ್ನು ಪ್ಲೇ ಮಾಡುತ್ತದೆ. Overlays, analytics pings, ಮತ್ತು adaptive-bitrate logic ಬ್ರೌಸರ್‌ನಲ್ಲೇ ಇರುತ್ತವೆ. ಟಿವಿಯು ಅದೇ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಅದೇ URL ಅನ್ನು ಪಡೆಯಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೆ, ಪ್ಲೇಬ್ಯಾಕ್ ನಿಂತುಹೋಗುತ್ತದೆ, ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ಯಾವುದೇ ಸ್ಪಷ್ಟವಾದ ದೋಷ (error) ಕಾಣಿಸುವುದಿಲ್ಲ.
ನಾಲ್ಕು ಸಾಮಾನ್ಯ ಕಾರಣಗಳು
- Token expiry – ಅಲ್ಪಾವಧಿಯ security token ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ ಟಿವಿಯು ಆ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ತೊಂಬತ್ತು ನಿಮಿಷಗಳವರೆಗೆ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಬಹುದು. ಟೋಕನ್ ಅವಧಿ ಮುಗಿದಾಗ, ವಿಡಿಯೋ ನಿಂತುಹೋಗುತ್ತದೆ. ಕ್ಯಾಸ್ಟ್ ಸೆಷನ್‌ಗಳಿಗಾಗಿ ದೀರ್ಘಾವಧಿಯ ಟೋಕನ್‌ಗಳನ್ನು ನೀಡಿ.
- CORS errors – ಯಾವ ಡೊಮೇನ್‌ಗಳು ಸಂಪನ್ಮೂಲವನ್ನು (resource) ವಿನಂತಿಸಬಹುದು ಎಂಬುದನ್ನು CORS ನಿರ್ಧರಿಸುತ್ತದೆ. ಟಿವಿಯು ಒಂದು ಪ್ರತ್ಯೇಕ origin ಆಗಿ ಪರಿಗಣಿಸಲ್ಪಡುತ್ತದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ವಿಡಿಯೋ ಸರ್ವರ್ ಕೇವಲ ಪೇಜ್‌ನ ಡೊಮೇನ್ ಅನ್ನು ಮಾತ್ರ whitelists ಮಾಡಿದ್ದರೆ, ಅದೇ URL ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡಿದರೂ ಟಿವಿಯ ವಿನಂತಿ (request) ಬ್ಲಾಕ್ ಆಗುತ್ತದೆ.
- Unreachable hosts – ಡೆವಲಪ್‌ಮೆಂಟ್ ಸೆಟಪ್‌ಗಳು ಹೆಚ್ಚಾಗಿ
localhost, ಇಂಟರ್ನಲ್ ಹೋಸ್ಟ್‌ನೇಮ್‌ಗಳು ಅಥವಾ ಪ್ರೈವೇಟ್ IP ರೇಂಜ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಟಿವಿಯು ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಸೆಗ್ಮೆಂಟ್‌ನಲ್ಲಿ ಇರುತ್ತದೆ ಮತ್ತು ಆ ವಿಳಾಸಗಳಿಗೆ (addresses) ತಲುಪಲು ಅಥವಾ ರೂಟ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ, ಇದು ಯಾವುದೇ ಎಚ್ಚರಿಕೆ ಇಲ್ಲದೆ ವೈಫಲ್ಯಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. - The MSE trap – Media Source Extensions (MSE) ಬ್ರೌಸರ್‌ಗಳು ಚಂಕ್‌ಗಳನ್ನು (chunks) ತಕ್ಷಣವೇ ಜೋಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ, ಇದು ಹೆಚ್ಚಾಗಿ ವಿಡಿಯೋವನ್ನು
blob:URL ಆಗಿ ತೋರಿಸುತ್ತದೆ. hls.js ನಂತಹ ಲೈಬ್ರರಿಗಳು ಅಡಾಪ್ಟಿವ್ ಸ್ಟ್ರೀಮಿಂಗ್‌ಗಾಗಿ ಇಂತಹ blob ಗಳನ್ನು ರಚಿಸುತ್ತವೆ. ಟಿವಿಗಳು blob ಅನ್ನು ಪಡೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ; ಅವುಗಳಿಗೆ ನಿಜವಾದ manifest (ಉದಾಹರಣೆಗೆ.m3u8ಅಥವಾ.mpd) URL ಬೇಕಾಗುತ್ತದೆ. ಕ್ಯಾಸ್ಟ್ ಡೈಲಾಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಮೂಲವನ್ನು (source) ನಿಜವಾದ manifest URL ಗೆ ಬದಲಾಯಿಸಿ.
ಹಂತ-ಹಂತದ ಚೆಕ್‌ಲಿಸ್ಟ್
- Detect cast support – Chrome ಗಾಗಿ Remote Playback API ಅಥವಾ Safari ಗಾಗಿ WebKit events ಬಳಸಿ. ಬ್ರೌಸರ್ ಪ್ಲೇಬ್ಯಾಕ್ ಅನ್ನು ಹಸ್ತಾಂತರಿಸಲು ಸಾಧ್ಯವೇ ಎಂಬುದನ್ನು ಇದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ.
- Monitor connection state – ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದ್ದಕ್ಕೆ ಸ್ಥಿರವಾದ ಲಿಂಕ್ ಸಿಗುತ್ತದೆ ಎಂದು ಭಾವಿಸಬೇಡಿ. Remote Playback ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ
connecting,connected, ಮತ್ತುdisconnectಇವೆಂಟ್‌ಗಳಿಗೆ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ. ಟಿವಿಯನ್ನು ಮೂಲ ಸತ್ಯಾಂಶವಾಗಿ (source of truth) ಪರಿಗಣಿಸಿ;connectedಇವೆಂಟ್ ಬಂದ ನಂತರವಷ್ಟೇ UI ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ. - Swap to a long-lived, direct URL – ನೀವು
remotePlayback.prompt()ಅನ್ನು ಕರೆಯುವ ಮೊದಲು, ವಿಡಿಯೋ ಎಲಿಮೆಂಟ್‌ನsrcಅನ್ನು ಟಿವಿಯಿಂದ ಪಡೆಯಬಹುದಾದ manifest URL ಮೂಲಕ ಬದಲಾಯಿಸಿ. ಲೋಕಲ್ ಪ್ಲೇಬ್ಯಾಕ್‌ಗಾಗಿ ಮೂಲ blob-ಆಧಾರಿತ ಮೂಲವನ್ನು ಇಟ್ಟುಕೊಳ್ಳಿ, ಆದರೆ ಕ್ಯಾಸ್ಟ್ ಸೆಷನ್‌ಗಾಗಿ ಮಾತ್ರ ಅದನ್ನು ಬದಲಾಯಿಸಿ. - Validate with a bare-bones test – ಯಾವುದೇ JavaScript ಇಲ್ಲದೆ, ಕೇವಲ ಒಂದು
<video>ಟ್ಯಾಗ್ ಮತ್ತು manifest URL ಅನ್ನು ಹೊಂದಿರುವ ಸರಳ HTML ಪೇಜ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಅದನ್ನು ಒಂದು ಗಂಟೆಯ ಕಾಲ ರನ್ ಮಾಡಿ. ವಿಡಿಯೋ ನಿಂತುಹೋದರೆ, ಅಡಿಪಾಯದ ಸ್ಟ್ರೀಮ್ ಟಿವಿಯಲ್ಲೂ ವಿಫಲವಾಗುತ್ತದೆ. ಕ್ಯಾಸ್ಟ್ ಬಟನ್ ಸೇರಿಸುವ ಮೊದಲು token lifetimes, CORS headers ಅಥವಾ host accessibility ಅನ್ನು ಸರಿಪಡಿಸಿ.
ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಿಗುವ ಪ್ರಯೋಜನಗಳು
ಪ್ಲೇಯರ್‌ನ ಉಳಿದ ಭಾಗಗಳನ್ನು ಹಾಳು ಮಾಡದೆಯೇ ವಿಶ್ವಾಸಾರ್ಹ ಕ್ಯಾಸ್ಟ್ ಬಟನ್ ಅನ್ನು ಸೇರಿಸಿ.
ಸಾರಾಂಶ (Takeaway)
ಕಸ್ಟಮ್ ವಿಡಿಯೋ ಪ್ಲೇಯರ್‌ಗಳಿಗೆ ಕ್ಯಾಸ್ಟಿಂಗ್ ಎಂಬುದು ಕೇವಲ ಪ್ಲಗ್-ಅಂಡ್-ಪ್ಲೇ ಫೀಚರ್ ಅಲ್ಲ; ಇದು ಪ್ಲೇಬ್ಯಾಕ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನ ಪರಿಸರಕ್ಕೆ ಹಸ್ತಾಂತರಿಸುತ್ತದೆ. ದೀರ್ಘಾವಧಿಯ, CORS-ಅನುಮೋದಿತ URL ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, blob ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವ ಮೂಲಕ ಮತ್ತು ಟಿವಿಯ ಕನೆಕ್ಷನ್ ಇವೆಂಟ್‌ಗಳನ್ನು ಗಮನಿಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ ಪ್ಲೇಯರ್ ಅನ್ನು ಹಾಳು ಮಾಡದೆ ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಕೆಲಸ ಮಾಡುವ ಕ್ಯಾಸ್ಟ್ ಬಟನ್ ಅನ್ನು ಸೇರಿಸಬಹುದು.