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

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

Google Cast का लोगो

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

Google Cast क्या है?

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

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

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

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

इस कोडलैब को पूरा करने के बाद, आपके पास Live API का फ़ायदा लेने वाला Cast Receiver बन जाएगा.

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

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

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

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

अनुभव

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

इस ट्यूटोरियल का इस्तेमाल कैसे किया जाएगा?

इसे सिर्फ़ पढ़ें इसे पढ़ें और कसरतों को पूरा करें

वेब ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

नौसिखिया मध्यम प्रवीण

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

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

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

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

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

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

सर्वर चलाना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. सामान्य लाइव स्ट्रीम को कास्ट करना

वीडियो चला रहे Android फ़ोन की इमेज. इसमें वीडियो प्लेयर के कंट्रोल के सेट के ठीक ऊपर, 'लिविंग रूम पर कास्ट किया जा रहा है' मैसेज दिख रहा हैउसी वीडियो को फ़ुल-साइज़ स्क्रीन पर चलाने की इमेज

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

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

रिसीवर में तीन फ़ाइलें होती हैं. receiver.html नाम की एक बुनियादी 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. प्रोग्राम गाइड का डेटा जोड़ना

लाइव कॉन्टेंट के लिए 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 में SDK टूल के इंस्टेंस वैरिएबल की परिभाषाओं के बाद, यह कोड जोड़ें.

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

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

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