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

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

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

Google Cast क्या है?

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

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

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

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

इस कोडलैब को पूरा करने के बाद, आपके पास एक कास्ट पाने वाला डिवाइस होगा जो लाइव एपीआई का फ़ायदा उठा सकता है.

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

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

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

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

अनुभव

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

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

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

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

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

शुरू करने के लिए, Chrome में Cactool खोलें. Cast SDK Developer Console पर दिया गया रिसीवर ऐप्लिकेशन आईडी डालें और सेट करें पर क्लिक करें.

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

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

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

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

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

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

सीएएफ़ एक स्ट्रीम में कई प्रोग्राम के लिए मेटाडेटा सेट करने की सुविधा देता है. 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;

इस कोडलैब के लिए हम अपनी लाइव स्ट्रीम का मेटाडेटा देने के लिए, एक सैंपल मेटाडेटा सेवा का इस्तेमाल करेंगे. प्रोग्राम मेटाडेटा की सूची बनाने के लिए, एक container बनाएं. ContainerMetadata में किसी एक मीडिया स्ट्रीम के लिए MediaMetadata ऑब्जेक्ट की सूची होती है. हर MediaMetadata ऑब्जेक्ट, कंटेनर का एक सेक्शन दिखाता है. जब प्लेहेड किसी सेक्शन के दायरे में होता है, तो उसका मेटाडेटा, मीडिया स्टेटस में अपने-आप कॉपी हो जाता है. हमारी सेवा से सैंपल मेटाडेटा डाउनलोड करने और सीएएफ़ को कंटेनर देने के लिए, 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. वीडियो में आगे/पीछे जाने की सुविधा बंद की जा रही है

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

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

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

Ok Google, जैसे सहायक द्वारा बोलकर आगे बढ़ने के आदेश अक्षम करने के लिए, 60 सेकंड पीछे जाएं, सीक इंटरसेप्टर का उपयोग किया जाना चाहिए. सीक अनुरोध किए जाने पर, हर बार इस इंटरसेप्टर को कॉल किया जाता है. अगर एसईकेई के साथ काम करने वाला मीडिया निर्देश बंद है, तो इंटरसेप्टर, सीक करने के अनुरोध को अस्वीकार कर देगा. 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 रिसीवर SDK टूल का इस्तेमाल करके, पसंद के मुताबिक रिसीवर ऐप्लिकेशन बनाने का तरीका पता है.

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