अपने वेब सेंडर ऐप्लिकेशन में Cast SDK टूल को इंटिग्रेट करें

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

शब्दावली

मोबाइल डिवाइस या ब्राउज़र को सेंडर कहा जाता है. यह प्लेबैक को कंट्रोल करता है. वहीं, Google Cast डिवाइस को रिसीवर कहा जाता है. यह प्लेबैक के लिए, स्क्रीन पर कॉन्टेंट दिखाता है.

Web Sender SDK में दो हिस्से होते हैं: फ़्रेमवर्क एपीआई (cast.framework) और Base API (chrome.cast) आम तौर पर, आसान और बड़े लेवल के फ़्रेमवर्क एपीआई पर कॉल किए जाते हैं, इसके बाद, इन्हें छोटे लेवल के Base API से प्रोसेस किया जाता है.

सेंडर फ़्रेमवर्क का मतलब, फ़्रेमवर्क एपीआई, मॉड्यूल, और उनसे जुड़े ऐसे संसाधन हैं जो छोटे लेवल की सुविधाओं के लिए रैपर उपलब्ध कराते हैं. सेंडर ऐप्लिकेशन या Google Cast Chrome ऐप्लिकेशन का मतलब, सेंडर डिवाइस पर Chrome ब्राउज़र में चल रहा वेब (एचटीएमएल/JavaScript) ऐप्लिकेशन है. Web Receiver ऐप्लिकेशन का मतलब, Chromecast या Google Cast डिवाइस पर चल रहा एचटीएमएल/JavaScript ऐप्लिकेशन है.

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

लाइब्रेरी लोड करना

Google Cast की सुविधाएं लागू करने के लिए, आपके ऐप्लिकेशन को Google Cast Web Sender SDK की जगह की जानकारी होनी चाहिए. यह जानकारी यहां दिखाई गई है. Web Sender Framework API को भी लोड करने के लिए, loadCastFramework यूआरएल क्वेरी पैरामीटर जोड़ें. आपके ऐप्लिकेशन के सभी पेजों को लाइब्रेरी के बारे में इस तरह बताना होगा:

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

फ़्रेमवर्क

Web Sender SDK, cast.framework.* नेमस्पेस का इस्तेमाल करता है. नेमस्पेस, इन चीज़ों को दिखाता है:

• एपीआई पर कार्रवाइयां शुरू करने वाले तरीके या फ़ंक्शन
• एपीआई में लिसनर फ़ंक्शन के लिए इवेंट लिसनर

फ़्रेमवर्क में ये मुख्य कॉम्पोनेंट शामिल होते हैं:

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

नेमस्पेस के बारे में पूरी जानकारी के लिए, Google Cast Web Sender API का रेफ़रंस देखें.

कास्ट बटन

आपके ऐप्लिकेशन में Cast बटन कॉम्पोनेंट को पूरी तरह से फ़्रेमवर्क मैनेज करता है. इसमें, विज़िबिलिटी मैनेजमेंट के साथ-साथ, क्लिक इवेंट हैंडलिंग भी शामिल है.

<google-cast-launcher></google-cast-launcher>

इसके अलावा, बटन को प्रोग्रामैटिक तरीके से भी बनाया जा सकता है:

document.createElement("google-cast-launcher");

ज़रूरत के हिसाब से, एलिमेंट पर कोई भी अतिरिक्त स्टाइलिंग लागू की जा सकती है. जैसे, साइज़ या पोज़िशनिंग. कनेक्ट किए गए Web Receiver की स्थिति के लिए रंग चुनने के लिए, --connected-color एट्रिब्यूट का इस्तेमाल करें. वहीं, डिसकनेक्ट की गई स्थिति के लिए, --disconnected-color एट्रिब्यूट का इस्तेमाल करें.

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

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

इस हैंडलर में, setOptions(options) तरीके को कॉल करके, Cast इंटरैक्शन शुरू करें CastContext.

उदाहरण के लिए:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

इसके बाद, एपीआई को इस तरह शुरू करें:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

सबसे पहले, ऐप्लिकेशन, फ़्रेमवर्क से मिले CastContext ऑब्जेक्ट के सिंगलटन इंस्टेंस को वापस लेता है. इसके बाद, applicationID सेट करने के लिए, CastOptions ऑब्जेक्ट का इस्तेमाल करके, setOptions(options) का इस्तेमाल करता है.

अगर Default Media Receiver का इस्तेमाल किया जा रहा है, तो इसके लिए रजिस्ट्रेशन की ज़रूरत नहीं होती. ऐसे में, applicationID के बजाय, Web Sender SDK से पहले से तय की गई किसी कॉन्स्टैंट का इस्तेमाल करें. यह जानकारी यहां दिखाई गई है:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

मीडिया नियंत्रण

CastContext के शुरू होने के बाद, ऐप्लिकेशन, getCurrentSession() का इस्तेमाल करके, मौजूदा CastSession को किसी भी समय वापस ले सकता है.

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

CastSession का इस्तेमाल करके, कनेक्ट किए गए Cast डिवाइस पर मीडिया लोड करने के लिए loadMedia(loadRequest) का इस्तेमाल किया जा सकता है. सबसे पहले, MediaInfo, contentId और contentType के साथ-साथ, कॉन्टेंट से जुड़ी अन्य जानकारी का इस्तेमाल करके, बनाएं. इसके बाद, इससे LoadRequest बनाएं और अनुरोध के लिए सभी ज़रूरी जानकारी सेट करें. आखिर में, अपने CastSession पर loadMedia(loadRequest) को कॉल करें.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

loadMedia तरीका, एक प्रॉमिस दिखाता है. इसका इस्तेमाल, नतीजे को पाने के लिए ज़रूरी कार्रवाइयां करने के लिए किया जा सकता है. अगर प्रॉमिस अस्वीकार कर दिया जाता है, तो फ़ंक्शन आर्ग्युमेंट, एक chrome.cast.ErrorCode होगा.

प्लेयर की स्थिति के वैरिएबल RemotePlayer में ऐक्सेस किए जा सकते हैं. RemotePlayer के साथ सभी इंटरैक्शन, जैसे कि मीडिया इवेंट कॉलबैक और कमांड, RemotePlayerController से हैंडल किए जाते हैं.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController, लोड किए गए मीडिया के लिए, ऐप्लिकेशन को PLAY, PAUSE, STOP, और SEEK का पूरा मीडिया कंट्रोल देता है.

• PLAY/PAUSE: playerController.playOrPause();
• STOP: playerController.stop();
• SEEK: playerController.seek();

रिमोट प्लेयर को लागू करने के लिए, RemotePlayer और RemotePlayerController का इस्तेमाल, Polymer या Angular जैसे डेटा बाइंडिंग फ़्रेमवर्क के साथ किया जा सकता है.

Angular के लिए कोड स्निपेट यहां दिया गया है:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

मीडिया की स्थिति

मीडिया प्लेबैक के दौरान, कई इवेंट होते हैं. इन्हें, cast.framework.RemotePlayerEventType इवेंट के लिए लिसनर सेट करके कैप्चर किया जा सकता है. ये इवेंट, RemotePlayerControllerऑब्जेक्ट पर होते हैं.

मीडिया की स्थिति की जानकारी पाने के लिए, cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED इवेंट का इस्तेमाल करें. यह इवेंट, प्लेबैक में बदलाव होने पर और CastSession.getMediaSession().media में बदलाव होने पर ट्रिगर होता है.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

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

सेशन मैनेजमेंट कैसे काम करता है

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

सेशन को क्लास CastContext मैनेज करती है, जिसे आपका ऐप्लिकेशन cast.framework.CastContext.getInstance() के ज़रिए वापस ले सकता है. अलग-अलग सेशन को, क्लास की सबक्लास से दिखाया जाता है Session. उदाहरण के लिए, CastSession Cast डिवाइसों के साथ सेशन दिखाता है. आपका ऐप्लिकेशन, फ़िलहाल चालू Cast सेशन को CastContext.getCurrentSession() ऐक्सेस कर सकता है.

सेशन की स्थिति की निगरानी करने के लिए, CastContext के लिए CastContextEventType.SESSION_STATE_CHANGED इवेंट टाइप में एक लिसनर जोड़ें.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

डिसकनेक्ट करने के लिए, जैसे कि जब उपयोगकर्ता Cast डायलॉग से "कास्ट करना बंद करें" बटन पर क्लिक करता है, तो अपने लिसनर में, RemotePlayerEventType.IS_CONNECTED_CHANGED इवेंट टाइप के लिए एक लिसनर जोड़ा जा सकता है. अपने लिसनर में देखें कि RemotePlayer डिसकनेक्ट हुआ है या नहीं. अगर ऐसा है, तो ज़रूरत के हिसाब से, लोकल प्लेयर की स्थिति को अपडेट करें. उदाहरण के लिए:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

उपयोगकर्ता, फ़्रेमवर्क Cast बटन के ज़रिए, Cast को सीधे तौर पर बंद कर सकता है. हालांकि, सेंडर, मौजूदा CastSession ऑब्जेक्ट का इस्तेमाल करके भी कास्ट करना बंद कर सकता है.

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

संगीत को दूसरे स्पीकर पर चलाएं

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

स्ट्रीम ट्रांसफ़र के दौरान, नए डेस्टिनेशन डिवाइस की जानकारी पाने के लिए, CastSession#getCastDevice() इवेंट को कॉल किए जाने पर, cast.framework.SessionState.SESSION_RESUMED को कॉल करें.

ज़्यादा जानकारी के लिए, Web Receiver पर स्ट्रीम ट्रांसफ़र देखें.