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

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

शब्दावली

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

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

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

कास्ट बटन

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

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

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

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

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

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

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

इस हैंडलर में, setOptions(options) वाले 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 ऑब्जेक्ट के सिंगलटन इंस्टेंस को वापस लाता है. इसके बाद, यह CastOptions ऑब्जेक्ट का इस्तेमाल करके, applicationID को सेट करने के लिए 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 का इस्तेमाल 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 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 ऐप्लिकेशन या स्मार्ट डिसप्ले का इस्तेमाल करना होगा. मीडिया एक डिवाइस (सोर्स) पर चलना बंद हो जाता है और दूसरे डिवाइस (डेस्टिनेशन) पर चलता रहता है. नए फ़र्मवेयर वाला कोई भी कास्ट डिवाइस, स्ट्रीम ट्रांसफ़र में सोर्स या डेस्टिनेशन के तौर पर काम कर सकता है.

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

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