वेब ऐप्लिकेशन को कास्ट करने की सुविधा चालू करना

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

Google Cast का लोगो

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

Google Cast क्या है?

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

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

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

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

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

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

  • सैंपल वीडियो ऐप्लिकेशन में Google Cast SDK टूल जोड़ने का तरीका.
  • Google Cast डिवाइस चुनने के लिए, कास्ट बटन जोड़ने का तरीका.
  • किसी कास्ट डिवाइस से कनेक्ट करने और मीडिया रिसीवर को लॉन्च करने का तरीका.
  • वीडियो कास्ट करने का तरीका.
  • Cast Connect को इंटिग्रेट करने का तरीका

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

  • नया Google Chrome ब्राउज़र.
  • एचटीटीपीएस होस्टिंग सेवा, जैसे कि Firebase होस्टिंग या ngrok.
  • Google Cast की सुविधा वाला कोई डिवाइस, जैसे कि Chromecast या Android TV, जिसे इंटरनेट से कनेक्ट किया गया हो.
  • एचडीएमआई इनपुट वाला टीवी या मॉनिटर.
  • Cast Connect इंटिग्रेशन की जांच करने के लिए, Chromecast with Google TV की ज़रूरत होती है. हालांकि, बाकी Codelab के लिए यह ज़रूरी नहीं है. अगर आपके पास कोई खाता नहीं है, तो इस ट्यूटोरियल के आखिर में मौजूद Cast Connect सहायता जोड़ें चरण को छोड़ दें.

अनुभव

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

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

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

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

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

टीवी देखने के अनुभव को क्या रेटिंग दी जा सकती है?

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

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

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

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

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

Google Chrome का लोगो

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

प्रोजेक्ट को होस्ट करने के बाद ही उसका इस्तेमाल किया जा सकता है.

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

सर्वर चलाना

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

अपने ब्राउज़र में, होस्ट किए गए सैंपल के https यूआरएल पर जाएं.

  1. आपको वीडियो ऐप्लिकेशन दिखेगा.
  2. कास्ट करें बटन पर क्लिक करें और अपना Google Cast डिवाइस चुनें.
  3. कोई वीडियो चुनें और चलाएं बटन पर क्लिक करें.
  4. इसके बाद, वीडियो आपके Google Cast डिवाइस पर चलने लगेगा.

कास्ट डिवाइस पर चल रहे वीडियो की इमेज

रिसीवर पर वीडियो रोकने के लिए वीडियो एलिमेंट में 'रोकें' बटन पर क्लिक करें. वीडियो को फिर से चलाने के लिए, वीडियो एलिमेंट में मौजूद 'चलाएं' बटन पर क्लिक करें.

Google Cast डिवाइस पर कास्टिंग रोकने के लिए, 'कास्ट करें' बटन पर क्लिक करें.

आगे बढ़ने से पहले, सर्वर को बंद करें.

4. स्टार्ट प्रोजेक्ट तैयार करना

Cast डिवाइस पर चल रहे वीडियो की इमेज

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

  • भेजने वाला ऐप्लिकेशन, मोबाइल डिवाइस या लैपटॉप पर चलता हो,
  • Google Cast डिवाइस पर रिसीवर ऐप्लिकेशन चलता है.

अब अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, स्टार्टर प्रोजेक्ट के आधार पर प्रोजेक्ट बनाने के लिए तैयार हैं:

  1. सैंपल कोड डाउनलोड करने के बाद, फ़ोल्डर का आइकॉनapp-start डायरेक्ट्री चुनें.
  2. अपने सर्वर का इस्तेमाल करके ऐप्लिकेशन चलाएं और यूज़र इंटरफ़ेस (यूआई) को एक्सप्लोर करें.

ध्यान दें, इस कोडलैब में काम करते समय, आपको सेवा के हिसाब से अपने सर्वर पर सैंपल को फिर से होस्ट करना होगा.

ऐप डिज़ाइन

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

ऐप्लिकेशन का एक मुख्य व्यू होता है, जिसकी जानकारी index.html और मुख्य कंट्रोलर CastVideos.js. में दी गई है

index.html

इस एचटीएमएल फ़ाइल में, वेब ऐप्लिकेशन के लिए यूज़र इंटरफ़ेस (यूआई) की जानकारी होती है.

व्यू के कुछ सेक्शन दिए गए हैं. हमारे पास div#main_video है, जिसमें वीडियो एलिमेंट शामिल है. हमारे वीडियो डिव में, div#media_control है. यह वीडियो एलिमेंट के सभी कंट्रोल तय करता है. इसके नीचे, media_info है. इसमें वीडियो की जानकारी दिखती है. आखिर में, carousel div में वीडियो की सूची दिखती है.

index.html फ़ाइल, Cast SDK को बूटस्ट्रैप करती है और CastVideos फ़ंक्शन को लोड करने के लिए कहती है.

इन एलिमेंट में भरने वाला ज़्यादातर कॉन्टेंट, CastVideos.js में तय किया जाता है, इंजेक्ट किया जाता है, और कंट्रोल किया जाता है. आइए, इस बारे में जानते हैं.

CastVideos.js

यह स्क्रिप्ट, Cast वीडियो वेब ऐप्लिकेशन के लिए सभी लॉजिक को मैनेज करती है. CastVideos.js में बताए गए वीडियो की सूची और उनसे जुड़ा मेटाडेटा, mediaJSON नाम के ऑब्जेक्ट में मौजूद होता है.

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

CastPlayer मुख्य क्लास है, जो पूरे ऐप्लिकेशन को मैनेज करती है. साथ ही, प्लेयर को सेट अप करती है, मीडिया चुनती है, और मीडिया चलाने के लिए इवेंट को PlayerHandler से बांधती है. CastPlayer.prototype.initializeCastPlayer वह तरीका है जिससे कास्ट की सभी सुविधाएं सेट अप की जाती हैं. CastPlayer.prototype.switchPlayer, स्टेटस को लोकल और रिमोट प्लेयर के बीच स्विच करता है. CastPlayer.prototype.setupLocalPlayer और CastPlayer.prototype.setupRemotePlayer, स्थानीय और रिमोट प्लेयर को शुरू करते हैं.

PlayerHandler वह क्लास है जो मीडिया प्लेबैक को मैनेज करती है. मीडिया और उसके प्लेलबैक को मैनेज करने के कई अन्य तरीके भी हैं.

अक्सर पूछे जाने वाले सवाल

5. 'कास्ट करें' बटन जोड़ना

Cast की सुविधा वाले ऐप्लिकेशन की इमेज

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

कॉन्फ़िगरेशन

स्टार्ट प्रोजेक्ट के लिए, उनी ही डिपेंडेंसी और सेटअप की ज़रूरत होती है जो आपने पूरे सैंपल ऐप्लिकेशन के लिए की थी. हालांकि, इस बार app-start का कॉन्टेंट होस्ट करें.

अपने ब्राउज़र में, होस्ट किए गए सैंपल के https यूआरएल पर जाएं.

याद रखें, बदलाव करते समय, आपको सेवा के आधार पर अपने सर्वर पर सैंपल को फिर से होस्ट करना होगा.

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

Cast फ़्रेमवर्क में एक ग्लोबल सिंगलटन ऑब्जेक्ट, CastContext होता है. यह फ़्रेमवर्क की सभी गतिविधियों को मैनेज करता है. इस ऑब्जेक्ट को ऐप्लिकेशन के लाइफ़साइकल की शुरुआत में शुरू किया जाना चाहिए. आम तौर पर, इसे window['__onGCastApiAvailable'] को असाइन किए गए कॉलबैक से कॉल किया जाता है. यह कॉलबैक, Cast SDK टूल लोड होने के बाद कॉल किया जाता है और इस्तेमाल के लिए उपलब्ध होता है. इस मामले में, CastContext को CastPlayer.prototype.initializeCastPlayer में कॉल किया जाता है, जिसे ऊपर बताए गए कॉलबैक से कॉल किया जाता है.

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

जब आप अपना Cast सक्षम ऐप्लिकेशन डेवलप करते हैं, तो आपको कास्ट डेवलपर के रूप में रजिस्टर करना होगा और फिर अपने ऐप्लिकेशन के लिए एक ऐप्लिकेशन आईडी पाना होगा. इस कोडलैब के लिए, हम एक नमूना ऐप्लिकेशन आईडी का इस्तेमाल करेंगे.

body सेक्शन के आखिर में, index.html में यह कोड जोड़ें:

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

CastVideos ऐप्लिकेशन को शुरू करने और CastContext को शुरू करने के लिए, index.html में यह कोड जोड़ें:

<script src="CastVideos.js"></script>
<script type="text/javascript">
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    castPlayer.initializeCastPlayer();
  }
};
</script>

अब, हमें CastVideos.js में एक नया तरीका जोड़ना होगा, जो index.html में कॉल किए गए तरीके से मेल खाता हो. चलिए, initializeCastPlayer नाम का एक नया तरीका जोड़ते हैं. यह CastContext पर विकल्प सेट करता है और नए RemotePlayer और RemotePlayerControllers को शुरू करता है:

/**
 * This method sets up the CastContext, and a few other members
 * that are necessary to play and control videos on a Cast
 * device.
 */
CastPlayer.prototype.initializeCastPlayer = function() {

    var options = {};

    // Set the receiver application ID to your own (created in
    // the Google Cast Developer Console), or optionally
    // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
    options.receiverApplicationId = 'C0868879';

    // Auto join policy can be one of the following three:
    // ORIGIN_SCOPED - Auto connect from same appId and page origin
    // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
    // PAGE_SCOPED - No auto connect
    options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;

    cast.framework.CastContext.getInstance().setOptions(options);

    this.remotePlayer = new cast.framework.RemotePlayer();
    this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
        this.switchPlayer.bind(this)
    );
};

आखिर में, हमें RemotePlayer और RemotePlayerController के लिए वैरिएबल बनाने होंगे:

var CastPlayer = function() {
  //...
  /* Cast player variables */
  /** @type {cast.framework.RemotePlayer} */
  this.remotePlayer = null;
  /** @type {cast.framework.RemotePlayerController} */
  this.remotePlayerController = null;
  //...
};

कास्ट बटन

CastContext को शुरू करने के बाद, हमें कास्ट बटन जोड़ना होगा, ताकि उपयोगकर्ता कोई कास्ट डिवाइस चुन सके. Cast SDK टूल, google-cast-launcher नाम का एक कास्ट बटन कॉम्पोनेंट उपलब्ध कराता है. इसका आईडी "castbutton"" होता है. इसे ऐप्लिकेशन के वीडियो एलिमेंट में जोड़ा जा सकता है. इसके लिए, media_control सेक्शन में button जोड़ें.

बटन एलिमेंट ऐसा दिखेगा:

<google-cast-launcher id="castbutton"></google-cast-launcher>

media_control सेक्शन में index.html में यह कोड जोड़ें:

<div id="media_control">
  <div id="play"></div>
  <div id="pause"></div>
  <div id="progress_bg"></div>
  <div id="progress"></div>
  <div id="progress_indicator"></div>
  <div id="fullscreen_expand"></div>
  <div id="fullscreen_collapse"></div>
  <google-cast-launcher id="castbutton"></google-cast-launcher>
  <div id="audio_bg"></div>
  <div id="audio_bg_track"></div>
  <div id="audio_indicator"></div>
  <div id="audio_bg_level"></div>
  <div id="audio_on"></div>
  <div id="audio_off"></div>
  <div id="duration">00:00:00</div>
</div>

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

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

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

Cast की सुविधा वाले ऐप्लिकेशन की इमेज, जिसमें Cast डिवाइस चुनने का मेन्यू है

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

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

हाई लेवल पर, अगर आपको कास्ट डिवाइस पर मीडिया चलाना है, तो आपको ये कार्रवाइयां करनी होंगी:

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

पहला चरण एक ऑब्जेक्ट को दूसरे से मैप करने के लिए है; MediaInfo ऐसी चीज़ है जिसे Cast SDK समझता है और mediaJSON किसी मीडिया आइटम के लिए हमारे ऐप्लिकेशन का एनकैप्सुलेशन है; हम mediaJSON को आसानी से MediaInfo से मैप कर सकते हैं. हमने पिछले सेक्शन में दूसरा चरण पहले ही पूरा कर लिया है. तीसरा चरण, Cast SDK टूल की मदद से आसानी से पूरा किया जा सकता है.

सैंपल ऐप्लिकेशन CastPlayer, switchPlayer तरीके में पहले से ही लोकल बनाम रिमोट प्लेबैक के बीच अंतर करता है:

if (cast && cast.framework) {
  if (this.remotePlayer.isConnected) {
    //...

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

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

कास्ट सेशन मैनेजमेंट

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

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

कास्ट सेशन को CastSession मैनेज करता है. इन्हें cast.framework.CastContext.getInstance().getCurrentSession() से ऐक्सेस किया जा सकता है. EventListener कॉलबैक का इस्तेमाल, सेशन इवेंट पर नज़र रखने के लिए किया जा सकता है. इनमें इवेंट बनाना, निलंबित करना, फिर से शुरू करना, और बंद करना शामिल हैं.

हमारे मौजूदा आवेदन में, हमारे सभी सेशन और स्टेट मैनेजमेंट को setupRemotePlayer तरीके से मैनेज किया जाता है. आइए, इसे आपके ऐप्लिकेशन में कॉन्फ़िगर करना शुरू करें. इसके लिए, अपने CastVideos.js में यह कोड जोड़ें:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

हमें अब भी कॉलबैक से सभी इवेंट को बांधना होगा और आने वाले सभी इवेंट को मैनेज करना होगा. यह काम करना काफ़ी आसान है. इसलिए, चलिए अब इसे पूरा करते हैं:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    // Add event listeners for player changes which may occur outside sender app
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,
        function() {
            if (this.remotePlayer.isPaused) {
                this.playerHandler.pause();
            } else {
                this.playerHandler.play();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED,
        function() {
            if (this.remotePlayer.isMuted) {
                this.playerHandler.mute();
            } else {
                this.playerHandler.unMute();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED,
        function() {
            var newVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
            var p = document.getElementById('audio_bg_level');
            p.style.height = newVolume + 'px';
            p.style.marginTop = -newVolume + 'px';
        }.bind(this)
    );

    // This object will implement PlayerHandler callbacks with
    // remotePlayerController, and makes necessary UI updates specific
    // to remote playback
    var playerTarget = {};

    playerTarget.play = function () {
        if (this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }

        var vi = document.getElementById('video_image');
        vi.style.display = 'block';
        var localPlayer = document.getElementById('video_element');
        localPlayer.style.display = 'none';
    }.bind(this);

    playerTarget.pause = function () {
        if (!this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }
    }.bind(this);

    playerTarget.stop = function () {
         this.remotePlayerController.stop();
    }.bind(this);

    playerTarget.getCurrentMediaTime = function() {
        return this.remotePlayer.currentTime;
    }.bind(this);

    playerTarget.getMediaDuration = function() {
        return this.remotePlayer.duration;
    }.bind(this);

    playerTarget.updateDisplayMessage = function () {
        document.getElementById('playerstate').style.display = 'block';
        document.getElementById('playerstatebg').style.display = 'block';
        document.getElementById('video_image_overlay').style.display = 'block';
        document.getElementById('playerstate').innerHTML =
            this.mediaContents[ this.currentMediaIndex]['title'] + ' ' +
            this.playerState + ' on ' + castSession.getCastDevice().friendlyName;
    }.bind(this);

    playerTarget.setVolume = function (volumeSliderPosition) {
        // Add resistance to avoid loud volume
        var currentVolume = this.remotePlayer.volumeLevel;
        var p = document.getElementById('audio_bg_level');
        if (volumeSliderPosition < FULL_VOLUME_HEIGHT) {
            var vScale =  this.currentVolume * FULL_VOLUME_HEIGHT;
            if (volumeSliderPosition > vScale) {
                volumeSliderPosition = vScale + (pos - vScale) / 2;
            }
            p.style.height = volumeSliderPosition + 'px';
            p.style.marginTop = -volumeSliderPosition + 'px';
            currentVolume = volumeSliderPosition / FULL_VOLUME_HEIGHT;
        } else {
            currentVolume = 1;
        }
        this.remotePlayer.volumeLevel = currentVolume;
        this.remotePlayerController.setVolumeLevel();
    }.bind(this);

    playerTarget.mute = function () {
        if (!this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.unMute = function () {
        if (this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.isMuted = function() {
        return this.remotePlayer.isMuted;
    }.bind(this);

    playerTarget.seekTo = function (time) {
        this.remotePlayer.currentTime = time;
        this.remotePlayerController.seek();
    }.bind(this);

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

मीडिया लोड हो रहा है

Cast SDK में, RemotePlayer और RemotePlayerController रिसीवर पर रिमोट मीडिया प्लेबैक को मैनेज करने के लिए, सुविधाजनक एपीआई का सेट उपलब्ध कराया जाता है. मीडिया चलाने की सुविधा वाले CastSession के लिए, SDK टूल की मदद से RemotePlayer और RemotePlayerController के इंस्टेंस अपने-आप बन जाएंगे. इन्हें ऐक्सेस करने के लिए, cast.framework.RemotePlayer और cast.framework.RemotePlayerController के इंस्टेंस बनाए जा सकते हैं. इस बारे में, कोडलैब में पहले बताया गया है.

इसके बाद, हमें रिसीवर पर फ़िलहाल चुना गया वीडियो लोड करना होगा. इसके लिए, हमें MediaInfo ऑब्जेक्ट बनाकर, एसडीके टूल को अनुरोध प्रोसेस करने और उसे पास करने के लिए कहना होगा. ऐसा करने के लिए, setupRemotePlayer में यह कोड जोड़ें:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    //...

    playerTarget.load = function (mediaIndex) {
        console.log('Loading...' + this.mediaContents[mediaIndex]['title']);
        var mediaInfo = new chrome.cast.media.MediaInfo(
            this.mediaContents[mediaIndex]['sources'][0], 'video/mp4');

        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
        mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
        mediaInfo.metadata.title = this.mediaContents[mediaIndex]['title'];
        mediaInfo.metadata.images = [
            {'url': MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex]['thumb']}];

        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        castSession.loadMedia(request).then(
            this.playerHandler.loaded.bind(this.playerHandler),
            function (errorCode) {
                this.playerState = PLAYER_STATE.ERROR;
                console.log('Remote media load error: ' +
                    CastPlayer.getErrorMessage(errorCode));
            }.bind(this));
    }.bind(this);

    //...
};

अब लोकल और रिमोट प्लेबैक के बीच स्विच करने का कोई तरीका जोड़ें:

/**
 * This is a method for switching between the local and remote
 * players. If the local player is selected, setupLocalPlayer()
 * is run. If there is a cast device connected we run
 * setupRemotePlayer().
 */
CastPlayer.prototype.switchPlayer = function() {
    this.stopProgressTimer();
    this.resetVolumeSlider();
    this.playerHandler.stop();
    this.playerState = PLAYER_STATE.IDLE;
    if (cast && cast.framework) {
        if (this.remotePlayer.isConnected) {
            this.setupRemotePlayer();
            return;
        }
    }
    this.setupLocalPlayer();
};

आखिर में, कास्ट करने से जुड़ी किसी भी गड़बड़ी के मैसेज को मैनेज करने का तरीका जोड़ें:

/**
 * Makes human-readable message from chrome.cast.Error
 * @param {chrome.cast.Error} error
 * @return {string} error message
 */
CastPlayer.getErrorMessage = function(error) {
  switch (error.code) {
    case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
      return 'The API is not initialized.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CANCEL:
      return 'The operation was canceled by the user' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CHANNEL_ERROR:
      return 'A channel to the receiver is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.EXTENSION_MISSING:
      return 'The Cast extension is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.INVALID_PARAMETER:
      return 'The parameters to the operation were not valid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
      return 'No receiver was compatible with the session request.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.SESSION_ERROR:
      return 'A session could not be created, or a session was invalid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.TIMEOUT:
      return 'The operation timed out.' +
        (error.description ? ' :' + error.description : '');
  }
};

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

7. Cast Connect सहायता जोड़ें

Cast Connect लाइब्रेरी की मदद से, मौजूदा ऐप्लिकेशन, Cast प्रोटोकॉल के ज़रिए Android TV ऐप्लिकेशन के साथ इंटरैक्ट कर सकते हैं. Cast Connect, Cast के बुनियादी ढांचे पर काम करता है. इसमें आपका Android TV ऐप्लिकेशन, रिसीवर के तौर पर काम करता है.

डिपेंडेंसी

  • Chrome ब्राउज़र का M87 या उसके बाद का वर्शन

Android रिसीवर के साथ काम करने वाले ऐप्लिकेशन को सेट करें

Android TV ऐप्लिकेशन को लॉन्च करने के लिए, हमें CastOptions ऑब्जेक्ट में androidReceiverCompatible फ़्लैग को 'सही है' पर सेट करना होगा. इसे Android रिसीवर भी कहा जाता है.

initializeCastPlayer फ़ंक्शन में अपने CastVideos.js में यह कोड जोड़ें:

var options = {};
...
options.androidReceiverCompatible = true;

cast.framework.CastContext.getInstance().setOptions(options);

लॉन्च क्रेडेंशियल सेट करना

सेशन में शामिल होने वाले व्यक्ति की जानकारी देने के लिए, ईमेल भेजने वाले व्यक्ति के पास CredentialsData का विकल्प होता है. credentials एक स्ट्रिंग है, जिसे उपयोगकर्ता तय कर सकता है. हालांकि, यह ज़रूरी है कि आपका ATV ऐप्लिकेशन इसे समझ सके. CredentialsData को सिर्फ़ लॉन्च या मीटिंग में शामिल होने के दौरान, आपके Android TV ऐप्लिकेशन को भेजा जाता है. अगर कनेक्ट रहने के दौरान इसे फिर से सेट किया जाता है, तो यह आपके Android TV ऐप्लिकेशन पर नहीं भेजा जाएगा.

लॉन्च क्रेडेंशियल सेट करने के लिए, लॉन्च के विकल्प सेट होने के बाद, CredentialsData को किसी भी समय तय किया जा सकता है.

initializeCastPlayer फ़ंक्शन में जाकर, अपनी CastVideos.js क्लास में यह कोड जोड़ें:

cast.framework.CastContext.getInstance().setOptions(options);
...
let credentialsData = new chrome.cast.CredentialsData("{\"userId\": \"abc\"}");
cast.framework.CastContext.getInstance().setLaunchCredentialsData(credentialsData);
...

लोड करने के अनुरोध पर क्रेडेंशियल सेट करें

अगर आपका वेब रिसीवर ऐप्लिकेशन और Android TV ऐप्लिकेशन, credentials को अलग-अलग तरीके से हैंडल करता है, तो आपको दोनों के लिए अलग-अलग क्रेडेंशियल देने पड़ सकते हैं. इसका ध्यान रखने के लिए, setupRemotePlayer फ़ंक्शन में playerTarget.load के तहत अपने CastVideos.js में यह कोड जोड़ें:

...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...

आपके डिवाइस से जिस ऐप्लिकेशन पर कास्ट किया जा रहा है उसके आधार पर, SDK टूल अब अपने-आप यह तय कर लेगा कि मौजूदा सेशन के लिए कौनसे क्रेडेंशियल इस्तेमाल करने हैं.

Cast Connect की जांच करना

Chromecast with Google TV पर Android TV APK इंस्टॉल करने का तरीका:

  1. अपने Android TV डिवाइस का आईपी पता ढूंढें. आम तौर पर, यह सेटिंग > नेटवर्क और इंटरनेट > (आपके डिवाइस से कनेक्ट नेटवर्क का नाम) में उपलब्ध होता है. दाईं ओर, आपको नेटवर्क पर आपके डिवाइस का आईपी और जानकारी दिखेगी.
  2. टर्मिनल का इस्तेमाल करके, अपने डिवाइस को ADB से कनेक्ट करने के लिए, उसके आईपी पते का इस्तेमाल करें:
$ adb connect <device_ip_address>:5555
  1. अपनी टर्मिनल विंडो से, कोडलैब के उन सैंपल के लिए सबसे ऊपर वाले फ़ोल्डर पर जाएं जिन्हें आपने इस कोडलैब की शुरुआत में डाउनलोड किया था. उदाहरण के लिए:
$ cd Desktop/chrome_codelab_src
  1. इस फ़ोल्डर में मौजूद .apk फ़ाइल को अपने Android TV पर इंस्टॉल करने के लिए, यह तरीका अपनाएं:
$ adb -s <device_ip_address>:5555 install android-tv-app.apk
  1. अब आपको अपने Android TV डिवाइस पर, आपके ऐप्लिकेशन मेन्यू में वीडियो कास्ट करें नाम का एक ऐप्लिकेशन दिखेगा.
  2. वेब से भेजने वाले के लिए अपडेट किया गया कोड चलाएं और अपने Android TV डिवाइस पर कास्ट सेशन शुरू करें. इसके लिए, 'कास्ट करें' आइकॉन का इस्तेमाल करें या अपने Chrome ब्राउज़र में ड्रॉप-डाउन मेन्यू से Cast.. को चुनें. इससे, आपके Android रिसीवर पर Android TV ऐप्लिकेशन लॉन्च हो जाएगा. साथ ही, Android TV रिमोट का इस्तेमाल करके, चल रहे कॉन्टेंट को कंट्रोल किया जा सकेगा.

8. बधाई हो

अब आपको Chrome वेब ऐप्लिकेशन पर, Cast SDK टूल के विजेट का इस्तेमाल करके, किसी वीडियो ऐप्लिकेशन को कास्ट करने की सुविधा चालू करने का तरीका पता है.

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