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

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

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

Google Cast क्या है?

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

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

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

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

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

आप इन चीज़ों के बारे में जानेंगे

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

आपको इनकी ज़रूरत होगी

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

अनुभव

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

> क्या आपको नेटवर्किंग में समस्याएं आ रही हैं? > अगर आप किसी ऐसे स्थान पर हैं जहां WiFi नेटवर्क विश्वसनीय नहीं है, तो Chromecast डिवाइस को

Chromecast या Chromecast with Google TV के लिए.

आपको इस ट्यूटोरियल का इस्तेमाल कैसे करना है?

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

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

नई इंटरमीडिएट कुशल

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

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

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

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

> Cast-videos-cast कोडलैब रिपॉज़िटरी में दो सैंपल प्रोजेक्ट होते हैं: > * ऐप्लिकेशन-स्टार्ट—इस कोडलैब में बनाया जाने वाला शुरुआती कोड. * ऐप्लिकेशन-हो गया—तैयार हो चुके वीडियो ऐप्लिकेशन के सैंपल के लिए पूरा कोड.

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

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

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

सर्वर चलाएं

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

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

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

> क्या आपके पास Cast डेवलपर खाता नहीं है? > Google Cast SDK डेवलपर कंसोल पर किसी खाते के लिए साइन अप करें और रजिस्ट्रेशन शुल्क दें.

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

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

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

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

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

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

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

अपने कास्ट डिवाइस के पीछे प्रिंट किया गया सीरियल नंबर डालें और उसे कोई जानकारी देने वाला नाम दें. Google Cast SDK डेवलपर कंसोल को ऐक्सेस करते समय, 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 पर सेट करने से, CAF का लाइव यूज़र इंटरफ़ेस (यूआई) चालू हो जाता है. वेब रिसीवर का 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. वीडियो में आगे/पीछे जाने की सुविधा बंद की जा रही है

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

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

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

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

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

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

> क्या आपको और कास्ट करने हैं? > अन्य कास्ट कोडलैब और GitHub पर सैंपल ऐप्लिकेशन देखें.