আপনার ওয়েব সেন্ডার অ্যাপে উন্নত ফিচার যোগ করা

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

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)

ট্র্যাক API ব্যবহার করা

ট্র্যাক, টেক্সট (সাবটাইটেল বা ক্যাপশন) অবজেক্ট অথবা অডিও বা ভিডিও স্ট্রিম অবজেক্ট হতে পারে। 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) বন্ধ করতে মিডিয়া রিলোড করার প্রয়োজন নেই। আগে চালু করা trackId নেই এমন activeTracksId অ্যারে পাঠালে টেক্সট ট্র্যাক বন্ধ হয়ে যায়।

টেক্সট ট্র্যাক স্টাইল করা হচ্ছে

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 পরিবর্তিত হলে, কানেক্ট করা সব প্রেরককে বিজ্ঞপ্তি পাঠানো হবে এবং বর্তমান মিডিয়া সেশনের সংশ্লিষ্ট প্রপার্টি, যেমন activeTrackIds ও textTrackStyle-এর MediaInfo ফিল্ড কলব্যাকে প্রেরকদের পাঠানো হবে। এই ক্ষেত্রে, রিসিভার SDK নতুন স্টাইলটি আগের স্টাইলের থেকে আলাদা কিনা তা যাচাই করে না এবং কানেক্ট করা সমস্ত প্রেরককে বিজ্ঞপ্তি পাঠায়।

অগ্রগতি সূচক

বেশিরভাগ অ্যাপের ক্ষেত্রে প্রেরকের উপর প্রোগ্রেস ইন্ডিকেটর সহ প্লেব্যাক লোকেশন দেখানো প্রয়োজন। Cast API, Cast মিডিয়া প্রোটোকল ব্যবহার করে, যা এই ও অন্যান্য পরিস্থিতির জন্য ব্যান্ডউইথ ব্যবহার অপ্টিমাইজ করে, তাই আপনাকে নিজের স্ট্যাটাস সিঙ্ক্রোনাইজেশন প্রয়োগ করতে হবে না। API ব্যবহার করে মিডিয়া প্লেব্যাকের জন্য প্রোগ্রেস ইন্ডিকেটর সঠিকভাবে প্রয়োগ করতে, CastVideos-chrome স্যাম্পেল অ্যাপ দেখুন।

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

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

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

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

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

আগে থেকে থাকা CastSession আবার চালু করতে, আপনি যে সেশনে যোগ দেওয়ার চেষ্টা করছেন সেটির sessionId সহ requestSessionById(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) অথবা রিসিভার অ্যাপ তৈরি করতে পারবেন।

পূর্ববর্তী
ইন্টিগ্রেট কাস্ট, ইন্টিগ্রেট কাস্ট