Android पर Chrome के लिए Google Cast

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

Android पर Chrome के नए वर्शन में, साइटों को Cast Web SDK का इस्तेमाल करके, Google Cast डिवाइसों पर कॉन्टेंट दिखाने की सुविधा मिलती है. इसका मतलब है कि अब Android या iOS पर Chrome के साथ वेब SDK का इस्तेमाल करके, Cast करने वाले ऐप्लिकेशन बनाए जा सकते हैं. इसके अलावा, डेस्कटॉप पर एक्सटेंशन का इस्तेमाल करके भी ऐसा किया जा सकता है. साथ ही, Android और iOS के लिए नेटिव Cast SDK का इस्तेमाल करके भी ऐप्लिकेशन बनाए जा सकते हैं. (पहले, Google Cast के ज़रिए वीडियो भेजने वाले ऐप्लिकेशन के लिए, Google Cast का Chrome एक्सटेंशन ज़रूरी था. इसलिए, Android पर सिर्फ़ नेटिव ऐप्लिकेशन से ही Cast डिवाइसों के साथ इंटरैक्ट किया जा सकता था.)

यहां वेब SDK टूल का इस्तेमाल करके, Cast करने की सुविधा देने वाला ऐप्लिकेशन बनाने के बारे में कम शब्दों में जानकारी दी गई है. ज़्यादा जानकारी के लिए, Chrome Sender ऐप्लिकेशन डेवलपमेंट गाइड देखें.

Cast का इस्तेमाल करने वाले सभी पेजों में, Cast लाइब्रेरी शामिल होनी चाहिए:

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

एपीआई की उपलब्धता को मैनेज करने और Cast सेशन को शुरू करने के लिए, कॉलबैक जोड़ें. पक्का करें कि एपीआई लोड होने से पहले हैंडलर जोड़ दिया जाए!:

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

अगर आपने खुद से बनाए गए और रजिस्टर किए गए कस्टम रिसीवर ऐप्लिकेशन के बजाय, डिफ़ॉल्ट स्टाइल वाले मीडिया रिसीवर ऐप्लिकेशन का इस्तेमाल किया है, तो इस तरह SessionRequest बनाया जा सकता है:

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

ऊपर दिया गया receiverListener कॉलबैक तब लागू होता है, जब एक या उससे ज़्यादा डिवाइस उपलब्ध होते हैं:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

जब आपका उपयोगकर्ता Cast आइकॉन पर क्लिक करता है, तो उपयोगकर्ता अनुभव से जुड़े दिशा-निर्देशों के मुताबिक, कास्ट सेशन लॉन्च करें:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

उपयोगकर्ता को डिवाइस पिकर दिखेगा:

कास्ट करने के लिए डिवाइस चुनने वाला डायलॉग.

रास्ते की जानकारी वाला डायलॉग तब दिखता है, जब पेज पहले से कनेक्ट हो और requestSession() को कॉल करता हो:

रास्ते की जानकारी को कास्ट करने के लिए डायलॉग बॉक्स.

कास्ट सेशन शुरू होने के बाद, चुने गए कास्ट डिवाइस के लिए मीडिया लोड किया जा सकता है. साथ ही, मीडिया चलाने से जुड़े इवेंट के लिए, किसी लिसनर को जोड़ा जा सकता है:

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

यहां currentMedia वैरिएबल एक chrome.cast.media.Media ऑब्जेक्ट है, जिसका इस्तेमाल वीडियो चलाने की सुविधा को कंट्रोल करने के लिए किया जा सकता है:

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

मीडिया चलने पर, चलाने/रोकने की सूचना दिखती है:

चलाने/रोकने की सूचना कास्ट करें.

अगर कोई मीडिया नहीं चल रहा है, तो सूचना में सिर्फ़ रोकें बटन होता है. इस बटन का इस्तेमाल करके कास्टिंग को रोका जा सकता है:

कास्टिंग बंद करने की सूचना.

chrome.cast.ApiConfig() के लिए sessionListener कॉलबैक (ऊपर देखें), आपके ऐप्लिकेशन को किसी मौजूदा Cast सेशन में शामिल होने या उसे मैनेज करने की सुविधा देता है:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

अगर Android पर Chrome, आपकी वेबसाइट से मीडिया को कास्ट करने की अनुमति देता है, लेकिन आपको इस सुविधा को बंद करना है, ताकि कास्ट करने का डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) आपके यूआई में रुकावट न डाले, तो disableRemotePlayback एट्रिब्यूट का इस्तेमाल करें. यह एट्रिब्यूट, Chrome 49 और उसके बाद के वर्शन में उपलब्ध है:

<video disableRemotePlayback src="..."></video>

Alt भेजने और पाने वाले डिवाइस

Cast Web SDK टूल की गाइड में, सैंपल ऐप्लिकेशन के लिंक और Cast की सुविधाओं के बारे में जानकारी दी गई है. जैसे, सेशन मैनेजमेंट, सबटाइटल और कैप्शन के लिए टेक्स्ट ट्रैक, और स्टेटस अपडेट.

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

रिमोट प्लेबैक एपीआई के साथ-साथ, प्रज़ेंटेशन एपीआई, सेकंड स्क्रीन वर्किंग ग्रुप का हिस्सा है. इसकी मदद से, वेब पेजों को वेब कॉन्टेंट दिखाने के लिए सेकंड स्क्रीन का इस्तेमाल करने की सुविधा मिलती है.

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

हम आपको इस सुविधा को लागू करने की प्रोसेस के बारे में अपडेट देते रहेंगे.

इस बीच, अगर आपको कोई गड़बड़ी मिलती है या आपको कोई सुविधा चाहिए, तो कृपया हमें बताएं: crbug.com/new.

ज़्यादा जानें