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

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

পরিভাষা

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

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

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

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

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

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

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

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

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

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

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

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

নামস্থানের সম্পূর্ণ বিবরণের জন্য Google Cast ওয়েব প্রেরক API রেফারেন্স পর্যালোচনা করুন৷

কাস্ট বোতাম

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

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

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

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

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

সূচনা

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

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

যেমন:

<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) ব্যবহার করে সংযুক্ত কাস্ট ডিভাইসে মিডিয়া লোড করতে ব্যবহার করা যেতে পারে। প্রথমে, একটি MediaInfo তৈরি করুন, contentId এবং contentType ব্যবহার করে সেইসাথে বিষয়বস্তুর সাথে সম্পর্কিত অন্য কোনো তথ্য। তারপর অনুরোধের জন্য সমস্ত প্রাসঙ্গিক তথ্য সেট করে এটি থেকে একটি 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();
  • 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;
  });

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

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

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

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

সেশন স্টেট নিরীক্ষণ করতে, 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() এ কল করুন।

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

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