1. खास जानकारी
यह कोडलैब आपको कास्ट की सुविधा वाले डिवाइसों पर कॉन्टेंट चलाने के लिए, कस्टम वेब रिसीवर ऐप्लिकेशन बनाने का तरीका बताएगा.
Google Cast क्या है?
Google Cast, उपयोगकर्ताओं को मोबाइल डिवाइस से टीवी पर कॉन्टेंट को कास्ट करने की सुविधा देता है. इसके बाद, लोग अपने मोबाइल डिवाइस या डेस्कटॉप के Chrome ब्राउज़र का इस्तेमाल, टीवी पर मीडिया चलाने के लिए रिमोट कंट्रोल के तौर पर कर सकते हैं.
Google Cast SDK टूल की मदद से, आपके ऐप्लिकेशन को उन डिवाइसों को कंट्रोल करने की अनुमति मिलती है जिन पर Google Cast की सुविधा चालू है. जैसे, टीवी या साउंड सिस्टम. Cast SDK टूल, Google Cast डिज़ाइन चेकलिस्ट के आधार पर आपको ज़रूरी यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट उपलब्ध कराता है.
Google Cast डिज़ाइन चेकलिस्ट इसलिए दी गई है, ताकि Cast के साथ काम करने वाले सभी प्लैटफ़ॉर्म पर, कास्ट करने वालों के अनुभव को आसान बनाया जा सके और उनका अनुमान लगाया जा सके. ज़्यादा जानकारी के लिए यहां जाएं.
हम क्या बनाने जा रहे हैं?
इस कोडलैब को पूरा कर लेने के बाद, आपके पास HTML5 ऐप्लिकेशन होगा, जो आपके कस्टम रिसीवर के तौर पर काम करेगा. इससे, कास्ट की सुविधा वाले डिवाइसों पर वीडियो कॉन्टेंट दिखाया जा सकेगा.
आप इन चीज़ों के बारे में जानेंगे
- रिसीवर डेवलपमेंट के लिए, सेटिंग कैसे सेट अप करें.
- कास्ट ऐप्लिकेशन फ़्रेमवर्क के आधार पर, कास्ट करने की सुविधा वाले रिसीवर की बुनियादी बातें.
- कास्ट किया गया वीडियो पाने का तरीका.
- डीबग लॉगर को इंटिग्रेट करने का तरीका.
- स्मार्ट डिसप्ले के लिए, रिसीवर को ऑप्टिमाइज़ करने का तरीका.
आपको इनकी ज़रूरत होगी
- Google Chrome का नया ब्राउज़र.
- एचटीटीपीएस होस्टिंग की सेवा, जैसे कि Firebase होस्टिंग या ngrok.
- Google Cast डिवाइस, जैसे कि Chromecast या Android TV, जिसे इंटरनेट ऐक्सेस के साथ कॉन्फ़िगर किया गया हो.
- एचडीएमआई इनपुट वाला टीवी या मॉनिटर.
अनुभव
- आपके पास वेब डेवलपमेंट की पहले से जानकारी होनी चाहिए.
- इसके लिए, आपके पास टीवी देखने के बारे में पहले से जानकारी भी होनी चाहिए :)
आपको इस ट्यूटोरियल का इस्तेमाल कैसे करना है?
वेब ऐप्लिकेशन बनाने के अपने अनुभव के लिए आपकी रेटिंग क्या होगी?
आपके हिसाब से टीवी देखने का अनुभव कैसा रहा?
2. सैंपल कोड पाएं
अपने कंप्यूटर पर सभी सैंपल कोड डाउनलोड किए जा सकते हैं...
और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.
3. रिसीवर को स्थानीय तौर पर डिप्लॉय किया जा रहा है
कास्ट डिवाइस के साथ वेब रिसीवर का इस्तेमाल करने के लिए, इसे किसी ऐसी जगह पर होस्ट करना होगा जहां आपका कास्ट डिवाइस इसे ऐक्सेस कर सके. अगर आपके पास ऐसा सर्वर पहले से मौजूद है जिस पर https काम करता है, तो नीचे दिए गए निर्देशों को छोड़ दें और यूआरएल को नोट कर लें, क्योंकि आपको अगले सेक्शन में इसकी ज़रूरत पड़ेगी.
अगर आपके पास इस्तेमाल के लिए कोई सर्वर नहीं है, तो Firebase होस्टिंग या ngrok का इस्तेमाल किया जा सकता है.
सर्वर चलाएं
अपनी पसंद की सेवा सेट अप करने के बाद, app-start
पर जाएं और सर्वर चालू करें.
अपने होस्ट किए गए रिसीवर के यूआरएल को नोट कर लें. इसका इस्तेमाल अगले सेक्शन में किया जाएगा.
4. Cast Developer Console में ऐप्लिकेशन रजिस्टर करना
Chromecast डिवाइसों पर, इस कोडलैब में पहले से मौजूद कस्टम रिसीवर को चलाने के लिए अपना ऐप्लिकेशन रजिस्टर करना ज़रूरी है. ऐप्लिकेशन रजिस्टर करने के बाद, आपको एक ऐप्लिकेशन आईडी मिलेगा. इस आईडी का इस्तेमाल करके, भेजने वाले के ऐप्लिकेशन को एपीआई कॉल करना होगा. उदाहरण के लिए, रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए.
"नया ऐप्लिकेशन जोड़ें" पर क्लिक करें
"पसंद के मुताबिक पाने वाला" चुनें. हम इसे बना रहे हैं.
कॉन्टेंट पाने वाले नए व्यक्ति की जानकारी डालें. पक्का करें कि आपने उसी यूआरएल का इस्तेमाल किया हो जिसे आपने ऐक्सेस किया था
आखिरी सेक्शन में देखें. जिस नए व्यक्ति ने आपका ऐप्लिकेशन पाने वाले व्यक्ति को असाइन किया है वह ऐप्लिकेशन आईडी नोट कर लें.
आपको अपने Google Cast डिवाइस को भी रजिस्टर करना होगा, ताकि इसे पब्लिश करने से पहले ही वह आपके रिसीवर ऐप्लिकेशन को ऐक्सेस कर सके. रिसीवर ऐप्लिकेशन को पब्लिश करने के बाद, यह Google Cast की सुविधा वाले सभी डिवाइसों पर उपलब्ध होगा. इस कोडलैब के लिए, हमारा सुझाव है कि रिसीवर के ऐसे ऐप्लिकेशन के साथ काम करें जिसे अभी तक पब्लिश नहीं किया गया है.
"नया डिवाइस जोड़ें" पर क्लिक करें
अपने कास्ट डिवाइस के पीछे प्रिंट किया गया सीरियल नंबर डालें और उसे कोई जानकारी देने वाला नाम दें. Google Cast SDK डेवलपर कंसोल को ऐक्सेस करते समय, Chrome में अपनी स्क्रीन को कास्ट करके भी अपना सीरियल नंबर मिल सकता है
आपके रिसीवर और डिवाइस को टेस्ट के लिए तैयार होने में 5-15 मिनट लगेंगे. 5 से 15 मिनट इंतज़ार करने के बाद, आपको अपना कास्ट डिवाइस फिर से चालू करना होगा.
5. सैंपल ऐप्लिकेशन चलाएं
रिसीवर के लिए नया ऐप्लिकेशन टेस्ट के लिए तैयार होने तक, आइए देखते हैं कि पूरा किया जा चुका, रिसीवर ऐप्लिकेशन कैसा दिखता है. हम जो रिसीवर बनाएंगे वह अडैप्टिव बिटरेट स्ट्रीमिंग का इस्तेमाल करके मीडिया चला पाएगा. हम डाइनैमिक अडैप्टिव स्ट्रीमिंग ओवर एचटीटीपी (डीएएसएच) के लिए, कोड में बदले गए सैंपल कॉन्टेंट का इस्तेमाल करेंगे.
अपने ब्राउज़र में, कमांड और कंट्रोल (सीएसी) टूल खोलें.
- आपको हमारा सीएसी टूल दिखेगा.
- पाने वाले के डिफ़ॉल्ट आईडी "CC1AD845" के डिफ़ॉल्ट आईडी का इस्तेमाल करें और "ऐप्लिकेशन आईडी सेट करें" बटन पर क्लिक करें.
- सबसे ऊपर बाईं ओर मौजूद, कास्ट करें बटन पर क्लिक करें और अपना Google Cast डिवाइस चुनें.
- सबसे ऊपर "मीडिया लोड करें" टैब पर जाएं.
- सैंपल वीडियो चलाने के लिए, "कॉन्टेंट के हिसाब से लोड करें" बटन पर क्लिक करें.
- वीडियो आपके Google Cast डिवाइस पर चलना शुरू हो जाएगा, ताकि यह दिखाया जा सके कि डिफ़ॉल्ट रिसीवर का इस्तेमाल करके रिसीवर की बुनियादी सुविधाएं कैसी दिखती हैं.
6. शुरुआती प्रोजेक्ट तैयार करना
आपके डाउनलोड किए गए स्टार्ट ऐप्लिकेशन के लिए, हमें Google Cast के लिए सहायता जोड़नी होगी. यहां Google Cast की कुछ शब्दावली दी गई है, जिनका इस्तेमाल हम इस कोडलैब में करेंगे:
- भेजने वाला ऐप्लिकेशन, मोबाइल डिवाइस या लैपटॉप पर चलता है,
- रिसीवर ऐप्लिकेशन, Google Cast डिवाइस पर चलता है.
अब आप अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, स्टार्टर प्रोजेक्ट पर काम करने के लिए तैयार हैं:
- सैंपल कोड डाउनलोड करने के लिए,
app-start
डायरेक्ट्री चुनें. js/receiver.js
औरindex.html
खोलें
ध्यान दें, इस कोडलैब के लिए काम करते समय, http-server
को वे बदलाव दिखेंगे जो आपने किए हैं. अगर आपको ऐसा नहीं दिखता है, तो http-server
को बंद करके फिर से चालू करके देखें.
ऐप्लिकेशन डिज़ाइन
रिसीवर ऐप्लिकेशन, कास्ट सेशन शुरू करता है और तब तक स्टैंडबाय मोड में रहता है, जब तक कि भेजने वाले व्यक्ति की तरफ़ से लोड का अनुरोध (दूसरे शब्दों में, मीडिया के किसी हिस्से को चलाने का निर्देश) नहीं आता.
इस ऐप्लिकेशन में एक मुख्य व्यू होता है, जो index.html
में तय किया जाता है. साथ ही, इसमें js/receiver.js
नाम की एक JavaScript फ़ाइल होती है, जिसमें वह सभी लॉजिक होते हैं जिनसे रिसीवर को काम करने में मदद मिलती है.
index.html
इस एचटीएमएल फ़ाइल में, हमारे रिसीवर ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) शामिल होगा. फ़िलहाल, यह खाली है और हम इसे पूरे कोड लैब में जोड़ते रहेंगे.
receiver.js
यह स्क्रिप्ट हमारे रिसीवर ऐप्लिकेशन के लिए सभी लॉजिक को मैनेज करेगी. इस समय यह सिर्फ़ एक खाली फ़ाइल है, लेकिन हम इसे पूरी तरह से काम करने वाले कास्ट रिसीवर में बदलने वाले हैं. अगले सेक्शन में, कोड की बस कुछ लाइनें होंगी.
7. सामान्य कास्ट रिसीवर
कास्ट के लिए इस्तेमाल होने वाला सामान्य रिसीवर, चालू होने पर कास्ट सेशन को शुरू करेगा. यह कनेक्ट किए गए सभी भेजने वालों के ऐप्लिकेशन को यह बताना ज़रूरी है कि रिसीवर को पूरी तरह से लाया गया है. साथ ही, नए SDK टूल को पहले से ही कॉन्फ़िगर किया गया है. इसकी मदद से, DASH, HLS, और स्मूद स्ट्रीमिंग के साथ-साथ सामान्य MP4 फ़ाइलों का इस्तेमाल करके, ज़रूरत के हिसाब से बिटरेट स्ट्रीम किया जा सकता है. आइए, इसे आज़माते हैं.
शुरू करना
हेडर में, index.html
में यह कोड जोड़ें:
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>
इस कोड को <footer>
लोडिंग receiver.js,
से पहले, index.html
<body>
में जोड़ें. इससे, रिसीवर के SDK टूल को जगह की जानकारी दी जा सकती है, ताकि वह डिफ़ॉल्ट रिसीवर का यूज़र इंटरफ़ेस (यूआई) उपलब्ध करा सके. इस यूआई को, आपकी हाल ही में जोड़ी गई स्क्रिप्ट के साथ भेजा जा सकता है.
<cast-media-player></cast-media-player>
अब हमें js/receiver.js
में SDK टूल शुरू करना होगा. इसमें ये शामिल हैं:
CastReceiverContext
का रेफ़रंस पाना, जो कॉन्टेंट पाने वाले के पूरे SDK टूल पर आपका मुख्य एंट्री पॉइंट हैPlayerManager
का रेफ़रंस स्टोर करना, जो ऑब्जेक्ट हैंडल करने वाला है. साथ ही, आपको वे सभी हुक देता है जिनकी ज़रूरत आपको अपने कस्टम लॉजिक को प्लग-इन करने के लिए होती हैCastReceiverContext
परstart()
को कॉल करके, SDK टूल को शुरू किया जा रहा है
js/receiver.js
में यह जोड़ें.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
context.start();
8. "बुनियादी" वीडियो कॉन्टेंट कास्ट करना
इस कोडलैब के लिए, CAC टूल का इस्तेमाल करके नए रिसीवर को आज़माएं.
अपने वेब ब्राउज़र को कमांड और कंट्रोल (CaC) टूल पर ले जाएं.
पक्का करें कि आपका ऐप्लिकेशन आईडी, फ़ील्ड में पहले रजिस्टर किया गया हो और "ऐप्लिकेशन आईडी सेट करें" पर क्लिक करें. इससे, कास्ट सेशन शुरू करते समय, टूल को रिसीवर का इस्तेमाल करने का निर्देश मिलता है.
मीडिया कास्ट किया जा रहा है
हाई लेवल पर, किसी कास्ट डिवाइस पर मीडिया चलाने के लिए ये चीज़ें होनी चाहिए:
- भेजने वाला, Cast SDK टूल से
MediaInfo
JSON
ऑब्जेक्ट बनाता है, जो मीडिया आइटम को मॉडल करता है. - रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए, भेजने वाला डिवाइस, कास्ट डिवाइस से कनेक्ट होता है.
- कॉन्टेंट चलाने के लिए, रिसीवर
LOAD
अनुरोध के ज़रिएMediaInfo
ऑब्जेक्ट को लोड करता है. - रिसीवर, मीडिया की स्थिति को मॉनिटर और ट्रैक करता है.
- भेजने वाला व्यक्ति, भेजने वाले ऐप्लिकेशन के साथ उपयोगकर्ता के इंटरैक्शन के हिसाब से, प्लेबैक कंट्रोल करने के लिए रिसीवर को वीडियो चलाने के निर्देश भेजता है.
पहली बार कोशिश करने पर, हम MediaInfo
में संगीत चलाने लायक एसेट का यूआरएल डालने वाले हैं. यह यूआरएल MediaInfo.contentUrl
में सेव होगा.
असल में भेजने वाला व्यक्ति, MediaInfo.contentId
में ऐप्लिकेशन के लिए खास तौर पर बने मीडिया आइडेंटिफ़ायर का इस्तेमाल करता है. सही बैकएंड एपीआई कॉल करने के लिए, रिसीवर contentId
को आइडेंटिफ़ायर के तौर पर इस्तेमाल करता है. इससे असल एसेट यूआरएल को MediaInfo.contentUrl.
पर सेट किया जाता है. साथ ही, रिसीवर डीआरएम लाइसेंस हासिल करने या विज्ञापन के लिए ब्रेक की जानकारी इंजेक्ट करने जैसे टास्क भी हैंडल करेगा.
हम अगले सेक्शन में, कुछ ऐसा करने के लिए आपके रिसीवर का दायरा बढ़ाएंगे. फ़िलहाल, 'कास्ट करें' आइकॉन पर क्लिक करें और रिसीवर खोलने के लिए अपना डिवाइस चुनें.
"मीडिया लोड करें" टैब पर नेविगेट करें और "कॉन्टेंट के हिसाब से लोड करें' बटन पर क्लिक करें. आपका रिसीवर, सैंपल कॉन्टेंट चलाना शुरू कर देगा.
इसलिए, पाने वाले के SDK टूल अब काम के नहीं हैं:
- कास्ट सेशन शुरू करें
- ईमेल भेजने वाले उन लोगों के
LOAD
अनुरोधों को मैनेज करें जिनमें चलाने लायक ऐसेट हैं - एक बुनियादी प्लेयर यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराएं, जो बड़ी स्क्रीन पर दिखाने के लिए तैयार है.
अगले सेक्शन पर जाने से पहले, CaC टूल और उसके कोड को एक्सप्लोर करें. इसके बाद, हम अपने रिसीवर को एपीआई के एक आसान सैंपल से कनेक्ट करेंगे. इससे, आपको भेजने वालों से मिलने वाले LOAD
अनुरोधों को पूरा करने में मदद मिलेगी.
9. बाहरी एपीआई के साथ इंटिग्रेट करें
ज़्यादातर डेवलपर, असल दुनिया के ऐप्लिकेशन में कास्ट पाने वालों के साथ कैसे इंटरैक्ट करते हैं, इसके हिसाब से हम अपने रिसीवर में बदलाव करने वाले हैं. अब हम LOAD
के अनुरोधों को हैंडल करेंगे. ये अनुरोध, मीडिया कॉन्टेंट के एपीआई पासकोड से मिलने वाले अनुरोधों को हैंडल करने में मदद करते हैं. इसे चलाने के लिए कोई एसेट यूआरएल नहीं भेजा जाता.
ऐप्लिकेशन आम तौर पर ऐसा इसलिए करते हैं, क्योंकि:
- ऐसा हो सकता है कि भेजने वाले को कॉन्टेंट का यूआरएल न पता हो.
- कास्ट ऐप्लिकेशन को पुष्टि करने, दूसरे कारोबारी लॉजिक या एपीआई कॉल को सीधे रिसीवर पर मैनेज करने के लिए डिज़ाइन किया गया है.
यह सुविधा मुख्य रूप से PlayerManager
setMessageInterceptor()
तरीके में लागू की गई है. इसकी मदद से, आने वाले मैसेज को टाइप के हिसाब से रोका जा सकता है. साथ ही, SDK टूल के इंटरनल मैसेज हैंडलर तक पहुंचने से पहले ही उनमें बदलाव किया जा सकता है. इस सेक्शन में, हम LOAD
के अनुरोधों पर कार्रवाई कर रहे हैं:
LOAD
को मिलने वाले अनुरोध और उसके कस्टमcontentId
को पढ़ें.contentId
की मदद से स्ट्रीम की जा सकने वाली एसेट खोजने के लिए, हमारे एपीआई कोGET
कॉल करें.- स्ट्रीम के यूआरएल के साथ,
LOAD
अनुरोध में बदलाव करें. - स्ट्रीम टाइप पैरामीटर सेट करने के लिए,
MediaInformation
ऑब्जेक्ट में बदलाव करें. - वीडियो चलाने के लिए SDK टूल को अनुरोध भेजें या अगर हमें अनुरोध किया गया मीडिया नहीं मिलता है, तो निर्देश को अस्वीकार कर दें.
एपीआई का दिया गया सैंपल, SDK टूल के हुक दिखाता है, जिनकी मदद से रिसीवर के सामान्य कामों को पसंद के मुताबिक बनाया जा सकता है. साथ ही, इस एपीआई का इस्तेमाल करने के दौरान भी, यह सामान्य से अलग तरह का अनुभव देता है.
सैंपल एपीआई
अपने ब्राउज़र को https://storage.googleapis.com/cpe-sample-media/content.json पर ले जाएं और सैंपल वीडियो कैटलॉग देखें. कॉन्टेंट में पोस्टर इमेज के यूआरएल png फ़ॉर्मैट में हैं. साथ ही, इसमें DASH और HLS, दोनों स्ट्रीम के यूआरएल भी शामिल हैं. DASH और HLS स्ट्रीम, फ़्रैगमेंट वाले mp4 कंटेनर में स्टोर किए गए, बंद किए गए वीडियो और ऑडियो सोर्स के बारे में बताती हैं.
{
"bbb": {
"author": "The Blender Project",
"description": "Grumpy Bunny is grumpy",
"poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
"stream": {
"dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
"hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
"title": "Big Buck Bunny"
},
"fbb_ad": {
"author": "Google Inc.",
"description": "Introducing Chromecast. The easiest way to enjoy [...]",
"poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
"stream": {
"dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
"hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
"title": "For Bigger Blazes"
},
[...]
}
अगले चरण में, हम एंट्री के हर बटन (जैसे कि bbb, fbb_ad
) को स्ट्रीम के यूआरएल से मैप करेंगे. ऐसा तब किया जाएगा, जब रिसीवर को LOAD
का अनुरोध भेजा जाएगा.
लोड करने के अनुरोध को रोकें
इस चरण में, हम एक लोड इंटरसेप्टर बनाएंगे. इसका फ़ंक्शन, होस्ट की गई JSON
फ़ाइल के लिए XHR
अनुरोध करेगा. JSON
फ़ाइल मिल जाने के बाद, हम कॉन्टेंट को पार्स करेंगे और मेटाडेटा सेट करेंगे. नीचे दिए गए सेक्शन में, हम कॉन्टेंट का टाइप बताने के लिए MediaInformation
पैरामीटर को पसंद के मुताबिक बनाएंगे.
context.start()
पर कॉल करने से ठीक पहले, अपनी js/receiver.js
फ़ाइल में यह कोड जोड़ें.
function makeRequest (method, url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(JSON.parse(xhr.response));
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
// Fetch content repository by requested contentId
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
let item = data[request.media.contentId];
if(!item) {
// Content could not be found in repository
reject();
} else {
// Add metadata
let metadata = new
cast.framework.messages.GenericMediaMetadata();
metadata.title = item.title;
metadata.subtitle = item.author;
request.media.metadata = metadata;
// Resolve request
resolve(request);
}
});
});
});
अगले सेक्शन में, DASH कॉन्टेंट के लिए, लोड करने के अनुरोध की media
प्रॉपर्टी को कॉन्फ़िगर करने का तरीका बताया गया है.
सैंपल एपीआई के DASH कॉन्टेंट का इस्तेमाल करना
अब हमने लोड इंटरसेप्टर तैयार कर लिया है, इसलिए हम रिसीवर को कॉन्टेंट का टाइप बताएंगे. यह जानकारी पाने वाले को मास्टर प्लेलिस्ट का यूआरएल और स्ट्रीम का MIME टाइप मिलेगा. LOAD
इंटरसेप्टर की Promise()
में, js/receiver.js फ़ाइल में यह कोड जोड़ें:
...
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
...
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.dash;
request.media.contentType = 'application/dash+xml';
...
}
});
});
});
यह चरण पूरा करने के बाद, 'इसे टेस्ट करें' पर जाएं और डैश कॉन्टेंट के साथ लोड करने की कोशिश करें. अगर आपको HLS कॉन्टेंट के साथ पेज लोड होने की जांच करनी है, तो अगला चरण देखें.
सैंपल एपीआई HLS कॉन्टेंट का इस्तेमाल करना
सैंपल एपीआई में, HLS कॉन्टेंट के साथ-साथ DASH भी शामिल है. पिछले चरण की तरह, contentType
को सेट करने के अलावा, सैंपल एपीआई के HLS यूआरएल का इस्तेमाल करने के लिए, लोड करने के अनुरोध को कुछ और प्रॉपर्टी की ज़रूरत होगी. जब रिसीवर को HLS स्ट्रीम चलाने के लिए कॉन्फ़िगर किया जाता है, तो डिफ़ॉल्ट कंटेनर टाइप, ट्रांसपोर्ट स्ट्रीम (TS) होता है. इस वजह से, अगर सिर्फ़ contentUrl
प्रॉपर्टी में बदलाव किया जाता है, तो रिसीवर TS फ़ॉर्मैट में सैंपल MP4 स्ट्रीम खोलने की कोशिश करेगा. लोड करने के अनुरोध में, MediaInformation
ऑब्जेक्ट में अतिरिक्त प्रॉपर्टी के साथ बदलाव किया जाना चाहिए. इससे, कॉन्टेंट पाने वाले को पता चल जाता है कि कॉन्टेंट MP4 टाइप का है, न कि TS. contentUrl
और contentType
प्रॉपर्टी में बदलाव करने के लिए, लोड इंटरसेप्टर में अपनी js/receiver.js फ़ाइल में नीचे दिया गया कोड जोड़ें. इसके अलावा, HlsSegmentFormat
और HlsVideoSegmentFormat
प्रॉपर्टी भी जोड़ें.
...
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
return new Promise((resolve, reject) => {
...
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.hls;
request.media.contentType = 'application/x-mpegurl';
request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
...
}
});
});
});
इसे आज़माना
फिर से कमांड और कंट्रोल (सीएसी) टूल खोलें और फ़ाइलें पाने वाले के ऐप्लिकेशन आईडी पर अपना ऐप्लिकेशन आईडी सेट करें. 'कास्ट करें' बटन का इस्तेमाल करके अपना डिवाइस चुनें.
"मीडिया लोड करें" टैब पर जाएं. इस बार "कॉन्टेंट के हिसाब से लोड करें" बटन के बगल में मौजूद "कॉन्टेंट यूआरएल" फ़ील्ड में मौजूद टेक्स्ट को मिटाएं. इससे हमारा ऐप्लिकेशन हमारे मीडिया के लिए सिर्फ़ contentId
रेफ़रंस वाला LOAD
अनुरोध भेजेगा.
यह मानते हुए कि रिसीवर में आपके बदलावों के साथ सब कुछ ठीक से काम किया गया है, इंटरसेप्टर को MediaInfo
ऑब्जेक्ट को ऐसी चीज़ में आकार देना चाहिए जिसे SDK टूल स्क्रीन पर चला सके.
आपका मीडिया ठीक से चल रहा है या नहीं, यह देखने के लिए "कॉन्टेंट के हिसाब से लोड करें" बटन पर क्लिक करें. content.json फ़ाइल में, Content ID को किसी दूसरे आईडी में बदलें.
10. स्मार्ट डिसप्ले के लिए ऑप्टिमाइज़ किया जा रहा है
स्मार्ट डिसप्ले, टच की सुविधा वाले डिवाइस हैं. इनकी मदद से, रिसीवर ऐप्लिकेशन को टच की सुविधा वाले कंट्रोल के साथ काम करने की सुविधा मिलती है.
इस सेक्शन में बताया गया है कि स्मार्ट डिसप्ले पर लॉन्च होने के बाद, रिसीवर ऐप्लिकेशन को किस तरह ऑप्टिमाइज़ किया जा सकता है. साथ ही, प्लेयर कंट्रोल को पसंद के मुताबिक बनाने का तरीका भी बताया गया है.
यूज़र इंटरफ़ेस (यूआई) के कंट्रोल ऐक्सेस करना
स्मार्ट डिसप्ले के लिए, यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट को cast.framework.ui.Controls.GetInstance()
का इस्तेमाल करके ऐक्सेस किया जा सकता है. context.start()
के ऊपर मौजूद अपनी js/receiver.js
फ़ाइल में, यह कोड जोड़ें:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
context.start();
<cast-media-player> एलिमेंट का इस्तेमाल नहीं करने पर, आपको CastReceiverOptions
में touchScreenOptimizedApp
को सेट करना होगा. इस कोडलैब में, हम <cast-media-player> एलिमेंट का इस्तेमाल कर रहे हैं.
context.start({ touchScreenOptimizedApp: true });
MetadataType
और MediaStatus.supportedMediaCommands
के आधार पर हर स्लॉट को डिफ़ॉल्ट कंट्रोल बटन असाइन किए जाते हैं.
वीडियो के कंट्रोल
MetadataType.MOVIE
, MetadataType.TV_SHOW
, और MetadataType.GENERIC
के लिए, स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल के ऑब्जेक्ट, नीचे दिए गए उदाहरण की तरह दिखेंगे.
--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2
:ControlsButton.QUEUE_NEXT
ऑडियो कंट्रोल
MetadataType.MUSIC_TRACK
के लिए, स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट इस तरह दिखेगा:
--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2
:ControlsButton.NO_BUTTON
इस्तेमाल किए जा सकने वाले मीडिया कमांड अपडेट किए जा रहे हैं
यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट से यह भी पता चलता है कि MediaStatus.supportedMediaCommands
के आधार पर, ControlsButton
दिखाया गया है या नहीं.
supportedMediaCommands
की वैल्यू ALL_BASIC_MEDIA
के बराबर होने पर, डिफ़ॉल्ट कंट्रोल लेआउट इस तरह दिखेगा:
supportedMediaCommands
की वैल्यू ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
के बराबर होने पर, डिफ़ॉल्ट कंट्रोल लेआउट इस तरह दिखेगा:
जब supportedMediaCommands की वैल्यू PAUSE | QUEUE_PREV | QUEUE_NEXT
के बराबर हो, तो डिफ़ॉल्ट कंट्रोल लेआउट इस तरह दिखेगा:
टेक्स्ट ट्रैक उपलब्ध होने पर, सबटाइटल बटन हमेशा SLOT_1
पर दिखेगा.
रिसीवर का कॉन्टेक्स्ट शुरू करने के बाद, supportedMediaCommands
की वैल्यू को डाइनैमिक तरीके से बदलने के लिए, PlayerManager.setSupportedMediaCommands
को कॉल किया जा सकता है. इससे वैल्यू को बदला जा सकता है. साथ ही, addSupportedMediaCommands
का इस्तेमाल करके नया निर्देश जोड़ा जा सकता है या removeSupportedMediaCommands
का इस्तेमाल करके मौजूदा निर्देश को हटाया जा सकता है.
नियंत्रण बटन कस्टमाइज़ करना
PlayerDataBinder
का इस्तेमाल करके, कंट्रोल को पसंद के मुताबिक बनाया जा सकता है. अपने कंट्रोल का पहला स्लॉट सेट करने के लिए, TouchControls के नीचे अपनी js/receiver.js
फ़ाइल में इस कोड को जोड़ें:
...
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
if (!e.value) return;
// Clear default buttons and re-assign
touchControls.clearDefaultSlotAssignments();
touchControls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
);
});
context.start();
11. स्मार्ट डिसप्ले पर मीडिया ब्राउज़ की सुविधा लागू करना
मीडिया ब्राउज़ एक CAF रिसीवर है, जिसकी मदद से उपयोगकर्ता टच डिवाइसों पर अन्य कॉन्टेंट एक्सप्लोर कर सकते हैं. इसे लागू करने के लिए, आपको PlayerDataBinder
का इस्तेमाल करके BrowseContent
यूज़र इंटरफ़ेस (यूआई) सेट करना होगा. इसके बाद, जिस कॉन्टेंट को दिखाना है उसके हिसाब से, इसे BrowseItems
से भरा जा सकता है.
BrowseContent
नीचे BrowseContent
यूज़र इंटरफ़ेस (यूआई) और उसकी प्रॉपर्टी का एक उदाहरण दिया गया है:
BrowseContent.title
BrowseContent.items
आसपेक्ट रेशियो
अपनी इमेज एसेट के लिए सबसे सही आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) चुनने के लिए, targetAspectRatio property
का इस्तेमाल करें. CAF रिसीवर SDK टूल के साथ ये तीन आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) काम करते हैं: SQUARE_1_TO_1
, PORTRAIT_2_TO_3
, LANDSCAPE_16_TO_9
.
BrowseItem
हर आइटम का टाइटल, सबटाइटल, कुल समय, और इमेज दिखाने के लिए BrowseItem
का इस्तेमाल करें:
BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle
मीडिया ब्राउज़ डेटा सेट करें
setBrowseContent
पर कॉल करके, ब्राउज़ करने के लिए मीडिया कॉन्टेंट की सूची उपलब्ध कराई जा सकती है. ब्राउज़ आइटम को "अगला" के शीर्षक के साथ सेट करने के लिए, अपने playerDataBinder
के नीचे और MEDIA_CHANGED
इवेंट लिसनर में इस कोड को अपनी js/receiver.js
फ़ाइल में जोड़ें.
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
...
let browseItems = getBrowseItems();
function getBrowseItems() {
let browseItems = [];
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
.then(function (data) {
for (let key in data) {
let item = new cast.framework.ui.BrowseItem();
item.entity = key;
item.title = data[key].title;
item.subtitle = data[key].description;
item.image = new cast.framework.messages.Image(data[key].poster);
item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
browseItems.push(item);
}
});
return browseItems;
}
let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
if (!e.value) return;
....
// Media browse
touchControls.setBrowseContent(browseContent);
});
मीडिया ब्राउज़ करने वाले किसी आइटम पर क्लिक करने से, LOAD
इंटरसेप्टर ट्रिगर होगा. मीडिया ब्राउज़ आइटम से, request.media.contentId
को request.media.entity
पर मैप करने के लिए, अपने LOAD
इंटरसेप्टर में यह कोड जोड़ें:
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
...
// Map contentId to entity
if (request.media && request.media.entity) {
request.media.contentId = request.media.entity;
}
return new Promise((resolve, reject) => {
...
});
});
मीडिया ब्राउज़ यूज़र इंटरफ़ेस (यूआई) हटाने के लिए, BrowseContent
ऑब्जेक्ट को null
पर भी सेट किया जा सकता है.
12. डीबग करने वाले रिसीवर के ऐप्लिकेशन
कास्ट पाने वाले का SDK टूल, डेवलपर को एक और विकल्प देता है. इसकी मदद से, वे लॉग कैप्चर करने के लिए CastDebugLogger API और एक साथी कमांड और कंट्रोल (CaC) टूल का इस्तेमाल करके, रिसीवर ऐप्लिकेशन को आसानी से डीबग कर सकते हैं.
डेटा लेयर में इवेंट बनाने की प्रोसेस
एपीआई को शामिल करने के लिए, अपनी index.html फ़ाइल में CastDebugLogger
सोर्स स्क्रिप्ट जोड़ें. सोर्स का एलान, कास्ट पाने वाले के SDK टूल की जानकारी देने के बाद, <head> टैग में किया जाना चाहिए.
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
फ़ाइल में सबसे ऊपर और playerManager
के नीचे मौजूद js/receiver.js
में, CastDebugLogger
इंस्टेंस वापस पाने और लॉगर को चालू करने के लिए, यह कोड जोड़ें:
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
डीबग लॉगर चालू होने पर, रिसीवर पर DEBUG MODE
दिखाने वाला ओवरले दिखेगा.
खिलाड़ी इवेंट लॉग करें
CastDebugLogger
का इस्तेमाल करके, CAF रिसीवर SDK से ट्रिगर किए गए प्लेयर इवेंट को आसानी से लॉग किया जा सकता है. साथ ही, इवेंट डेटा को लॉग करने के लिए अलग-अलग लॉगर लेवल का इस्तेमाल किया जा सकता है. यह बताने के लिए कि कौनसे इवेंट लॉग किए जाएंगे, loggerLevelByEvents
कॉन्फ़िगरेशन cast.framework.events.EventType
और cast.framework.events.category
का इस्तेमाल करता है.
castDebugLogger
एलान के नीचे यह कोड जोड़ें, ताकि प्लेयर के CORE
इवेंट के ट्रिगर होने या mediaStatus
का कोई बदलाव ब्रॉडकास्ट होने पर उसका लॉग रखा जा सके:
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
लॉग मैसेज और कस्टम टैग
CastDebugLogger API से, आपको ऐसे लॉग मैसेज बनाने में मदद मिलती है जो रिसीवर के डीबग ओवरले में अलग-अलग रंगों में दिखते हैं. लॉग के ये तरीके उपलब्ध हैं. इन्हें सबसे ज़्यादा से सबसे कम प्राथमिकता के क्रम में दिखाया गया है:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
हर लॉग तरीके के लिए, पहला पैरामीटर कस्टम टैग होता है. यह पहचान करने वाली कोई भी ऐसी स्ट्रिंग हो सकती है जो आपके काम की हो. CastDebugLogger
, लॉग को फ़िल्टर करने के लिए टैग का इस्तेमाल करता है. टैग के इस्तेमाल के बारे में यहां विस्तार से बताया गया है. दूसरा पैरामीटर लॉग मैसेज है.
लॉग को दिखाते समय, अपने LOAD
इंटरसेप्टर में लॉग जोड़ें.
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');
// Map contentId to entity
if (request.media && request.media.entity) {
request.media.contentId = request.media.entity;
}
return new Promise((resolve, reject) => {
// Fetch content repository by requested contentId
makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
.then(function (data) {
let item = data[request.media.contentId];
if(!item) {
// Content could not be found in repository
castDebugLogger.error(LOG_TAG, 'Content not found');
reject();
} else {
// Adjusting request to make requested content playable
request.media.contentUrl = item.stream.dash;
request.media.contentType = 'application/dash+xml';
castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);
// Add metadata
let metadata = new cast.framework.messages.MovieMediaMetadata();
metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
metadata.title = item.title;
metadata.subtitle = item.author;
request.media.metadata = metadata;
// Resolve request
resolve(request);
}
});
});
});
हर कस्टम टैग के लिए, loggerLevelByTags
में लॉग लेवल सेट करके, यह कंट्रोल किया जा सकता है कि डीबग ओवरले पर कौनसे मैसेज दिखें. उदाहरण के लिए, लॉग लेवल cast.framework.LoggerLevel.DEBUG
वाले कस्टम टैग को चालू करने पर, गड़बड़ी, चेतावनी, जानकारी, और डीबग लॉग मैसेज के साथ जोड़े गए सभी मैसेज दिखेंगे. WARNING
लेवल वाले कस्टम टैग को चालू करने पर, सिर्फ़ गड़बड़ी दिखेगी. साथ ही, लॉग मैसेज के लिए चेतावनी भी दिखेगी.
loggerLevelByTags
कॉन्फ़िगरेशन ज़रूरी नहीं है. अगर किसी कस्टम टैग को लॉगर लेवल के लिए कॉन्फ़िगर नहीं किया गया है, तो सभी लॉग मैसेज, डीबग ओवरले पर दिखेंगे.
CORE
इवेंट लॉगर के नीचे, यह कोड जोड़ें:
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
[LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};
डीबग ओवरले
कास्ट डीबग लॉगर, कास्ट डिवाइस पर आपके कस्टम लॉग मैसेज दिखाने के लिए, रिसीवर पर एक डीबग ओवरले उपलब्ध कराता है. डीबग ओवरले को टॉगल करने के लिए showDebugLogs
का इस्तेमाल करें और ओवरले से लॉग मैसेज मिटाने के लिए clearDebugLogs
का इस्तेमाल करें.
अपने रिसीवर पर डीबग ओवरले की झलक देखने के लिए, यह कोड जोड़ें.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
// Show debug overlay
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay
castDebugLogger.clearDebugLogs();
}
});
13. बधाई हो
अब आपको कास्ट वेब रिसीवर SDK टूल का इस्तेमाल करके, पसंद के मुताबिक वेब रिसीवर ऐप्लिकेशन बनाने का तरीका पता है.
ज़्यादा जानकारी के लिए, वेब पाने वाले की डेवलपर गाइड देखें.