इस पेज का अनुवाद Cloud Translation API से किया गया है.

कस्टम वेब रिसीवर बनाएं

1. खास जानकारी

Google Cast का लोगो

यह कोडलैब आपको कास्ट की सुविधा वाले डिवाइसों पर कॉन्टेंट चलाने के लिए, कस्टम वेब रिसीवर ऐप्लिकेशन बनाने का तरीका बताएगा.

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 SDK डेवलपर कंसोल की इमेज, जिसमें 'नया ऐप्लिकेशन जोड़ें' बटन को हाइलाइट किया गया है

"नया ऐप्लिकेशन जोड़ें" पर क्लिक करें

'नए ऐप्लिकेशन पाने वाले का ऐप्लिकेशन' स्क्रीन की इमेज, जिसमें 'पसंद के मुताबिक पाने वाला' विकल्प हाइलाइट किया गया है

"पसंद के मुताबिक पाने वाला" चुनें. हम इसे बना रहे हैं.

'नया कस्टम रिसीवर' स्क्रीन की इमेज. इसमें एक यूआरएल दिख रहा है, जिसे कोई व्यक्ति 'पाने वाला ऐप्लिकेशन यूआरएल' फ़ील्ड में टाइप कर रहा है

कॉन्टेंट पाने वाले नए व्यक्ति की जानकारी डालें. पक्का करें कि आपने उसी यूआरएल का इस्तेमाल किया हो जिसे आपने ऐक्सेस किया था

आखिरी सेक्शन में देखें. जिस नए व्यक्ति ने आपका ऐप्लिकेशन पाने वाले व्यक्ति को असाइन किया है वह ऐप्लिकेशन आईडी नोट कर लें.

आपको अपने Google Cast डिवाइस को भी रजिस्टर करना होगा, ताकि इसे पब्लिश करने से पहले ही वह आपके रिसीवर ऐप्लिकेशन को ऐक्सेस कर सके. रिसीवर ऐप्लिकेशन को पब्लिश करने के बाद, यह Google Cast की सुविधा वाले सभी डिवाइसों पर उपलब्ध होगा. इस कोडलैब के लिए, हमारा सुझाव है कि रिसीवर के ऐसे ऐप्लिकेशन के साथ काम करें जिसे अभी तक पब्लिश नहीं किया गया है.

Google Cast SDK डेवलपर कंसोल की इमेज, जिसमें 'नया डिवाइस जोड़ें' बटन को हाइलाइट किया गया है

"नया डिवाइस जोड़ें" पर क्लिक करें

'कास्ट रिसीवर डिवाइस जोड़ें' डायलॉग की इमेज

अपने कास्ट डिवाइस के पीछे प्रिंट किया गया सीरियल नंबर डालें और उसे कोई जानकारी देने वाला नाम दें. Google Cast SDK डेवलपर कंसोल को ऐक्सेस करते समय, Chrome में अपनी स्क्रीन को कास्ट करके भी अपना सीरियल नंबर मिल सकता है

आपके रिसीवर और डिवाइस को टेस्ट के लिए तैयार होने में 5-15 मिनट लगेंगे. 5 से 15 मिनट इंतज़ार करने के बाद, आपको अपना कास्ट डिवाइस फिर से चालू करना होगा.

5. सैंपल ऐप्लिकेशन चलाएं

Google Chrome का लोगो

रिसीवर के लिए नया ऐप्लिकेशन टेस्ट के लिए तैयार होने तक, आइए देखते हैं कि पूरा किया जा चुका, रिसीवर ऐप्लिकेशन कैसा दिखता है. हम जो रिसीवर बनाएंगे वह अडैप्टिव बिटरेट स्ट्रीमिंग का इस्तेमाल करके मीडिया चला पाएगा. हम डाइनैमिक अडैप्टिव स्ट्रीमिंग ओवर एचटीटीपी (डीएएसएच) के लिए, कोड में बदले गए सैंपल कॉन्टेंट का इस्तेमाल करेंगे.

अपने ब्राउज़र में, कमांड और कंट्रोल (सीएसी) टूल खोलें.

कमांड और कंट्रोल (CaC) टूल के 'कास्ट कनेक्ट और लॉगर कंट्रोल' टैब की इमेज

आपको हमारा सीएसी टूल दिखेगा.
पाने वाले के डिफ़ॉल्ट आईडी "CC1AD845" के डिफ़ॉल्ट आईडी का इस्तेमाल करें और "ऐप्लिकेशन आईडी सेट करें" बटन पर क्लिक करें.
सबसे ऊपर बाईं ओर मौजूद, कास्ट करें बटन पर क्लिक करें और अपना Google Cast डिवाइस चुनें.

कमांड और कंट्रोल (CaC) टूल के 'कास्ट कनेक्ट और लॉगर कंट्रोल' टैब की इमेज. इससे पता चलता है कि इस डिवाइस को रिसीवर ऐप्लिकेशन से कनेक्ट किया गया है

सबसे ऊपर "मीडिया लोड करें" टैब पर जाएं.

कमांड और कंट्रोल (CaC) टूल के 'मीडिया लोड करें' टैब की इमेज

सैंपल वीडियो चलाने के लिए, "कॉन्टेंट के हिसाब से लोड करें" बटन पर क्लिक करें.
वीडियो आपके 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) टूल पर ले जाएं.

कमांड और कंट्रोल (CaC) टूल के 'कास्ट कनेक्ट और लॉगर कंट्रोल' टैब की इमेज

पक्का करें कि आपका ऐप्लिकेशन आईडी, फ़ील्ड में पहले रजिस्टर किया गया हो और "ऐप्लिकेशन आईडी सेट करें" पर क्लिक करें. इससे, कास्ट सेशन शुरू करते समय, टूल को रिसीवर का इस्तेमाल करने का निर्देश मिलता है.

मीडिया कास्ट किया जा रहा है

हाई लेवल पर, किसी कास्ट डिवाइस पर मीडिया चलाने के लिए ये चीज़ें होनी चाहिए:

भेजने वाला, Cast SDK टूल से MediaInfo JSON ऑब्जेक्ट बनाता है, जो मीडिया आइटम को मॉडल करता है.
रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए, भेजने वाला डिवाइस, कास्ट डिवाइस से कनेक्ट होता है.
कॉन्टेंट चलाने के लिए, रिसीवर LOAD अनुरोध के ज़रिए MediaInfo ऑब्जेक्ट को लोड करता है.
रिसीवर, मीडिया की स्थिति को मॉनिटर और ट्रैक करता है.
भेजने वाला व्यक्ति, भेजने वाले ऐप्लिकेशन के साथ उपयोगकर्ता के इंटरैक्शन के हिसाब से, प्लेबैक कंट्रोल करने के लिए रिसीवर को वीडियो चलाने के निर्देश भेजता है.

पहली बार कोशिश करने पर, हम MediaInfo में संगीत चलाने लायक एसेट का यूआरएल डालने वाले हैं. यह यूआरएल MediaInfo.contentUrl में सेव होगा.

असल में भेजने वाला व्यक्ति, MediaInfo.contentId में ऐप्लिकेशन के लिए खास तौर पर बने मीडिया आइडेंटिफ़ायर का इस्तेमाल करता है. सही बैकएंड एपीआई कॉल करने के लिए, रिसीवर contentId को आइडेंटिफ़ायर के तौर पर इस्तेमाल करता है. इससे असल एसेट यूआरएल को MediaInfo.contentUrl. पर सेट किया जाता है. साथ ही, रिसीवर डीआरएम लाइसेंस हासिल करने या विज्ञापन के लिए ब्रेक की जानकारी इंजेक्ट करने जैसे टास्क भी हैंडल करेगा.

हम अगले सेक्शन में, कुछ ऐसा करने के लिए आपके रिसीवर का दायरा बढ़ाएंगे. फ़िलहाल, 'कास्ट करें' आइकॉन पर क्लिक करें और रिसीवर खोलने के लिए अपना डिवाइस चुनें.

"मीडिया लोड करें" टैब पर नेविगेट करें और "कॉन्टेंट के हिसाब से लोड करें' बटन पर क्लिक करें. आपका रिसीवर, सैंपल कॉन्टेंट चलाना शुरू कर देगा.

कमांड और कंट्रोल (CaC) टूल के 'मीडिया लोड करें' टैब की इमेज

इसलिए, पाने वाले के 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 अनुरोध भेजेगा.

कमांड और कंट्रोल (CaC) टूल के 'मीडिया लोड करें' टैब की इमेज

यह मानते हुए कि रिसीवर में आपके बदलावों के साथ सब कुछ ठीक से काम किया गया है, इंटरसेप्टर को 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 टूल का इस्तेमाल करके, पसंद के मुताबिक वेब रिसीवर ऐप्लिकेशन बनाने का तरीका पता है.

ज़्यादा जानकारी के लिए, वेब पाने वाले की डेवलपर गाइड देखें.