আপনার ওয়েব সেন্ডার অ্যাপে Cast SDK ইন্টিগ্রেট করা

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

মনে রাখবেন: আমরা আপনাকে নিম্নলিখিত ধাপগুলি অনুসরণ করার সাজেশন দিই:

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

পরিভাষা

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

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

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

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

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

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

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

ফ্রেমওয়ার্ক

Web Sender SDK cast.framework.* নেমস্পেস ব্যবহার করে। নেমস্পেস নিম্নলিখিত বিষয়গুলি দেখায়:

• API-তে অপারেশন ইনভোক করে এমন পদ্ধতি বা ফাংশন
• API-তে লিসনার ফাংশনের জন্য ইভেন্ট লিসনার

ফ্রেমওয়ার্কে এইসব প্রধান কম্পোনেন্ট থাকে:

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

নেমস্পেসের সম্পূর্ণ বিবরণের জন্য Google Cast Web Sender API রেফারেন্স পর্যালোচনা করুন।

কাস্ট করার বোতাম

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

<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 অবজেক্টের সিঙ্গলটন ইনস্ট্যান্স ফিরিয়ে আনে। তারপর এটি CastOptions অবজেক্ট ব্যবহার করে setOptions(options) ব্যবহার করে applicationID সেট করে।

আপনি যদি ডিফল্ট মিডিয়া রিসিভার ব্যবহার করেন, যার জন্য রেজিস্ট্রেশনের প্রয়োজন হয় না, আপনি 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();

loadMedia(loadRequest) ব্যবহার করে কানেক্ট করা Cast ডিভাইসে মিডিয়া লোড করতে 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();
• বন্ধ করুন: playerController.stop();
• SEEK: playerController.seek();

RemotePlayer এবং RemotePlayerController ডেটা বাইন্ডিং ফ্রেমওয়ার্কের সাথে ব্যবহার করা যেতে পারে, যেমন Polymer বা Angular, যাতে রিমোট প্লেয়ার ইমপ্লিমেন্ট করা যায়।

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

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

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

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

সেশন CastContext ক্লাস দ্বারা ম্যানেজ করা হয়, যা আপনার অ্যাপ cast.framework.CastContext.getInstance()-এর মাধ্যমে ফিরিয়ে আনতে পারে। Session ক্লাসের সাবক্লাস দিয়ে স্বতন্ত্র সেশন দেখানো হয়। যেমন, CastSession কাস্ট ডিভাইসের সাথে সেশন দেখায়। আপনার অ্যাপ 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);
}

স্ট্রিম ট্রান্সফার করার ফিচার

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

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

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