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

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

शब्दावली

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

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

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

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

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

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

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

फ़्रेमवर्क

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

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

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

• 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 ऑब्जेक्ट की जानकारी मिलती है. इसके बाद, यह setOptions(options) इसका इस्तेमाल करके CastOptions ऑब्जेक्ट applicationID सेट करने के लिए.

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

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

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

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

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

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

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

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

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

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

यहां जाएं: वेब रिसीवर पर स्ट्रीम ट्रांसफ़र करना हमारा वीडियो देखें.