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

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

शब्दावली

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

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

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

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

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

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

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

फ़्रेमवर्क

वेब सेंडर SDK टूल, cast.framework.* नेमस्पेस का इस्तेमाल करता है. नेमस्पेस इनके बारे में बताता है:

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

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

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

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

CastSession का इस्तेमाल, कनेक्ट किए गए Cast डिवाइस पर मीडिया लोड करने के लिए किया जा सकता है. इसके लिए, 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 से, ऐप्लिकेशन को लोड किए गए मीडिया को प्ले, रोकें, बंद करें, और आगे-पीछे ले जाने का पूरा कंट्रोल मिलता है.

  • चलाएं/रोकें: 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 सेशन के कॉन्सेप्ट को पेश करता है. इसे सेट अप करने के लिए, किसी डिवाइस से कनेक्ट करना, वेब रिसीवर ऐप्लिकेशन को लॉन्च करना (या उसमें शामिल होना), उस ऐप्लिकेशन से कनेक्ट करना, और मीडिया कंट्रोल चैनल को शुरू करना ज़रूरी है. कास्ट सेशन और वेब रिसीवर के लाइफ़साइकल के बारे में ज़्यादा जानने के लिए, वेब रिसीवर के ऐप्लिकेशन लाइफ़साइकल की गाइड देखें.

सेशन को क्लास CastContext मैनेज करता है. इसे आपका ऐप्लिकेशन cast.framework.CastContext.getInstance() के ज़रिए वापस पा सकता है. अलग-अलग सेशन को क्लास के सबक्लास Session से दिखाया जाता है. उदाहरण के लिए, CastSession कास्ट डिवाइसों पर, Google खाते में की गई गतिविधियों को दिखाता है. आपका ऐप्लिकेशन, 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;
    }
  })

डिसकनेक्ट होने पर, जैसे कि जब उपयोगकर्ता कास्ट डायलॉग से "कास्ट करना बंद करें" बटन पर क्लिक करता है, तो अपने लिसनर में 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() को कॉल करें.

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

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