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

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

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

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