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

এই ডেভেলপার নির্দেশিকাটি বর্ণনা করে কিভাবে Cast SDK ব্যবহার করে আপনার ওয়েব সেন্ডার অ্যাপে Google Cast সাপোর্ট যোগ করবেন।

দ্রষ্টব্য: আমরা আপনাকে নিম্নলিখিতগুলি চেষ্টা করার পরামর্শ দিচ্ছি:

• কাস্ট ওয়েব সেন্ডার কোডল্যাব টিউটোরিয়াল - ধাপে ধাপে শিখুন কিভাবে একটি বিদ্যমান ওয়েব ভিডিও অ্যাপকে Google Cast ডিভাইসে কন্টেন্ট চালানোর জন্য পরিবর্তন করতে হয়।
• CastVideos-chrome নমুনা অ্যাপ (GitHub) - এই রেফারেন্স নমুনা অ্যাপটি চালান, নেভিগেট করুন এবং দেখুন যা UX নির্দেশিকা এবং ডিজাইন চেকলিস্ট মেনে চলে।

পরিভাষা

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

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

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

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

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

আপনার অ্যাপটি Google Cast এর বৈশিষ্ট্যগুলি বাস্তবায়নের জন্য, নীচে দেখানো Google Cast Web Sender SDK এর অবস্থান জানতে হবে। Web Sender Framework API লোড করার জন্য loadCastFramework URL query প্যারামিটারটিও যোগ করুন। আপনার অ্যাপের সমস্ত পৃষ্ঠাগুলিকে নিম্নরূপ লাইব্রেরিতে উল্লেখ করতে হবে:

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

কাঠামো

ওয়েব সেন্ডার SDK cast.framework ব্যবহার করে। * নামস্থান। নামস্থান নিম্নলিখিতগুলি উপস্থাপন করে:

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

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

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

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

কাস্ট বোতাম

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

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

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

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

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

আরম্ভকরণ

ফ্রেমওয়ার্ক API লোড করার পর, অ্যাপটি হ্যান্ডলার 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 অবজেক্টের সিঙ্গেলটন ইনস্ট্যান্স পুনরুদ্ধার করে। তারপর এটি applicationID সেট করার জন্য CastOptions অবজেক্ট ব্যবহার করে setOptions(options) ব্যবহার করে।

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

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

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

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

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

CastSession ব্যবহার করে loadMedia(loadRequest) ব্যবহার করে সংযুক্ত Cast ডিভাইসে মিডিয়া লোড করা যেতে পারে। প্রথমে, 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 পদ্ধতিটি একটি প্রতিশ্রুতি প্রদান করবে যা সফল ফলাফলের জন্য প্রয়োজনীয় যেকোনো ক্রিয়াকলাপ সম্পাদন করতে ব্যবহার করা যেতে পারে। যদি প্রতিশ্রুতি প্রত্যাখ্যান করা হয়, তাহলে ফাংশন আর্গুমেন্টটি হবে chrome.cast.ErrorCode ।

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

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

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

• প্লে/পজ: playerController.playOrPause();
• স্টপ: playerController.stop();
• অনুসন্ধান: playerController.seek();

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

এখানে Angular এর জন্য একটি কোড স্নিপেট রয়েছে:

<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;
  });

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

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

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

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

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

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() কল করুন।

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