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

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

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

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

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

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

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

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) के लिए, ईमेल भेजने वाला ऐप्लिकेशन बनाने का विकल्प है. इसके अलावा, आपके पास ईमेल पाने वाला ऐप्लिकेशन बनाने का विकल्प भी है.