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

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

शब्दावली

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

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

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

सेंडर फ़्रेमवर्क, भेजने वाले ऐप्लिकेशन को इवेंट की जानकारी देने और 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.* namespace का इस्तेमाल करता है. नेमस्पेस से यह जानकारी मिलती है:

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

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

  • CastContext एक सिंगलटन ऑब्जेक्ट है, जो कास्ट की मौजूदा स्थिति के बारे में जानकारी देता है. यह कास्ट के स्टेटस और कास्ट सेशन की स्थिति में होने वाले बदलावों के लिए इवेंट ट्रिगर करता है.
  • 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) तरीके को कॉल करके कास्ट इंटरैक्शन शुरू किया जा सकता है.

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

<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 का इस्तेमाल, 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 वाला तरीका एक प्रॉमिस दिखाएगा, जिसका इस्तेमाल सही नतीजे पाने के लिए कोई भी ज़रूरी कार्रवाई करने में किया जा सकता है. अगर प्रॉमिस अस्वीकार कर दिया जाता है, तो फ़ंक्शन आर्ग्युमेंट एक chrome.cast.ErrorCode होगा.

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

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

RemotePlayerController, ऐप्लिकेशन को लोड किए गए मीडिया के लिए 'चलाएं', 'रोकें', 'रोकें', और 'सीईके' जैसी मीडिया को पूरी तरह से कंट्रोल करता है.

  • चलाएं/रोकें: playerController.playOrPause();
  • बंद करें: playerController.stop();
  • खोजे जाने की संख्या: playerController.seek();

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

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

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

सेशन की स्थिति पर नज़र रखने के लिए, 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.framework.SessionState.SESSION_RESUMED इवेंट के कॉल आने पर CastSession#getCastDevice() पर कॉल करें.

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

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