अपने वेब सेंडर ऐप्लिकेशन में बेहतर सुविधाएं जोड़ें

विज्ञापन के लिए ब्रेक

Web Sender SDK, किसी मीडिया स्ट्रीम में विज्ञापन ब्रेक और कंपैनियन विज्ञापनों के लिए सहायता देता है.

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

ब्रेक को सेंडर और रिसीवर, दोनों पर सेट किया जा सकता है. हालांकि, हमारा सुझाव है कि इन्हें वेब रिसीवर और Android TV रिसीवर पर सेट किया जाए, ताकि सभी प्लैटफ़ॉर्म पर एक जैसा व्यवहार बना रहे.

वेब पर, लोड कमांड में विज्ञापन के लिए ब्रेक तय करने के लिए, BreakClip और Break का इस्तेमाल करें:

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

ट्रैक के एपीआई का इस्तेमाल करना

ट्रैक, टेक्स्ट (सबटाइटल या कैप्शन) ऑब्जेक्ट या ऑडियो या वीडियो स्ट्रीम ऑब्जेक्ट हो सकता है. Tracks API की मदद से, अपने ऐप्लिकेशन में इन ऑब्जेक्ट के साथ काम किया जा सकता है.

Track ऑब्जेक्ट, एसडीके में ट्रैक को दिखाता है. किसी ट्रैक को इस तरह कॉन्फ़िगर किया जा सकता है और उसे यूनीक आईडी असाइन किया जा सकता है:

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

किसी मीडिया आइटम में एक से ज़्यादा ट्रैक हो सकते हैं. उदाहरण के लिए, इसमें एक से ज़्यादा सबटाइटल (हर सबटाइटल अलग-अलग भाषा में) या एक से ज़्यादा वैकल्पिक ऑडियो स्ट्रीम (अलग-अलग भाषाओं में) हो सकती हैं.

MediaInfo वह क्लास है जो मीडिया आइटम को मॉडल करती है. Track ऑब्जेक्ट के कलेक्शन को किसी मीडिया आइटम से असोसिएट करने के लिए, उसकी tracks प्रॉपर्टी को अपडेट करें. मीडिया को रिसीवर पर लोड करने से पहले, यह असोसिएशन बनाना ज़रूरी है:

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

मीडिया activeTrackIds अनुरोध में, चालू ट्रैक सेट किए जा सकते हैं.

मीडिया आइटम लोड होने के बाद, मीडिया आइटम से जुड़े एक या उससे ज़्यादा ट्रैक भी चालू किए जा सकते हैं. इसके लिए, EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) को कॉल करें और opt_activeTrackIds में उन ट्रैक के आईडी पास करें जिन्हें चालू करना है. ध्यान दें, दोनों पैरामीटर वैकल्पिक हैं. आपके पास यह चुनने का विकल्प है कि आपको कौनसे पैरामीटर सेट करने हैं. जैसे, ऐक्टिव ट्रैक या स्टाइल. उदाहरण के लिए, यहां फ़्रेंच सबटाइटल (2) और फ़्रेंच ऑडियो (3) चालू करने का तरीका बताया गया है:

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

मौजूदा मीडिया से सभी ऑडियो या वीडियो ट्रैक हटाने के लिए, बस mediaInfo.tracks=null (एक खाली कलेक्शन) सेट करें और मीडिया को फिर से लोड करें.

मौजूदा मीडिया से सभी टेक्स्ट ट्रैक हटाने के लिए (उदाहरण के लिए, सबटाइटल बंद करना), इनमें से कोई एक काम करें:

  • var activeTrackIds = [2, 3]; (पहले दिखाया गया) को अपडेट करें, ताकि इसमें सिर्फ़ [3] यानी ऑडियो ट्रैक शामिल हो.
  • mediaInfo.tracks=null सेट करें. ध्यान दें कि टेक्स्ट कैप्शन (track.hidden) बंद करने के लिए, मीडिया को फिर से लोड करना ज़रूरी नहीं है. activeTracksId ऐसा ऐरे भेजने पर टेक्स्ट ट्रैक बंद हो जाता है जिसमें पहले से चालू किया गया trackId शामिल नहीं होता.

टेक्स्ट ट्रैक को स्टाइल करना

TextTrackStyle वह ऑब्जेक्ट है जिसमें टेक्स्ट ट्रैक की स्टाइलिंग की जानकारी शामिल होती है. TextTrackStyle ऑब्जेक्ट बनाने या मौजूदा ऑब्जेक्ट को अपडेट करने के बाद, उसे फ़िलहाल चल रहे मीडिया आइटम पर लागू किया जा सकता है. इसके लिए, उसके editTrackInfo तरीके को इस तरह कॉल करें:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

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

ऐप्लिकेशन में, लोगों को टेक्स्ट ट्रैक की स्टाइल अपडेट करने की सुविधा मिलनी चाहिए. इसके लिए, सिस्टम की सेटिंग का इस्तेमाल किया जा सकता है या ऐप्लिकेशन में ही सेटिंग दी जा सकती है.

टेक्स्ट ट्रैक की स्टाइल से जुड़े इन एलिमेंट में बदलाव किया जा सकता है:

  • फ़ोरग्राउंड (टेक्स्ट) का रंग और ओपैसिटी
  • बैकग्राउंड का रंग और ओपैसिटी
  • किनारे का प्रकार
  • किनारे का रंग
  • फ़ॉन्ट स्केल
  • फ़ॉन्ट परिवार
  • फ़ॉन्ट का स्टाइल

उदाहरण के लिए, टेक्स्ट के रंग को लाल और ओपैसिटी को 75% पर सेट करने के लिए, यह तरीका अपनाएं:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

आवाज़ कंट्रोल करें

आवाज़ को कम या ज़्यादा करने के लिए, RemotePlayer और RemotePlayerController का इस्तेमाल किया जा सकता है.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

आवाज़ को कंट्रोल करने के लिए, भेजने वाले ऐप्लिकेशन को इन दिशा-निर्देशों का पालन करना चाहिए:

  • भेजने वाले ऐप्लिकेशन को, पाने वाले ऐप्लिकेशन के साथ सिंक करना होगा, ताकि भेजने वाले का यूज़र इंटरफ़ेस (यूआई), पाने वाले के हिसाब से वॉल्यूम की जानकारी दे सके. सेंडर के डिवाइस पर आवाज़ को बनाए रखने के लिए, RemotePlayerEventType.VOLUME_LEVEL_CHANGED और RemotePlayerEventType.IS_MUTED_CHANGED कॉलबैक का इस्तेमाल करें. ज़्यादा जानकारी के लिए, स्टेटस अपडेट देखें.
  • सेंडर ऐप्लिकेशन को वॉल्यूम का लेवल, पहले से तय किए गए किसी खास लेवल पर सेट नहीं करना चाहिए. इसके अलावा, जब ऐप्लिकेशन रिसीवर पर लोड होता है, तब उसे वॉल्यूम का लेवल, सेंडर डिवाइस के रिंगर/मीडिया वॉल्यूम पर भी सेट नहीं करना चाहिए.

डिज़ाइन चेकलिस्ट में भेजने वाले के लिए वॉल्यूम कंट्रोल देखें.

मीडिया मैसेज पाने वाले व्यक्ति को मैसेज भेजना

Media Messages को भेजने वाले से लेकर पाने वाले तक भेजा जा सकता है. उदाहरण के लिए, किसी व्यक्ति को SKIP_AD मैसेज भेजने के लिए:

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

चैनल से जुड़े अपडेट

जब एक ही ईमेल पते पर कई ईमेल पते कनेक्ट होते हैं, तो हर ईमेल पते को ईमेल पते में हुए बदलावों के बारे में पता होना चाहिए. भले ही, वे बदलाव किसी दूसरे ईमेल पते से किए गए हों.

इसके लिए, आपके ऐप्लिकेशन को RemotePlayerController पर सभी ज़रूरी लिसनर रजिस्टर करने चाहिए. अगर मौजूदा मीडिया के TextTrackStyle में बदलाव होता है, तो कनेक्ट किए गए सभी सेंडर को इसकी सूचना दी जाएगी. साथ ही, मौजूदा मीडिया सेशन की मिलती-जुलती प्रॉपर्टी, जैसे कि MediaInfo फ़ील्ड के activeTrackIds और textTrackStyle, सेंडर को कॉलबैक में भेजी जाएंगी. इस मामले में, रिसीवर SDK यह पुष्टि नहीं करता कि नई स्टाइल पिछली स्टाइल से अलग है या नहीं. साथ ही, यह कनेक्ट किए गए सभी सेंडर को सूचना देता है.

प्रोग्रेस दिखाने वाला इंडिकेटर

ज़्यादातर ऐप्लिकेशन के लिए, सेंडर पर प्रोग्रेस इंडिकेटर के साथ प्लेबैक की जगह दिखाना ज़रूरी है. Cast API, Cast मीडिया प्रोटोकॉल का इस्तेमाल करते हैं. यह प्रोटोकॉल, इस और अन्य स्थितियों के लिए बैंडविथ के इस्तेमाल को ऑप्टिमाइज़ करता है. इसलिए, आपको स्टेटस सिंक करने की सुविधा को लागू करने की ज़रूरत नहीं है. एपीआई का इस्तेमाल करके मीडिया चलाने के लिए, प्रोग्रेस इंडिकेटर को सही तरीके से लागू करने के लिए, CastVideos-chrome सैंपल ऐप्लिकेशन देखें.

सीओआरएस से जुड़ी ज़रूरी शर्तें

अनुकूलित मीडिया स्ट्रीमिंग के लिए, Google Cast को सीओआरएस हेडर की ज़रूरत होती है. हालांकि, अगर सामान्य mp4 मीडिया स्ट्रीम में ट्रैक शामिल हैं, तो उनके लिए भी सीओआरएस की ज़रूरत होती है. अगर आपको किसी मीडिया के लिए ट्रैक चालू करने हैं, तो आपको अपनी ट्रैक स्ट्रीम और मीडिया स्ट्रीम, दोनों के लिए CORS चालू करना होगा. इसलिए, अगर आपके सर्वर पर मौजूद सामान्य mp4 मीडिया के लिए सीओआरएस हेडर उपलब्ध नहीं हैं और आपने सामान्य सबटाइटल ट्रैक जोड़ा है, तो आपको अपना मीडिया स्ट्रीम करने की अनुमति नहीं मिलेगी. इसके लिए, आपको अपने सर्वर को अपडेट करके, सही सीओआरएस हेडर शामिल करने होंगे.

आपको इन हेडर की ज़रूरत होगी: Content-Type,Accept-Encoding, और Range. ध्यान दें कि आखिरी दो हेडर, Accept-Encoding और Range, अतिरिक्त हेडर हैं. ऐसा हो सकता है कि आपको इनकी ज़रूरत पहले न पड़ी हो.

Access-Control-Allow-Origin हेडर के लिए, वाइल्डकार्ड "*" का इस्तेमाल नहीं किया जा सकता. अगर पेज पर सुरक्षित मीडिया कॉन्टेंट है, तो उसे वाइल्डकार्ड के बजाय किसी डोमेन का इस्तेमाल करना चाहिए.

वेब पेज को फिर से लोड किए बिना सेशन को फिर से शुरू करना

किसी मौजूदा CastSession को फिर से शुरू करने के लिए, उस सेशन के sessionId के साथ requestSessionById(sessionId) का इस्तेमाल करें जिसमें आपको शामिल होना है.

loadMedia() कॉल करने के बाद, getSessionId() का इस्तेमाल करके, चालू CastSession पर sessionId देखा जा सकता है.

हमारा सुझाव है कि आप:

  1. सेशन शुरू करने के लिए loadMedia() कॉल करें
  2. sessionId को लोकल तौर पर सेव करना
  3. ज़रूरत पड़ने पर, requestSessionById(sessionId) का इस्तेमाल करके सेशन में फिर से शामिल होना
let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

अगले चरण

यहां उन सुविधाओं के बारे में बताया गया है जिन्हें वेब सेंडर ऐप्लिकेशन में जोड़ा जा सकता है. अब Android या iOS जैसे किसी दूसरे प्लैटफ़ॉर्म के लिए सेंडर ऐप्लिकेशन बनाया जा सकता है. इसके अलावा, रिसीवर ऐप्लिकेशन भी बनाया जा सकता है.

पीछे जाएं
कास्ट को जोड़ें