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

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

शब्दावली

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

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

सेंडर फ़्रेमवर्क का मतलब, फ़्रेमवर्क एपीआई, मॉड्यूल, और उससे जुड़े संसाधनों से है. ये संसाधन, लोअर-लेवल की सुविधाओं के लिए रैपर उपलब्ध कराते हैं. भेजने वाले ऐप्लिकेशन या Google Cast Chrome ऐप्लिकेशन का मतलब, भेजने वाले डिवाइस पर Chrome ब्राउज़र में चल रहे वेब (एचटीएमएल/JavaScript) ऐप्लिकेशन से है. वेब रिसीवर ऐप्लिकेशन, 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 एक सिंगलटन ऑब्जेक्ट है, जो कास्ट की मौजूदा स्थिति के बारे में जानकारी देता है. साथ ही, कास्ट की स्थिति और कास्ट सेशन की स्थिति में बदलाव होने पर इवेंट ट्रिगर करता है.
  • CastSession ऑब्जेक्ट, सेशन को मैनेज करता है. यह सेशन की स्थिति की जानकारी देता है और इवेंट ट्रिगर करता है. जैसे, डिवाइस की आवाज़ में बदलाव, म्यूट की स्थिति, और ऐप्लिकेशन का मेटाडेटा.
  • कास्ट बटन एलिमेंट, जो एक सामान्य एचटीएमएल कस्टम एलिमेंट है. यह एचटीएमएल बटन को बेहतर बनाता है. अगर दिया गया कास्ट बटन काफ़ी नहीं है, तो कास्ट बटन को लागू करने के लिए, Cast की स्थिति का इस्तेमाल किया जा सकता है.
  • RemotePlayerController डेटा बाइंडिंग की सुविधा देता है, ताकि रिमोट प्लेयर को आसानी से लागू किया जा सके.

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

कास्ट बटन

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

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

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

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

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

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

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

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

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

<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) का इस्तेमाल करता है.

अगर डिफ़ॉल्ट मीडिया रिसीवर का इस्तेमाल किया जा रहा है, तो आपको रजिस्ट्रेशन करने की ज़रूरत नहीं है. इसके लिए, applicationID के बजाय, वेब सेंडर SDK टूल से पहले से तय किए गए कॉन्सटैंट का इस्तेमाल करें, जैसा कि यहां दिखाया गया है:

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

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

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

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

CastSession का इस्तेमाल, loadMedia(loadRequest) का इस्तेमाल करके, कनेक्ट किए गए कास्ट डिवाइस पर मीडिया लोड करने के लिए किया जा सकता है. सबसे पहले, contentId और contentType के साथ-साथ कॉन्टेंट से जुड़ी अन्य जानकारी का इस्तेमाल करके, MediaInfo बनाएं. इसके बाद, इससे एक 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 वाला तरीका, Promise दिखाएगा. इसका इस्तेमाल, सफल नतीजे के लिए ज़रूरी कार्रवाइयां करने के लिए किया जा सकता है. अगर Promise को अस्वीकार कर दिया जाता है, तो फ़ंक्शन आर्ग्युमेंट chrome.cast.ErrorCode होगा.

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

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

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

  • चलाएं/रोकें: 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>

मीडिया का स्टेटस

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

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

सेशन मैनेजमेंट की सुविधा कैसे काम करती है

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

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

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

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
    }
  });

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

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

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

पीछे जाएं
सेटअप
आगे बढ़ें
बेहतर सुविधाएं जोड़ें