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

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

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

Google Cast क्या है?

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

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

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

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

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

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

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

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

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

अनुभव

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

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

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

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

इसके बाद, डाउनलोड की गई zip फ़ाइल को अनपैक करें.

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

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

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

सर्वर चलाना

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

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

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

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

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

"कस्टम रिसीवर" चुनें. हम यही बना रहे हैं.

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

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

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

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

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

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

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

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

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

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. कास्ट किए जाने वाले डिवाइस का बेसिक सेटअप

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

शुरू करना

हेडर में मौजूद index.html में यह कोड जोड़ें:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

नीचे दिए गए कोड को index.html <body> में <footer> loading receiver.js, से पहले जोड़ें. इससे, रिसीवर SDK टूल को डिफ़ॉल्ट रिसीवर यूज़र इंटरफ़ेस (यूआई) को चालू करने के लिए जगह मिल जाएगी. यह यूज़र इंटरफ़ेस (यूआई), अभी-अभी जोड़ी गई स्क्रिप्ट के साथ शिप किया जा रहा है.

<cast-media-player></cast-media-player>

अब हमें js/receiver.js में एसडीके को शुरू करना होगा. इसमें ये शामिल हैं:

• CastReceiverContext का रेफ़रंस पाना, जो पूरे Receiver SDK टूल के लिए आपका मुख्य एंट्री पॉइंट है
• PlayerManager का रेफ़रंस सेव करना. यह ऑब्जेक्ट, वीडियो चलाने की सुविधा को मैनेज करता है. साथ ही, आपको वे सभी हुक उपलब्ध कराता है जिनकी मदद से, अपने कस्टम लॉजिक को प्लग-इन किया जा सकता है
• CastReceiverContext पर start() को कॉल करके एसडीके टूल को शुरू करना

js/receiver.js में यह जोड़ें.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. "बेसिक" वीडियो कॉन्टेंट कास्ट करना

इस कोडलैब के लिए, CaC टूल का इस्तेमाल करके अपने नए रिसीवर को आज़माएं.

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

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

मीडिया कास्ट करना

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

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

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

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

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

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

इसलिए, Receiver SDK टूल इन कामों को अपने-आप करता है:

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

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

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

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

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

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

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

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

दिए गए एपीआई के सैंपल में, 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 अनुरोध के साथ कॉल किया जाएगा.

LOAD अनुरोध को इंटरसेप्ट करना

इस चरण में, हम एक लोड इंटरसेप्टर बनाएंगे. इसमें एक ऐसा फ़ंक्शन होगा जो होस्ट की गई JSON फ़ाइल के लिए, XHR अनुरोध करता है. JSON फ़ाइल मिलने के बाद, हम कॉन्टेंट को पार्स करेंगे और मेटाडेटा सेट करेंगे. नीचे दिए गए सेक्शन में, हम कॉन्टेंट टाइप तय करने के लिए MediaInformation पैरामीटर को पसंद के मुताबिक बनाएंगे.

अपनी js/receiver.js फ़ाइल में, context.start() को कॉल करने से ठीक पहले यह कोड जोड़ें.

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 प्रॉपर्टी को कॉन्फ़िगर करने का तरीका बताया जाएगा.

Sample API DASH Content का इस्तेमाल करना

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

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

Sample API HLS Content का इस्तेमाल करना

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

इसे आज़माना

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

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

मान लें कि रिसीवर में किए गए बदलावों से सब कुछ ठीक से काम कर रहा है. ऐसे में, इंटरसेप्टर को MediaInfo ऑब्जेक्ट को इस तरह से बदलना चाहिए कि एसडीके उसे स्क्रीन पर चला सके.

"कॉन्टेंट के हिसाब से लोड करें" बटन पर क्लिक करके देखें कि आपका मीडिया ठीक से चल रहा है या नहीं. content.json फ़ाइल में जाकर, Content ID को किसी दूसरे आईडी में बदला जा सकता है.

10. स्मार्ट डिसप्ले के लिए ऑप्टिमाइज़ करना

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

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

यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऐक्सेस करना

स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट को cast.framework.ui.Controls.GetInstance() का इस्तेमाल करके ऐक्सेस किया जा सकता है. अपनी js/receiver.js फ़ाइल में, context.start() के ऊपर यह कोड जोड़ें:

...

// 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 के लिए, स्मार्ट डिसप्ले के लिए यूज़र इंटरफ़ेस (यूआई) कंट्रोल ऑब्जेक्ट, यहां दिए गए उदाहरण की तरह दिखेगा.

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 के बराबर होने पर, कंट्रोल का डिफ़ॉल्ट लेआउट इस तरह दिखेगा:

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

टेक्स्ट ट्रैक उपलब्ध होने पर, सबटाइटल बटन हमेशा SLOT_1 पर दिखेगा.

रिसीवर कॉन्टेक्स्ट शुरू करने के बाद, supportedMediaCommands की वैल्यू को डाइनैमिक तरीके से बदलने के लिए, वैल्यू को बदलने के लिए PlayerManager.setSupportedMediaCommands को कॉल किया जा सकता है. इसके अलावा, addSupportedMediaCommands का इस्तेमाल करके कोई नई कमांड जोड़ी जा सकती है या removeSupportedMediaCommands का इस्तेमाल करके कोई मौजूदा कमांड हटाई जा सकती है.

कंट्रोल बटन को पसंद के मुताबिक बनाना

PlayerDataBinder का इस्तेमाल करके, कंट्रोल को पसंद के मुताबिक बनाया जा सकता है. अपने कंट्रोल का पहला स्लॉट सेट करने के लिए, अपनी js/receiver.js फ़ाइल में touchControls के नीचे यह कोड जोड़ें:

...

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

BrowseContent

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

1. BrowseContent.title
2. BrowseContent.items

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

अपनी इमेज ऐसेट के लिए सबसे सही आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) चुनने के लिए, targetAspectRatio property का इस्तेमाल करें. CAF Receiver 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. रिसीवर ऐप्लिकेशन को डीबग करना

Cast Receiver SDK, डेवलपर को एक और विकल्प देता है. इसकी मदद से, डेवलपर CastDebugLogger API और कमांड और कंट्रोल (CaC) टूल का इस्तेमाल करके, आसानी से रिसीवर ऐप्लिकेशन को डीबग कर सकते हैं. साथ ही, लॉग कैप्चर कर सकते हैं.

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

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

फ़ाइल में सबसे ऊपर मौजूद js/receiver.js और playerManager के नीचे, 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 Receiver SDK से ट्रिगर होने वाले प्लेयर इवेंट को आसानी से लॉग किया जा सकता है. साथ ही, इवेंट डेटा को लॉग करने के लिए, अलग-अलग लॉगर लेवल का इस्तेमाल किया जा सकता है. loggerLevelByEvents कॉन्फ़िगरेशन, cast.framework.events.EventType और cast.framework.events.category का इस्तेमाल करके यह तय करता है कि किन इवेंट को लॉग किया जाएगा.

जब कोई प्लेयर CORE इवेंट ट्रिगर होता है या mediaStatus में बदलाव ब्रॉडकास्ट किया जाता है, तब लॉग करने के लिए, castDebugLogger डिक्लेरेशन के नीचे यह कोड जोड़ें:

// 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,
};

डीबग ओवरले

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

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