किसी कास् ट रिसीवर के लिए लाइव सहायता जोड़ें

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

इस कोडलैब में, आपको Cast Live Breaks API का इस्तेमाल करने वाला कस्टम वेब रिसीवर ऐप्लिकेशन बनाने का तरीका सिखाया जाएगा.

Google Cast क्या है?

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

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

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

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

इस कोडलैब को पूरा करने के बाद, आपके पास एक ऐसा Cast Receiver होगा जो Live API का इस्तेमाल करता है.

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

• कास्ट में लाइव वीडियो कॉन्टेंट को मैनेज करने का तरीका.
• कास्ट करने की सुविधा के साथ काम करने वाले अलग-अलग लाइव स्ट्रीमिंग के तरीकों को कॉन्फ़िगर करने का तरीका.
• अपनी लाइव स्ट्रीम में प्रोग्राम का डेटा जोड़ने का तरीका

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

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

अनुभव

• इसके लिए, आपको वेब डेवलपमेंट के बारे में पहले से जानकारी होनी चाहिए.
• कास्ट करने वाले और कास्ट किए जाने वाले ऐप्लिकेशन बनाने का पिछला अनुभव.

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. सामान्य लाइव स्ट्रीम कास्ट करना

इस कोडलैब को शुरू करने से पहले, लाइव डेवलपर गाइड को देख लें. इसमें लाइव एपीआई के बारे में खास जानकारी दी गई है.

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

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

शुरू करने के लिए, Chrome में Cactool खोलें. Cast SDK Developer Console में आपको दिया गया Receiver Application ID डालें और Set पर क्लिक करें.

Web Receiver Cast Application Framework (CAF) को यह निर्देश देना होगा कि चलाया जाने वाला कॉन्टेंट एक लाइवस्ट्रीम है. इसके लिए, ऐप्लिकेशन में कोड की यह लाइन जोड़कर बदलाव करें. इसे receiver.js में लोड इंटरसेप्टर के मुख्य हिस्से में जोड़ें:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

स्ट्रीम टाइप को LIVE पर सेट करने से, सीएएफ़ का लाइव यूज़र इंटरफ़ेस (यूआई) चालू हो जाता है. Web Receiver SDK, स्ट्रीम के लाइव एज पर अपने-आप चला जाएगा. लाइव प्रोग्राम गाइड का डेटा अभी नहीं जोड़ा गया है. इसलिए, स्क्रबर बार स्ट्रीम की उस पूरी अवधि को दिखाएगा जिसे आगे-पीछे किया जा सकता है.

receiver.js में किए गए बदलावों को सेव करें. इसके बाद, Cactool पर कास्ट करने की सुविधा शुरू करें. इसके लिए, कास्ट बटन पर क्लिक करें और कास्ट करने के लिए कोई डिवाइस चुनें. लाइव स्ट्रीम तुरंत शुरू हो जानी चाहिए.

6. प्रोग्राम गाइड का डेटा जोड़ना

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

CAF की मदद से, एक ही स्ट्रीम में कई प्रोग्राम के लिए मेटाडेटा सेट किया जा सकता है. MediaMetadata ऑब्जेक्ट पर, शुरू होने के टाइमस्टैंप और अवधि सेट करने पर, रिसीवर, भेजने वाले डिवाइसों पर दिखने वाले मेटाडेटा और ओवरले को अपने-आप अपडेट करता है. यह अपडेट, स्ट्रीम में प्लेयर की मौजूदा जगह के हिसाब से होता है. यहां एपीआई और उनके सामान्य इस्तेमाल का एक सैंपल दिया गया है.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

इस कोडलैब के लिए, हम मेटाडेटा सेवा के एक सैंपल का इस्तेमाल करेंगे, ताकि अपनी लाइव स्ट्रीम के लिए मेटाडेटा उपलब्ध कराया जा सके. प्रोग्राम के मेटाडेटा की लिस्टिंग बनाने के लिए, एक कंटेनर बनाएं. ContainerMetadata में, किसी एक मीडिया स्ट्रीम के लिए MediaMetadata ऑब्जेक्ट की सूची होती है. हर MediaMetadata ऑब्जेक्ट, कंटेनर में मौजूद किसी एक सेक्शन के बारे में बताता है. जब प्लेहेड किसी सेक्शन की सीमा में होता है, तो उसका मेटाडेटा मीडिया स्टेटस में अपने-आप कॉपी हो जाता है. हमारी सेवा से सैंपल मेटाडेटा डाउनलोड करने और CAF को कंटेनर देने के लिए, receiver.js फ़ाइल में यह कोड जोड़ें.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

इसके अलावा, लोड इंटरसेप्टर में गाइड का डेटा लोड करने के लिए, फ़ंक्शन में कॉल जोड़ें:

loadGuideData();

receiver.js फ़ाइल सेव करें और कास्ट सेशन शुरू करें. आपको स्क्रीन पर प्रोग्राम के शुरू और खत्म होने का समय और टाइटल दिखना चाहिए.

जब कंटेनर में प्लेहेड किसी नए सेक्शन पर जाता है, तो रिसीवर, मीडिया की स्थिति के बारे में बताने वाला नया मैसेज, कॉन्टेंट भेजने वाले सभी ऐप्लिकेशन को भेजता है. इससे, कॉन्टेंट भेजने वाले ऐप्लिकेशन अपने यूज़र इंटरफ़ेस (यूआई) को अपडेट कर पाते हैं. हमारा सुझाव है कि रिसीवर ऐप्लिकेशन, मीडिया स्टेटस इंटरसेप्टर में कंटेनर मेटाडेटा को अपडेट करें. इससे, वे सेंडर ऐप्लिकेशन को प्रोग्राम की जानकारी देते रहेंगे. हमारी सैंपल सेवा में, हम मौजूदा प्रोग्राम के मेटाडेटा के साथ-साथ अगले दो प्रोग्राम का मेटाडेटा भी दिखाते हैं. किसी स्ट्रीम के मेटाडेटा को अपडेट करने के लिए, एक नया कंटेनर बनाएं और पिछले उदाहरण की तरह setContainerMetadata को कॉल करें.

7. वीडियो में आगे/पीछे जाने की सुविधा बंद करना

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

लोड इंटरसेप्टर में, SEEK की सुविधा के साथ काम करने वाले मीडिया कमांड को हटाएं. इससे, मोबाइल सेंडर और टच इंटरफ़ेस पर वीडियो को आगे-पीछे करने की सुविधा बंद हो जाती है. receiver.js में, एसडीके इंस्टेंस वैरिएबल की परिभाषाओं के बाद यह कोड जोड़ें.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Assistant की मदद से, वीडियो को आगे-पीछे करने के लिए बोलकर दिए जाने वाले निर्देशों को बंद करने के लिए, सीक इंटरसेप्टर का इस्तेमाल किया जाना चाहिए. जैसे, Ok Google, 60 सेकंड पीछे जाओ. जब भी सीक करने का अनुरोध किया जाता है, तब इस इंटरसेप्टर को कॉल किया जाता है. अगर SEEK के साथ काम करने वाली मीडिया कमांड बंद है, तो इंटरसेप्टर, SEEK करने के अनुरोध को अस्वीकार कर देगा. receiver.js फ़ाइल में यह कोड स्निपेट जोड़ें:

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

receiver.js फ़ाइल सेव करें और कास्ट सेशन शुरू करें. अब आपको लाइव स्ट्रीम में आगे-पीछे करने का विकल्प नहीं दिखेगा.

8. बधाई हो

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

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