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

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

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)

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

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

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 मीडिया स्ट्रीम में ट्रैक शामिल हैं, तो उनके लिए भी सीओआरएस की ज़रूरत होती है. अगर आपको किसी मीडिया के लिए ट्रैक चालू करने हैं, तो आपको ट्रैक स्ट्रीम और मीडिया स्ट्रीम, दोनों के लिए सीओआरएस चालू करना होगा. इसलिए, अगर आपके सर्वर पर आपके सामान्य MP4 मीडिया के लिए CORS हेडर उपलब्ध नहीं हैं और फिर आप एक सामान्य उपशीर्षक ट्रैक जोड़ते हैं, तो आप अपने मीडिया को तब तक स्ट्रीम नहीं कर पाएंगे, जब तक आप अपने सर्वर को उचित CORS हेडर शामिल करने के लिए अपडेट नहीं करते.

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

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

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

किसी मौजूदा CastSession को फिर से शुरू करने के लिए, requestSessionById(sessionId) का इस्तेमाल करें. साथ ही, उस सेशन का 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) के लिए सेंडर ऐप्लिकेशन बनाया जा सकता है या रिसीवर ऐप्लिकेशन बनाया जा सकता है.

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