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

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

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

अनुभव

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

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

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

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

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

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

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

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

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

सर्वर चलाना

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

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

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 div, div में वीडियो की सूची दिखाता है.

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

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

CastVideos.js

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

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

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

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

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

• Google Cast क्या है?
• मैं Google Cast डेवलपर कैसे बनूं?

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

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

<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, Cast बटन कॉम्पोनेंट उपलब्ध कराता है. इसे 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 फ़्रेमवर्क से जनरेट होने वाले अलग-अलग इवेंट सुनने होंगे.

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

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

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 के लिए, एसडीके 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();
};

आखिर में, Cast से जुड़ी गड़बड़ी के मैसेज को हैंडल करने का तरीका जोड़ें:

/**
 * 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 Receiver Compatible सेट करना

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

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';
...

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

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

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

1. अपने Android TV डिवाइस का आईपी पता ढूंढें. आम तौर पर, यह सेटिंग > नेटवर्क और इंटरनेट > (आपके डिवाइस से कनेक्ट किए गए नेटवर्क का नाम) में उपलब्ध होता है. दाईं ओर, आपको नेटवर्क पर मौजूद आपके डिवाइस की जानकारी और आईपी पते की जानकारी दिखेगी.
2. टर्मिनल का इस्तेमाल करके, एडीबी के ज़रिए अपने डिवाइस से कनेक्ट करने के लिए, डिवाइस के आईपी पते का इस्तेमाल करें:

$ adb connect <device_ip_address>:5555

3. अपने टर्मिनल विंडो में, कोडलैब के उन सैंपल के टॉप लेवल फ़ोल्डर पर जाएं जिन्हें आपने इस कोडलैब की शुरुआत में डाउनलोड किया था. उदाहरण के लिए:

$ cd Desktop/chrome_codelab_src

4. इस फ़ोल्डर में मौजूद .apk फ़ाइल को अपने Android TV पर इंस्टॉल करने के लिए, यह कमांड चलाएं:

$ adb -s <device_ip_address>:5555 install android-tv-app.apk

5. अब आपको अपने Android TV डिवाइस पर, आपके ऐप्लिकेशन मेन्यू में वीडियो कास्ट करें नाम का ऐप्लिकेशन दिखेगा.
6. अपडेट किए गए वेब सेंडर कोड को चलाएं. इसके बाद, कास्ट आइकॉन का इस्तेमाल करके या Chrome ब्राउज़र में ड्रॉप-डाउन मेन्यू से Cast.. को चुनकर, अपने Android TV डिवाइस के साथ कास्ट सेशन शुरू करें. अब इससे आपके Android रिसीवर पर Android TV ऐप्लिकेशन लॉन्च हो जाएगा. साथ ही, आपको Android TV रिमोट का इस्तेमाल करके, कॉन्टेंट चलाने की सुविधा मिल जाएगी.

8. बधाई हो

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

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