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

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

वेब सेंडर 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)

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

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

ध्यान दें: स्टाइल और डिफ़ॉल्ट मीडिया रिसीवर की मदद से, एपीआई के साथ सिर्फ़ टेक्स्ट ट्रैक इस्तेमाल किए जा सकते हैं. ऑडियो और वीडियो ट्रैक के साथ काम करने के लिए, आपको एक कस्टम रिसीवर बनाना होगा.

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

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

ध्यान दें: लोड किए गए मौजूदा मीडिया से जुड़े ट्रैक की सूची को बदला नहीं जा सकता. अगर ज़रूरी हो, तो आपको MediaInfo ऑब्जेक्ट पर ट्रैक की जानकारी अपडेट करनी होगी और मीडिया को फिर से लोड करना होगा.

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

ज़्यादातर ऐप्लिकेशन के लिए, भेजने वाले की जगह पर प्रोग्रेस दिखाने वाले इंंडिकेटर के साथ वीडियो चलाने की जगह दिखाना ज़रूरी है. Cast API, कास्ट मीडिया प्रोटोकॉल का इस्तेमाल करता है. यह इस और अन्य स्थितियों के लिए, बैंडविथ के इस्तेमाल को ऑप्टिमाइज़ करता है. इससे आपको अपना स्टेटस सिंक करने की ज़रूरत नहीं होती. एपीआई का इस्तेमाल करके, मीडिया प्लेबैक की प्रोग्रेस इंडिकेटर को सही तरीके से लागू करने के लिए, 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() का इस्तेमाल करके sessionId को चालू CastSession पर पाया जा सकता है.

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

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) के लिए सेंडर ऐप्लिकेशन बना सकते हैं या रिसीवर ऐप्लिकेशन बना सकते हैं.