আপনার ওয়েব প্রেরক অ্যাপে কাস্ট SDK সংহত করুন

এই ডেভেলপার গাইডে বর্ণনা করা হয়েছে, কীভাবে Cast SDK ব্যবহার করে আপনার Web Sender অ্যাপে Google Cast সাপোর্ট যোগ করতে হয়।

পরিভাষা

মোবাইল ডিভাইস বা ব্রাউজারটি হলো প্রেরক , যা প্লেব্যাক নিয়ন্ত্রণ করে; গুগল কাস্ট ডিভাইসটি হলো প্রাপক , যা প্লেব্যাকের জন্য স্ক্রিনে বিষয়বস্তু প্রদর্শন করে।

ওয়েব সেন্ডার এসডিকে দুটি অংশ নিয়ে গঠিত: ফ্রেমওয়ার্ক এপিআই ( cast.framework ) এবং বেস এপিআই ( chrome.cast )। সাধারণত, আপনি অপেক্ষাকৃত সরল ও উচ্চ-স্তরের ফ্রেমওয়ার্ক এপিআই-তে কল করেন, যা পরবর্তীতে নিম্ন-স্তরের বেস এপিআই দ্বারা প্রক্রিয়াজাত করা হয়।

প্রেরক ফ্রেমওয়ার্ক বলতে ফ্রেমওয়ার্ক এপিআই, মডিউল এবং সংশ্লিষ্ট রিসোর্সসমূহকে বোঝায়, যা নিম্ন-স্তরের কার্যকারিতার জন্য একটি র‍্যাপার প্রদান করে। প্রেরক অ্যাপ বা গুগল কাস্ট ক্রোম অ্যাপ বলতে প্রেরক ডিভাইসের ক্রোম ব্রাউজারের ভেতরে চলমান একটি ওয়েব (এইচটিএমএল/জাভাস্ক্রিপ্ট) অ্যাপকে বোঝায়। একটি ওয়েব রিসিভার অ্যাপ বলতে ক্রোমকাস্ট বা গুগল কাস্ট ডিভাইসে চলমান একটি এইচটিএমএল/জাভাস্ক্রিপ্ট অ্যাপকে বোঝায়।

প্রেরক ফ্রেমওয়ার্কটি প্রেরক অ্যাপকে ইভেন্ট সম্পর্কে অবহিত করতে এবং কাস্ট অ্যাপের জীবনচক্রের বিভিন্ন অবস্থার মধ্যে রূপান্তর ঘটাতে একটি অ্যাসিঙ্ক্রোনাস কলব্যাক ডিজাইন ব্যবহার করে।

লাইব্রেরি লোড করুন

আপনার অ্যাপে গুগল কাস্ট-এর ফিচারগুলো প্রয়োগ করার জন্য, নিচে দেখানো অনুযায়ী গুগল কাস্ট ওয়েব সেন্ডার এসডিকে-এর অবস্থান জানা প্রয়োজন। ওয়েব সেন্ডার ফ্রেমওয়ার্ক এপিআই লোড করার জন্য ` loadCastFramework` ইউআরএল কোয়েরি প্যারামিটারটি যোগ করুন। আপনার অ্যাপের সমস্ত পেজে অবশ্যই নিম্নলিখিতভাবে লাইব্রেরিটিকে উল্লেখ করতে হবে:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

কাঠামো

ওয়েব সেন্ডার এসডিকে cast.framework. * নেমস্পেসটি ব্যবহার করে। এই নেমস্পেসটি নিম্নলিখিত বিষয়গুলোকে নির্দেশ করে:

  • এপিআই-তে অপারেশন আহ্বানকারী পদ্ধতি বা ফাংশন
  • এপিআই-তে লিসেনার ফাংশনগুলির জন্য ইভেন্ট লিসেনার

এই কাঠামোটি নিম্নলিখিত প্রধান উপাদানগুলো নিয়ে গঠিত:

  • CastContext হলো একটি সিঙ্গেলটন অবজেক্ট যা বর্তমান কাস্ট অবস্থা সম্পর্কে তথ্য প্রদান করে এবং কাস্ট অবস্থা ও কাস্ট সেশন অবস্থার পরিবর্তনের জন্য ইভেন্ট ট্রিগার করে।
  • CastSession অবজেক্টটি সেশন পরিচালনা করে — এটি অবস্থার তথ্য প্রদান করে এবং বিভিন্ন ইভেন্ট ট্রিগার করে, যেমন ডিভাইসের ভলিউমের পরিবর্তন, মিউট অবস্থা এবং অ্যাপ মেটাডেটা।
  • কাস্ট বাটন এলিমেন্ট হলো একটি সাধারণ এইচটিএমএল কাস্টম এলিমেন্ট যা এইচটিএমএল বাটনকে এক্সটেন্ড করে। যদি প্রদত্ত কাস্ট বাটনটি যথেষ্ট না হয়, তবে আপনি কাস্ট স্টেট ব্যবহার করে একটি কাস্ট বাটন ইমপ্লিমেন্ট করতে পারেন।
  • RemotePlayerController রিমোট প্লেয়ারের বাস্তবায়ন সহজ করার জন্য ডেটা বাইন্ডিং প্রদান করে।

নেমস্পেসটির সম্পূর্ণ বিবরণের জন্য গুগল কাস্ট ওয়েব সেন্ডার এপিআই রেফারেন্স পর্যালোচনা করুন।

কাস্ট বোতাম

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

<google-cast-launcher></google-cast-launcher>

বিকল্পভাবে, আপনি প্রোগ্রাম্যাটিকভাবে বাটনটি তৈরি করতে পারেন:

document.createElement("google-cast-launcher");

প্রয়োজন অনুযায়ী আপনি এলিমেন্টটিতে আকার বা অবস্থানের মতো যেকোনো অতিরিক্ত স্টাইলিং প্রয়োগ করতে পারেন। সংযুক্ত ওয়েব রিসিভার অবস্থার জন্য রঙ বেছে নিতে --connected-color অ্যাট্রিবিউট এবং সংযোগ বিচ্ছিন্ন অবস্থার জন্য --disconnected-color ব্যবহার করুন।

প্রারম্ভিকীকরণ

ফ্রেমওয়ার্ক এপিআই লোড করার পর, অ্যাপটি window.__onGCastApiAvailable হ্যান্ডলারটিকে কল করবে। আপনাকে নিশ্চিত করতে হবে যে অ্যাপটি সেন্ডার লাইব্রেরি লোড করার আগেই window এই হ্যান্ডলারটি সেট করে।

এই হ্যান্ডলারের মধ্যে, আপনি CastContext এর setOptions(options) মেথডটি কল করার মাধ্যমে Cast ইন্টারঅ্যাকশনটি শুরু করেন।

উদাহরণস্বরূপ:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

তারপর, আপনি নিম্নলিখিতভাবে API-টি ইনিশিয়ালাইজ করবেন:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

প্রথমে অ্যাপটি ফ্রেমওয়ার্ক দ্বারা প্রদত্ত CastContext অবজেক্টের সিঙ্গেলটন ইনস্ট্যান্সটি সংগ্রহ করে। এরপর এটি একটি CastOptions অবজেক্ট ব্যবহার করে setOptions(options) এর মাধ্যমে applicationID সেট করে।

আপনি যদি ডিফল্ট মিডিয়া রিসিভার ব্যবহার করেন, যার জন্য রেজিস্ট্রেশনের প্রয়োজন হয় না, তাহলে applicationID পরিবর্তে ওয়েব সেন্ডার এসডিকে দ্বারা পূর্বনির্ধারিত একটি কনস্ট্যান্ট ব্যবহার করবেন, যা নিচে দেখানো হলো:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

মিডিয়া নিয়ন্ত্রণ

একবার CastContext ইনিশিয়ালাইজ হয়ে গেলে, অ্যাপটি যেকোনো সময় getCurrentSession() ব্যবহার করে বর্তমান CastSession পেতে পারে।

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

loadMedia(loadRequest) ব্যবহার করে সংযুক্ত কাস্ট ডিভাইসে মিডিয়া লোড করার জন্য ` CastSession ব্যবহার করা যেতে পারে। প্রথমে, contentId এবং contentType পাশাপাশি কন্টেন্ট সম্পর্কিত অন্য যেকোনো তথ্য ব্যবহার করে একটি MediaInfo তৈরি করুন। তারপর, অনুরোধের জন্য সমস্ত প্রাসঙ্গিক তথ্য সেট করে এটি থেকে একটি ` LoadRequest তৈরি করুন। সবশেষে, আপনার CastSession এ loadMedia(loadRequest) কল করুন।

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

loadMedia মেথডটি একটি `Promise` রিটার্ন করবে, যা একটি সফল ফলাফলের জন্য প্রয়োজনীয় যেকোনো অপারেশন সম্পাদন করতে ব্যবহার করা যেতে পারে। যদি `Promise`টি রিজেক্ট হয়, তাহলে ফাংশন আর্গুমেন্টটি একটি chrome.cast.ErrorCode হবে।

আপনি RemotePlayer এ প্লেয়ারের স্টেট ভেরিয়েবলগুলো অ্যাক্সেস করতে পারেন। মিডিয়া ইভেন্ট কলব্যাক এবং কমান্ডসহ RemotePlayer এর সাথে সমস্ত ইন্টারঅ্যাকশন RemotePlayerController দ্বারা পরিচালিত হয়।

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController অ্যাপটিকে লোড করা মিডিয়ার প্লে, পজ, স্টপ এবং সিক-এর উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়।

  • প্লে/পজ: playerController.playOrPause();
  • STOP: playerController.stop();
  • SEEK: playerController.seek();

পলিমার বা অ্যাঙ্গুলারের মতো ডেটা বাইন্ডিং ফ্রেমওয়ার্কের সাথে রিমোট প্লেয়ার বাস্তবায়নের জন্য RemotePlayer এবং RemotePlayerController ব্যবহার করা যেতে পারে।

এখানে অ্যাঙ্গুলারের জন্য একটি কোড স্নিপেট দেওয়া হল: 

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

মিডিয়া স্ট্যাটাস

মিডিয়া প্লেব্যাকের সময় বিভিন্ন ইভেন্ট ঘটে, যেগুলো RemotePlayerController অবজেক্টে বিভিন্ন cast.framework.RemotePlayerEventType ইভেন্টের জন্য লিসেনার সেট করার মাধ্যমে ক্যাপচার করা যায়।

মিডিয়ার স্ট্যাটাস তথ্য পেতে cast.framework.RemotePlayerEventType .MEDIA_INFO_CHANGED ইভেন্টটি ব্যবহার করুন, যা প্লেব্যাক পরিবর্তিত হলে এবং CastSession.getMediaSession().media পরিবর্তিত হলে ট্রিগার হয়। 

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

যখন পজ, প্লে, রিজুম বা সিক-এর মতো ইভেন্ট ঘটে, তখন অ্যাপটিকে সে অনুযায়ী কাজ করতে হবে এবং কাস্ট ডিভাইসের ওয়েব রিসিভার অ্যাপের সাথে নিজেকে সিঙ্ক্রোনাইজ করতে হবে। আরও তথ্যের জন্য স্ট্যাটাস আপডেট দেখুন।

সেশন ম্যানেজমেন্ট কীভাবে কাজ করে

কাস্ট এসডিকে (Cast SDK) কাস্ট সেশনের ধারণাটি প্রবর্তন করেছে, যা স্থাপন করার জন্য একটি ডিভাইসের সাথে সংযোগ স্থাপন, একটি ওয়েব রিসিভার অ্যাপ চালু করা (বা তাতে যোগদান করা), সেই অ্যাপের সাথে সংযোগ স্থাপন এবং একটি মিডিয়া কন্ট্রোল চ্যানেল ইনিশিয়ালাইজ করার ধাপগুলো একত্রিত করা হয়। কাস্ট সেশন এবং ওয়েব রিসিভারের জীবনচক্র সম্পর্কে আরও তথ্যের জন্য ওয়েব রিসিভার অ্যাপ্লিকেশন জীবনচক্র নির্দেশিকাটি দেখুন।

সেশনগুলি CastContext ক্লাস দ্বারা পরিচালিত হয়, যা আপনার অ্যাপ cast.framework.CastContext.getInstance() এর মাধ্যমে পেতে পারে। স্বতন্ত্র সেশনগুলি Session ক্লাসের সাবক্লাস দ্বারা প্রতিনিধিত্ব করা হয়। উদাহরণস্বরূপ, CastSession Cast ডিভাইসগুলির সেশনগুলিকে প্রতিনিধিত্ব করে। আপনার অ্যাপ CastContext.getCurrentSession() এর মাধ্যমে বর্তমানে সক্রিয় Cast সেশনটি অ্যাক্সেস করতে পারে।

সেশনের অবস্থা নিরীক্ষণ করতে, CastContext এ CastContextEventType .SESSION_STATE_CHANGED ইভেন্ট টাইপের জন্য একটি লিসেনার যোগ করুন। 

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

সংযোগ বিচ্ছিন্ন হওয়ার ক্ষেত্রে, যেমন যখন ব্যবহারকারী কাস্ট ডায়ালগ থেকে "স্টপ কাস্টিং" বোতামে ক্লিক করেন, তখন আপনি আপনার লিসেনারে RemotePlayerEventType .IS_CONNECTED_CHANGED ইভেন্ট টাইপের জন্য একটি লিসেনার যোগ করতে পারেন। আপনার লিসেনারে পরীক্ষা করে দেখুন RemotePlayer সংযোগ বিচ্ছিন্ন হয়েছে কিনা। যদি হয়ে থাকে, তবে প্রয়োজন অনুযায়ী লোকাল প্লেয়ারের স্টেট আপডেট করুন। উদাহরণস্বরূপ: 

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

যদিও ব্যবহারকারী ফ্রেমওয়ার্কের কাস্ট বাটনের মাধ্যমে সরাসরি কাস্ট সমাপ্তি নিয়ন্ত্রণ করতে পারেন, প্রেরক নিজেই বর্তমান CastSession অবজেক্টটি ব্যবহার করে কাস্টিং বন্ধ করতে পারে। 

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

প্রবাহ স্থানান্তর

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

স্ট্রিম ট্রান্সফারের সময় নতুন গন্তব্য ডিভাইস পেতে, cast.framework.SessionState ইভেন্টটি কল .SESSION_RESUMED হলে CastSession#getCastDevice() কল করুন।

আরও তথ্যের জন্য ওয়েব রিসিভারে স্ট্রিম ট্রান্সফার দেখুন।

পূর্ববর্তী
সেটআপ
পরবর্তী
অ্যাডভান্সড ফিচার যোগ করুন, অ্যাডভান্সড ফিচার যোগ করুন