আপনার ওয়েব প্রেরক অ্যাপে উন্নত বৈশিষ্ট্য যোগ করুন

বিজ্ঞাপন বিরতি

ওয়েব সেন্ডার এসডিকে একটি নির্দিষ্ট মিডিয়া স্ট্রিমের মধ্যে অ্যাড ব্রেক এবং সহযোগী বিজ্ঞাপনের জন্য সমর্থন প্রদান করে।

অ্যাড ব্রেক কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য ওয়েব রিসিভার অ্যাড ব্রেক ওভারভিউ দেখুন।

যদিও প্রেরক এবং প্রাপক উভয় ক্ষেত্রেই বিরতি নির্দিষ্ট করা যায়, প্ল্যাটফর্ম জুড়ে সামঞ্জস্যপূর্ণ আচরণ বজায় রাখার জন্য ওয়েব রিসিভার এবং অ্যান্ড্রয়েড টিভি রিসিভারে বিরতি নির্দিষ্ট করার পরামর্শ দেওয়া হয়।

ওয়েবে, লোড কমান্ডে BreakClip এবং Break ব্যবহার করে বিজ্ঞাপন বিরতি (Ad Breaks) নির্দিষ্ট করুন।

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);

আপনি কলব্যাকের ফলাফলের মাধ্যমে অনুরোধের অবস্থা (সফল বা ত্রুটিপূর্ণ) ট্র্যাক করতে পারেন এবং সেই অনুযায়ী মূল প্রেরককে আপডেট করতে পারেন।

অ্যাপ্লিকেশনগুলোতে ব্যবহারকারীদের টেক্সট ট্র্যাকের স্টাইল আপডেট করার সুযোগ থাকা উচিত, যা সিস্টেম প্রদত্ত সেটিংস ব্যবহার করে অথবা অ্যাপ্লিকেশনটি নিজেই করতে পারবে।

আপনি নিম্নলিখিত টেক্সট ট্র্যাক স্টাইল উপাদানগুলিকে স্টাইল করতে পারেন:

• অগ্রভাগের (টেক্সট) রঙ এবং অস্বচ্ছতা
• পটভূমির রঙ এবং অস্বচ্ছতা
• প্রান্তের ধরণ
• প্রান্তের রঙ
• ফন্ট স্কেল
• ফন্ট পরিবার
• ফন্ট স্টাইল

উদাহরণস্বরূপ, টেক্সটের রঙ লাল এবং অপাসিটি ৭৫% এ নিম্নরূপে সেট করুন:

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
}

ভলিউম নিয়ন্ত্রণের জন্য প্রেরক অ্যাপটিকে নিম্নলিখিত নির্দেশিকাগুলো মেনে চলতে হবে:

• প্রেরক অ্যাপ্লিকেশনটিকে অবশ্যই প্রাপকের সাথে সিঙ্ক্রোনাইজ করতে হবে, যাতে প্রেরকের UI সর্বদা প্রাপকের ভলিউম অনুযায়ী দেখায়। প্রেরকের ভলিউম বজায় রাখতে 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 মিডিয়া প্রোটোকল ব্যবহার করে, যা এই এবং অন্যান্য ক্ষেত্রে ব্যান্ডউইথের ব্যবহার অপ্টিমাইজ করে, তাই আপনার নিজস্ব স্ট্যাটাস সিঙ্ক্রোনাইজেশন প্রয়োগ করার প্রয়োজন নেই। API ব্যবহার করে মিডিয়া প্লেব্যাকের জন্য অগ্রগতি সূচকের সঠিক বাস্তবায়নের জন্য, CastVideos-chrome স্যাম্পল অ্যাপটি দেখুন।

CORS প্রয়োজনীয়তা

অ্যাডাপ্টিভ মিডিয়া স্ট্রিমিংয়ের জন্য গুগল কাস্টে CORS হেডার থাকা আবশ্যক, কিন্তু সাধারণ mp4 মিডিয়া স্ট্রিমেও CORS প্রয়োজন হয় যদি সেগুলিতে ট্র্যাক অন্তর্ভুক্ত থাকে। আপনি যদি কোনো মিডিয়ার জন্য ট্র্যাক চালু করতে চান, তবে আপনাকে আপনার ট্র্যাক স্ট্রিম এবং মিডিয়া স্ট্রিম উভয়ের জন্যই CORS চালু করতে হবে। সুতরাং, যদি আপনার সার্ভারে সাধারণ mp4 মিডিয়ার জন্য CORS হেডার উপলব্ধ না থাকে এবং আপনি এরপর একটি সাধারণ সাবটাইটেল ট্র্যাক যোগ করেন, তাহলে আপনার সার্ভার আপডেট করে উপযুক্ত CORS হেডার অন্তর্ভুক্ত না করা পর্যন্ত আপনি আপনার মিডিয়া স্ট্রিম করতে পারবেন না।

আপনার নিম্নলিখিত হেডারগুলো প্রয়োজন: Content-Type , Accept-Encoding , এবং Range । উল্লেখ্য যে, শেষের দুটি হেডার, Accept-Encoding এবং Range , হলো অতিরিক্ত হেডার যা আপনার আগে প্রয়োজন নাও হতে পারে।

Access-Control-Allow-Origin হেডারের জন্য ওয়াইল্ডকার্ড "*" ব্যবহার করা যাবে না। যদি পেজটিতে সুরক্ষিত মিডিয়া কন্টেন্ট থাকে, তবে ওয়াইল্ডকার্ডের পরিবর্তে অবশ্যই একটি ডোমেইন ব্যবহার করতে হবে।

ওয়েব পেজ রিলোড না করে সেশন পুনরায় শুরু করা

একটি চলমান CastSession পুনরায় চালু করতে, আপনি যে সেশনে যোগ দিতে চাইছেন তার sessionId সহ requestSessionById(sessionId) ব্যবহার করুন।

loadMedia() কল করার পর, সক্রিয় CastSession এ getSessionId() ব্যবহার করে 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();
  }
});

পরবর্তী পদক্ষেপ

আপনার ওয়েব সেন্ডার অ্যাপে যে ফিচারগুলো যোগ করা যায়, তা এখানেই শেষ। আপনি এখন অন্য কোনো প্ল্যাটফর্মের ( অ্যান্ড্রয়েড বা আইওএস ) জন্য একটি সেন্ডার অ্যাপ, অথবা একটি রিসিভার অ্যাপ তৈরি করতে পারেন।