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

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

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

Google Cast क्या है?

Google Cast, उपयोगकर्ताओं को मोबाइल डिवाइस से टीवी पर कॉन्टेंट कास्ट करने की सुविधा देता है. इसके बाद, उपयोगकर्ता अपने मोबाइल डिवाइस या डेस्कटॉप के Chrome ब्राउज़र को, टीवी पर मीडिया चलाने के लिए रिमोट कंट्रोल के तौर पर इस्तेमाल कर सकते हैं.

Google Cast SDK टूल की मदद से, आपका ऐप्लिकेशन Google Cast की सुविधा वाले डिवाइसों (जैसे, टीवी या साउंड सिस्टम) को कंट्रोल कर सकता है. Cast SDK से आपको Google Cast डिज़ाइन चेकलिस्ट के आधार पर, यूज़र इंटरफ़ेस (यूआई) के ज़रूरी कॉम्पोनेंट मिलते हैं.

Google Cast डिज़ाइन चेकलिस्ट को सभी समर्थित प्लेटफ़ॉर्म पर Cast उपयोगकर्ता अनुभव को आसान और अनुमानित बनाने के लिए प्रदान किया जाता है. ज़्यादा जानकारी के लिए यहां जाएं.

हम क्या बनाने जा रहे हैं?

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

आपको क्या सीखने को मिलेगा

• रिसीवर डेवलपमेंट के लिए सेट अप कैसे करें.
• Cast ऐप्लिकेशन फ़्रेमवर्क पर आधारित, Cast की सुविधा वाले रिसीवर की बुनियादी बातें.
• कास्ट किया गया वीडियो पाने का तरीका.
• डीबग लॉगर को इंटिग्रेट करने का तरीका.
• रिसीवर को स्मार्ट डिसप्ले के हिसाब से ऑप्टिमाइज़ करने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

• नया Google Chrome ब्राउज़र.
• एचटीटीपीएस होस्टिंग सेवा, जैसे कि Firebase होस्टिंग या ngrok.
• इंटरनेट ऐक्सेस के साथ कॉन्फ़िगर किया गया Chromecast या Android TV जैसा कोई Google Cast डिवाइस.
• एचडीएमआई इनपुट वाला टीवी या मॉनिटर.

अनुभव

• इसके लिए, आपके पास वेब डेवलपमेंट की पिछली जानकारी होनी चाहिए.
• इसके अलावा, टीवी देखने के बारे में आपकी पिछली जानकारी भी होनी चाहिए :)

2. सैंपल कोड पाएं

आप सभी नमूना कोड अपने कंप्यूटर पर डाउनलोड कर सकते हैं...

file_downloadसोर्स डाउनलोड करें

और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.

3. रिसीवर को स्थानीय तौर पर डिप्लॉय करें

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

अगर आपके पास इस्तेमाल करने के लिए कोई सर्वर नहीं है, तो Firebase होस्टिंग या ngrok का इस्तेमाल करें.

सर्वर चलाएं

अपनी पसंद की सेवा को सेट अप करने के बाद, app-start पर जाएं और अपना सर्वर चालू करें.

अपने होस्ट किए गए रिसीवर के यूआरएल को नोट कर लें. इसका इस्तेमाल अगले सेक्शन में किया जाएगा.

4. Cast Developer Console में कोई ऐप्लिकेशन रजिस्टर करना

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

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

"कस्टम प्राप्तकर्ता" चुनें, हम यही बना रहे हैं.

पैसे पाने वाले नए व्यक्ति की जानकारी डालें. साथ ही, उसी यूआरएल का इस्तेमाल करें जिससे आपने सदस्यता ली है

क्लिक करें. ऐप्लिकेशन पाने वाले नए व्यक्ति को असाइन किए गए ऐप्लिकेशन आईडी को नोट कर लें.

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

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

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

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

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

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

अपने ब्राउज़र में, Command and Control (CaC) टूल खोलें.

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

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

5. "कॉन्टेंट के हिसाब से लोड करें" पर क्लिक करें सैंपल वीडियो चलाने के लिए बटन.
6. आपके Google Cast डिवाइस पर वीडियो चलने लगेगा. इससे यह पता चलेगा कि डिफ़ॉल्ट रिसीवर का इस्तेमाल करने पर, रिसीवर की बुनियादी सुविधाएं कैसी दिखती हैं.

6. शुरुआती प्रोजेक्ट तैयार करना

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

• भेजने वाले का ऐप्लिकेशन मोबाइल डिवाइस या लैपटॉप पर चलता है,
• Google Cast डिवाइस पर रिसीवर ऐप्लिकेशन चलता है.

अब आप अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, शुरुआती प्रोजेक्ट को पूरा करने के लिए तैयार हैं:

1. सैंपल कोड डाउनलोड करके, app-start डायरेक्ट्री को चुनें.
2. js/receiver.js और index.html खोलें

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

ऐप्लिकेशन डिज़ाइन

रिसीवर ऐप्लिकेशन, कास्ट सेशन को शुरू कर देता है. यह तब तक काम नहीं करता, जब तक कि ईमेल भेजने वाले व्यक्ति का लोड होने का अनुरोध (दूसरे शब्दों में, मीडिया के किसी हिस्से को चलाने का निर्देश) नहीं मिल जाता.

ऐप्लिकेशन का एक मुख्य व्यू होता है. इसे index.html में तय किया जाता है. साथ ही, js/receiver.js नाम की एक JavaScript फ़ाइल होती है, जिसमें सभी लॉजिक होते हैं जिनकी मदद से ऐप्लिकेशन काम कर सकता है.

index.html

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

receiver.js

यह स्क्रिप्ट हमारे रिसीवर ऐप्लिकेशन के लिए सभी लॉजिक को मैनेज करेगी. अभी यह एक खाली फ़ाइल है, लेकिन हम इसे अगले सेक्शन में बस कुछ लाइनों के कोड से पूरी तरह से काम करने वाले Cast रिसीवर में बदलने जा रहे हैं.

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 टूल का इस्तेमाल करके अपने नए रिसीवर को आज़माएं.

अपने वेब ब्राउज़र को Command and Control (CaC) टूल पर ले जाएं.

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

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

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

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

इस पहली बुनियादी कोशिश में, हम MediaInfo में, चलाने लायक ऐसेट के यूआरएल (MediaInfo.contentUrl में सेव) की जानकारी डालने वाले हैं.

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

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

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

इस तरह, रिसीवर का SDK टूल हर तरह की सुविधा के साथ हैंडल करता है:

• कास्ट सेशन शुरू किया जा रहा है
• पैसे भेजने वाले उन लोगों से आने वाले LOAD अनुरोधों को मैनेज करें जिनमें गेम खेलने वाली ऐसेट मौजूद हैं
• बड़ी स्क्रीन पर दिखने के लिए, बेसिक प्लेयर का यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराएं.

अगले सेक्शन पर जाने से पहले, CAC टूल और उसके कोड को बिना किसी शुल्क के एक्सप्लोर करें. यहां हम पैसे पाने वाले व्यक्ति के बारे में जानकारी देंगे, ताकि आपको ईमेल पाने वाले लोगों से मिलने वाले LOAD के अनुरोधों को पूरा करने के लिए, आसान सैंपल एपीआई के बारे में बताया जा सके.

9. बाहरी एपीआई के साथ इंटिग्रेट करना

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

ऐप्लिकेशन आम तौर पर ऐसा इसलिए करते हैं, क्योंकि:

• मैसेज भेजने वाले व्यक्ति को शायद कॉन्टेंट का यूआरएल न पता हो.
• Cast ऐप्लिकेशन को इस तरह से डिज़ाइन किया गया है कि पुष्टि करने, कारोबार के अन्य तरीके या एपीआई कॉल सीधे पाने वाले पर हैंडल किए जा सकें.

इस सुविधा को मुख्य रूप से PlayerManager setMessageInterceptor() तरीके में लागू किया जाता है. इसकी मदद से, आने वाले मैसेज टाइप किए जा सकते हैं. साथ ही, SDK टूल के इंटरनल मैसेज हैंडलर तक पहुंचने से पहले ही उनमें बदलाव किया जा सकता है. इस सेक्शन में, हम LOAD अनुरोधों पर काम कर रहे हैं. इसके तहत, हम ये काम करेंगे:

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

एपीआई के सैंपल के तौर पर, SDK टूल कुछ खास सुविधाएं भी देता है. इससे, वे काम कर सकते हैं जिनके लिए आम तौर पर रिलीज़ होने वाले टास्क को पूरा करना होता है. साथ ही, यह भी बताया गया है कि वे सामान्य से अलग तरह के टास्क कर पाते हैं.

एपीआई का नमूना

अपने ब्राउज़र को https://storage.googleapis.com/cpe-sample-media/content.json पर ले जाएं और हमारे सैंपल वीडियो कैटलॉग पर नज़र डालें. कॉन्टेंट में पोस्टर इमेज के यूआरएल, पीएनजी फ़ॉर्मैट के साथ-साथ डैश और एचएलएस स्ट्रीम दोनों फ़ॉर्मैट में होने चाहिए. 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 कॉन्टेंट का इस्तेमाल करना

अब जब हमने लोड इंटरसेप्टर तैयार कर लिया है, तो हम कॉन्टेंट पाने वाले को कॉन्टेंट का टाइप बताएंगे. यह जानकारी पाने वाले व्यक्ति को मास्टर प्लेलिस्ट का यूआरएल और स्ट्रीम के एमआईएमई टाइप का पता चलेगा. 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';
            ...
          }
        });
      });
    });

यह चरण पूरा करने के बाद, DASH कॉन्टेंट के साथ लोड करने के लिए, इसकी टेस्टिंग करें. अगर आपको एचएलएस कॉन्टेंट के साथ लोड होने की जांच करनी है, तो अगले चरण पर जाएं.

सैंपल एपीआई एचएलएस कॉन्टेंट का इस्तेमाल करना

एपीआई के सैंपल में एचएलएस कॉन्टेंट के साथ-साथ डैश शामिल है. पिछले चरण की तरह हमने contentType को सेट किया था. इसके अलावा, सैंपल एपीआई के एचएलएस यूआरएल का इस्तेमाल करने के लिए, लोड करने के अनुरोध में कुछ और प्रॉपर्टी की ज़रूरत होगी. अगर कॉन्टेंट पाने वाले व्यक्ति को एचएलएस स्ट्रीम चलाने के लिए कॉन्फ़िगर किया जाता है, तो डिफ़ॉल्ट तौर पर कंटेनर का टाइप ट्रांसपोर्ट स्ट्रीम (TS) होता है. इसलिए, अगर सिर्फ़ contentUrl प्रॉपर्टी में बदलाव किया गया है, तो डेटा पाने वाला व्यक्ति, MP4 स्ट्रीम के सैंपल को TS फ़ॉर्मैट में खोलने की कोशिश करेगा. डेटा लोड करने के अनुरोध में, 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;
            ...
          }
        });
      });
    });

इसका परीक्षण करना

फिर से, Command and Control (CaC) टूल खोलें और ऐप्लिकेशन आईडी को पाने वाले के ऐप्लिकेशन आईडी पर सेट करें. कास्ट करें बटन का इस्तेमाल करके अपना डिवाइस चुनें.

"मीडिया लोड करें" पर जाएं करें. इस बार "कॉन्टेंट यूआरएल" में मौजूद टेक्स्ट को मिटाएं "कॉन्टेंट के हिसाब से लोड करें" के बगल में मौजूद फ़ील्ड बटन, जो हमारे ऐप्लिकेशन को हमारे मीडिया के लिए केवल 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> का इस्तेमाल नहीं किया जाता है एलिमेंट के लिए, आपको touchScreenOptimizedApp को CastReceiverOptions में सेट करना होगा. इस कोडलैब में, हम <cast-media-player> का इस्तेमाल कर रहे हैं एलिमेंट.

context.start({ touchScreenOptimizedApp: true });

MetadataType और MediaStatus.supportedMediaCommands के आधार पर, हर स्लॉट के लिए डिफ़ॉल्ट कंट्रोल बटन असाइन किए गए हैं.

वीडियो के कंट्रोल

MetadataType.MOVIE, MetadataType.TV_SHOW, और MetadataType.GENERIC के लिए, स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट, नीचे दिए गए उदाहरण की तरह दिखेगा.

1. --playback-logo-image
2. MediaMetadata.subtitle
3. MediaMetadata.title
4. MediaStatus.currentTime
5. MediaInformation.duration
6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
8. PLAY/PAUSE
9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

ऑडियो कंट्रोल

MetadataType.MUSIC_TRACK के लिए, स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट इस तरह दिखेगा:

1. --playback-logo-image
2. MusicTrackMediaMetadata.albumName
3. MusicTrackMediaMetadata.title
4. MusicTrackMediaMetadata.albumArtist
5. MusicTrackMediaMetadata.images[0]
6. MediaStatus.currentTime
7. MediaInformation.duration
8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
10. PLAY/PAUSE
11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

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

यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट, यह भी तय करता है कि MediaStatus.supportedMediaCommands के आधार पर ControlsButton दिखाया जाएगा या नहीं.

जब supportedMediaCommands की वैल्यू ALL_BASIC_MEDIA के बराबर होती है, तो डिफ़ॉल्ट कंट्रोल लेआउट इस तरह दिखेगा:

जब supportedMediaCommands की वैल्यू ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT के बराबर होती है, तो डिफ़ॉल्ट कंट्रोल लेआउट इस तरह दिखेगा:

जब SupportMediaCommands की वैल्यू 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. स्मार्ट डिसप्ले पर मीडिया ब्राउज़ करने की सुविधा लागू की जा रही है

मीडिया ब्राउज़, एक सीएएफ़ रिसीवर सुविधा है, जो उपयोगकर्ताओं को टच डिवाइसों पर अतिरिक्त कॉन्टेंट एक्सप्लोर करने की सुविधा देती है. इसे लागू करने के लिए आपको PlayerDataBinder का इस्तेमाल करके, BrowseContent यूज़र इंटरफ़ेस (यूआई) सेट करना होगा. इसके बाद, आपको जो कॉन्टेंट दिखाना है उसके हिसाब से, उसमें BrowseItems का डेटा डाला जा सकता है.

BrowseContent

यहां BrowseContent यूज़र इंटरफ़ेस (यूआई) और इसकी प्रॉपर्टी का उदाहरण दिया गया है:

1. BrowseContent.title
2. BrowseContent.items

आसपेक्ट रेशियो

अपनी इमेज ऐसेट का सबसे सही आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) चुनने के लिए, targetAspectRatio property का इस्तेमाल करें. CAF रिसीवर SDK टूल पर तीन आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) काम करते हैं: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

हर आइटम का शीर्षक, सबटाइटल, अवधि, और इमेज दिखाने के लिए BrowseItem का इस्तेमाल करें:

1. BrowseItem.image
2. BrowseItem.duration
3. BrowseItem.title
4. BrowseItem.subtitle

मीडिया ब्राउज़ करें डेटा सेट करें

setBrowseContent पर कॉल करके, ब्राउज़ करने के लिए मीडिया कॉन्टेंट की सूची दी जा सकती है. नीचे दिए गए कोड को अपनी js/receiver.js फ़ाइल में अपने playerDataBinder के नीचे और अपने MEDIA_CHANGED इवेंट लिसनर में जोड़कर, "अगला वीडियो" के टाइटल के साथ ब्राउज़ आइटम सेट करें.

// 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 और साथी Command and Control (CaC) टूल का इस्तेमाल करके, ऐप्लिकेशन को आसानी से डीबग कर सकते हैं.

डेटा लेयर में इवेंट बनाने की प्रोसेस

एपीआई को शामिल करने के लिए, अपनी index.html फ़ाइल में CastDebugLogger सोर्स स्क्रिप्ट जोड़ें. सोर्स का एलान <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
}

मैसेज और कस्टम टैग को लॉग करें

Cast डीबगLogger 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,
};

ओवरले डीबग करें

Cast डीबग करने वाला, कॉन्टेंट पाने वाले व्यक्ति पर एक डीबग ओवरले उपलब्ध कराता है, ताकि कास्ट डिवाइस पर आपके कस्टम लॉग मैसेज दिखाए जा सकें. डीबग ओवरले को टॉगल करने के लिए 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. बधाई हो

अब आपको Cast वेब रिसीवर SDK टूल का इस्तेमाल करके, पसंद के मुताबिक वेब रिसीवर ऐप्लिकेशन बनाने का तरीका पता चल गया है.

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