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

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

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

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

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

ওয়েবে, BreakClip এবং Break ব্যবহার করে একটি load কমান্ডে 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)

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

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

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

দ্রষ্টব্য: বর্তমানে লোড হওয়া মিডিয়ার সাথে সম্পর্কিত ট্র্যাকগুলির তালিকা পরিবর্তন করা যাবে না। প্রয়োজনে, আপনাকে MediaInfo অবজেক্টে ট্র্যাকগুলির তথ্য আপডেট করতে হবে এবং মিডিয়াটি পুনরায় লোড করতে হবে।

অগ্রগতি নির্দেশক

বেশিরভাগ অ্যাপের জন্য প্রেরকের উপর একটি অগ্রগতি নির্দেশক সহ প্লেব্যাক অবস্থান দেখানো একটি আবশ্যকতা। কাস্ট API গুলি কাস্ট মিডিয়া প্রোটোকল ব্যবহার করে, যা এই এবং অন্যান্য পরিস্থিতিতে ব্যান্ডউইথ খরচ অপ্টিমাইজ করে, তাই আপনাকে আপনার নিজস্ব স্ট্যাটাস সিঙ্ক্রোনাইজেশন বাস্তবায়ন করতে হবে না। 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();
  }
});

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

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