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

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

Google Cast का लोगो

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

Google Cast क्या है?

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

Google Cast SDK टूल की मदद से, अपने ऐप्लिकेशन के डेटा को बढ़ाया जा सकता है, ताकि टीवी या साउंड सिस्टम को कंट्रोल किया जा सके. कास्ट 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 की ज़रूरत होती है. हालांकि, कोडलैब के बाकी टूल के लिए यह ज़रूरी नहीं है. अगर आपके पास AdSense कनेक्ट नहीं है, तो इस ट्यूटोरियल को खत्म करने के लिए, Cast Connect सहायता जोड़ें चरण को बेझिझक छोड़ दें.

अनुभव

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

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

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

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

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

आपके हिसाब से टीवी देखने का अनुभव कैसा रहा?

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

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

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

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

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

Google Chrome का लोगो

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

पूरी की गई का इस्तेमाल करने के लिए, इसे होस्ट करने की ज़रूरत होती है.

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

सर्वर चलाएं

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

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

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

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

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

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

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

4. शुरुआती प्रोजेक्ट तैयार करना

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

आपके डाउनलोड किए गए स्टार्ट ऐप्लिकेशन के लिए, हमें 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 डिवी किसी डिवीज़न में वीडियो की सूची दिखाता है.

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

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

CastVideos.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 "castbutton" के आईडी के साथ google-cast-launcher नाम का एक कास्ट बटन कॉम्पोनेंट उपलब्ध कराता है. इसे 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. वीडियो कॉन्टेंट कास्ट किया जा रहा है

कास्ट डिवाइस चुनने के मेन्यू के साथ कास्ट चालू किए गए ऐप्लिकेशन की इमेज

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

मीडिया कास्ट किया जा रहा है

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

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

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

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

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

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

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

कास्ट सेशन को मैनेज करना

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

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

कास्ट सेशन को 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 के लिए, जिस पर मीडिया चलाने की सुविधा है उसके लिए, RemotePlayer और RemotePlayerController के इंस्टेंस, SDK टूल से अपने-आप बन जाएंगे. इन्हें cast.framework.RemotePlayer और cast.framework.RemotePlayerController के इंस्टेंस बनाकर ऐक्सेस किया जा सकता है, जैसा कि पहले कोडलैब में दिखाया गया है.

इसके बाद, हमें चुने गए मौजूदा वीडियो को रिसीवर पर लोड करना होगा. इसके लिए, हमें एक MediaInfo ऑब्जेक्ट बनाना होगा. इससे SDK टूल, अनुरोध को प्रोसेस और पास कर पाएगा. ऐसा करने के लिए, 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 : '');
  }
};

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

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

Cast Connect लाइब्रेरी की मदद से, भेजने वाले मौजूदा ऐप्लिकेशन को Cast प्रोटोकॉल की मदद से, Android TV ऐप्लिकेशन से संपर्क करने की अनुमति मिलती है. Cast Connect को कास्ट करना, कास्ट करने के इन्फ़्रास्ट्रक्चर के साथ बेहतर तरीके से काम करता है. इसमें, आपका 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. कास्ट करें आइकॉन का इस्तेमाल करके या Chrome ब्राउज़र के ड्रॉप-डाउन मेन्यू में Cast.. को चुनकर, अपडेट किए गए वेब सेंडर कोड को चलाएं और Android TV डिवाइस पर कास्ट सेशन शुरू करें. इससे अब आपके Android रिसीवर पर Android TV ऐप्लिकेशन लॉन्च हो जाएगा. साथ ही, आपको Android TV के रिमोट से वीडियो को कंट्रोल करने की सुविधा भी मिलेगी.

8. बधाई हो

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

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