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

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

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

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

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

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

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

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

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

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

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

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

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

हमारा सुझाव है कि आप यह तरीका अपनाएं:

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