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

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

ওয়েব প্রেরক SDK একটি প্রদত্ত মিডিয়া স্ট্রীমের মধ্যে বিজ্ঞাপন বিরতি এবং সহচর বিজ্ঞাপনগুলির জন্য সমর্থন প্রদান করে৷

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

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

ওয়েবে, 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]; (আগে দেখানো হয়েছে) তাই এটি শুধুমাত্র অডিও ট্র্যাক অন্তর্ভুক্ত করে।
  • 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
}

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

  • প্রেরকের অ্যাপ্লিকেশনটিকে অবশ্যই রিসিভারের সাথে সিঙ্ক্রোনাইজ করতে হবে যাতে প্রেরকের 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 যাচাই করে না যে নতুন শৈলীটি আগেরটির থেকে আলাদা কিনা এবং নির্বিশেষে সমস্ত সংযুক্ত প্রেরককে অবহিত করে৷

অগ্রগতি সূচক

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

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