একটি ওয়েব অ্যাপ কাস্ট-সক্ষম করুন

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবটি আপনাকে শেখাবে কিভাবে একটি বিদ্যমান ওয়েব ভিডিও অ্যাপকে Google Cast-সক্ষম ডিভাইসে কন্টেন্ট কাস্ট করার জন্য পরিবর্তন করতে হয়।

গুগল কাস্ট কী?

গুগল কাস্ট ব্যবহারকারীদের মোবাইল ডিভাইস থেকে টিভিতে কন্টেন্ট কাস্ট করার সুযোগ দেয়। এরপর ব্যবহারকারীরা টিভিতে মিডিয়া প্লেব্যাকের জন্য তাদের মোবাইল ডিভাইসটিকে রিমোট কন্ট্রোল হিসেবে ব্যবহার করতে পারবেন।

Google Cast SDK আপনাকে আপনার অ্যাপটি টিভি বা সাউন্ড সিস্টেম নিয়ন্ত্রণ করতে প্রসারিত করতে দেয়। Cast SDK আপনাকে Google Cast ডিজাইন চেকলিস্টের উপর ভিত্তি করে প্রয়োজনীয় UI উপাদান যোগ করতে দেয়।

সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে কাস্ট ব্যবহারকারীর অভিজ্ঞতা সহজ এবং অনুমানযোগ্য করার জন্য গুগল কাস্ট ডিজাইন চেকলিস্ট প্রদান করা হয়েছে।

আমরা কী তৈরি করতে যাচ্ছি?

এই কোডল্যাবটি সম্পন্ন করার পর, আপনার কাছে একটি Chrome ওয়েব ভিডিও অ্যাপ থাকবে যা একটি Google Cast ডিভাইসে ভিডিও কাস্ট করতে সক্ষম হবে।

তুমি কি শিখবে

• একটি নমুনা ভিডিও অ্যাপে Google Cast SDK কীভাবে যোগ করবেন।
• গুগল কাস্ট ডিভাইস নির্বাচন করার জন্য কাস্ট বোতামটি কীভাবে যুক্ত করবেন।
• কিভাবে একটি কাস্ট ডিভাইসের সাথে সংযোগ করবেন এবং একটি মিডিয়া রিসিভার চালু করবেন।
• কিভাবে একটি ভিডিও কাস্ট করবেন।
• কাস্ট কানেক্ট কীভাবে সংহত করবেন

তোমার যা লাগবে

• সর্বশেষ গুগল ক্রোম ব্রাউজার।
• HTTPS হোস্টিং পরিষেবা যেমন Firebase Hosting অথবা ngrok ।
• ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা Chromecast বা Android TV এর মতো একটি Google Cast ডিভাইস।
• HDMI ইনপুট সহ একটি টিভি বা মনিটর।
• Cast Connect ইন্টিগ্রেশন পরীক্ষা করার জন্য Google TV সহ একটি Chromecast প্রয়োজন, তবে বাকি কোডল্যাবের জন্য এটি ঐচ্ছিক। যদি আপনার কাছে এটি না থাকে, তাহলে এই টিউটোরিয়ালের শেষে "Add Cast Connect Support" ধাপটি এড়িয়ে যেতে দ্বিধা করবেন না।

অভিজ্ঞতা

• আপনার পূর্ববর্তী ওয়েব ডেভেলপমেন্ট জ্ঞান থাকতে হবে।
• আপনার টিভি দেখার পূর্ব জ্ঞানও প্রয়োজন :)

নেটওয়ার্কিং সমস্যা হচ্ছে?

যদি আপনি এমন কোনও স্থানে থাকেন যেখানে ওয়াইফাই নেটওয়ার্ক নির্ভরযোগ্য নয়, তাহলে Chromecast ডিভাইসটি Chromecast এর জন্য ইথারনেট অ্যাডাপ্টার ব্যবহার করে অথবা Google TV এর জন্য Chromecast এর সাথে সংযুক্ত করা যেতে পারে।

আপনি এই টিউটোরিয়ালটি কীভাবে ব্যবহার করবেন?

শুধু পুরোটা পড়ুন এটি পড়ুন এবং অনুশীলনগুলি সম্পূর্ণ করুন।

ওয়েব অ্যাপ তৈরির ক্ষেত্রে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?

নবীন মধ্যবর্তী দক্ষ

টিভি দেখার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?

নবীন মধ্যবর্তী দক্ষ

2. নমুনা কোড পান

আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন...

সোর্স কোড ডাউনলোড করুন

এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।

cast-videos-cast codelab সংগ্রহস্থলে দুটি নমুনা প্রকল্প রয়েছে:

• অ্যাপ-স্টার্ট — এই কোডল্যাবে আপনি যে প্রারম্ভিক কোডটি তৈরি করবেন।
• app-done — সমাপ্ত নমুনা ভিডিও অ্যাপের সম্পূর্ণ কোড।

৩. নমুনা অ্যাপটি চালান

প্রথমে দেখা যাক সম্পূর্ণ নমুনা অ্যাপটি কেমন দেখাচ্ছে। অ্যাপটি একটি মৌলিক ভিডিও প্লেয়ার। ব্যবহারকারী একটি তালিকা থেকে একটি ভিডিও নির্বাচন করতে পারেন এবং তারপর ডিভাইসে স্থানীয়ভাবে ভিডিওটি চালাতে পারেন অথবা এটি একটি Google Cast ডিভাইসে কাস্ট করতে পারেন।

সম্পূর্ণ ব্যবহার করতে সক্ষম হওয়ার জন্য, এটি হোস্ট করা প্রয়োজন।

যদি আপনার ব্যবহারের জন্য কোন সার্ভার উপলব্ধ না থাকে, তাহলে আপনি Firebase Hosting অথবা ngrok ব্যবহার করতে পারেন।

সার্ভার চালান

আপনার পছন্দের পরিষেবা সেট আপ হয়ে গেলে, app-done নেভিগেট করুন এবং আপনার সার্ভারটি শুরু করুন।

আপনার ব্রাউজারে, আপনার হোস্ট করা নমুনার https URL দেখুন।

1. তুমি ভিডিও অ্যাপটি দেখতে পাবে।
2. কাস্ট বোতামে ক্লিক করুন এবং আপনার গুগল কাস্ট ডিভাইসটি নির্বাচন করুন।
3. একটি ভিডিও নির্বাচন করুন, প্লে বোতামে ক্লিক করুন।
4. ভিডিওটি আপনার Google Cast ডিভাইসে চলতে শুরু করবে।

রিসিভারে ভিডিও থামাতে ভিডিও এলিমেন্টের পজ বোতামে ক্লিক করুন। আবার ভিডিও চালানো চালিয়ে যেতে ভিডিও এলিমেন্টের প্লে বোতামে ক্লিক করুন।

Google Cast ডিভাইসে কাস্টিং বন্ধ করতে Cast বোতামে ক্লিক করুন।

আমরা এগিয়ে যাওয়ার আগে, সার্ভারটি বন্ধ করুন।

৪. শুরুর প্রকল্পটি প্রস্তুত করুন

আপনার ডাউনলোড করা স্টার্ট অ্যাপটিতে Google Cast-এর জন্য সাপোর্ট যোগ করতে হবে। এখানে কিছু Google Cast পরিভাষা দেওয়া হল যা আমরা এই কোডল্যাবে ব্যবহার করব:

• একটি প্রেরক অ্যাপ একটি মোবাইল ডিভাইস বা ল্যাপটপে চলে,
• গুগল কাস্ট ডিভাইসে একটি রিসিভার অ্যাপ চলে।

এখন আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে স্টার্টার প্রজেক্টের উপরে তৈরি করতে প্রস্তুত:

1. নির্বাচন করুন আপনার নমুনা কোড ডাউনলোড থেকে app-start ডিরেক্টরি।
2. আপনার সার্ভার ব্যবহার করে অ্যাপটি চালান এবং UI অন্বেষণ করুন।

মনে রাখবেন, এই কোডল্যাবটি যখন আপনি পরীক্ষা করছেন, তখন পরিষেবার উপর নির্ভর করে আপনার সার্ভারে নমুনাটি পুনরায় হোস্ট করতে হবে।

অ্যাপ ডিজাইন

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

অ্যাপটিতে index.html এ সংজ্ঞায়িত একটি প্রধান ভিউ এবং প্রধান নিয়ামক, CastVideos.js.

index.html সম্পর্কে

এই html ফাইলটি ওয়েব অ্যাপের প্রায় সমস্ত UI ঘোষণা করে।

ভিউয়ের কয়েকটি অংশ আছে, আমাদের div#main_video আছে, যাতে ভিডিও এলিমেন্ট থাকে। আমাদের ভিডিও ডিভের সাথে সম্পর্কিত, আমাদের div#media_control আছে, যা ভিডিও এলিমেন্টের জন্য সমস্ত নিয়ন্ত্রণ সংজ্ঞায়িত করে। এর নীচে, media_info আছে, যা ভিউতে থাকা ভিডিওর বিশদ প্রদর্শন করে। অবশেষে, carousel div একটি ডিভের ভিডিওগুলির একটি তালিকা প্রদর্শন করে।

index.html ফাইলটি Cast SDK বুটস্ট্র্যাপ করে এবং CastVideos ফাংশনকে লোড করতে বলে।

এই উপাদানগুলি পূরণ করবে এমন বেশিরভাগ সামগ্রী CastVideos.js এ সংজ্ঞায়িত, ইনজেক্টেড এবং নিয়ন্ত্রিত হবে। তাহলে, আসুন এটি একবার দেখে নেওয়া যাক।

CastVideos.js সম্পর্কে

এই স্ক্রিপ্টটি Cast Videos ওয়েব অ্যাপের সমস্ত লজিক পরিচালনা করে। CastVideos.js এ সংজ্ঞায়িত ভিডিওর তালিকা এবং তাদের সাথে সম্পর্কিত মেটাডেটা mediaJSON নামক একটি অবজেক্টের মধ্যে রয়েছে।

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

CastPlayer হল প্রধান ক্লাস যা সম্পূর্ণ অ্যাপ পরিচালনা করে, প্লেয়ার সেট আপ করে, মিডিয়া নির্বাচন করে এবং মিডিয়া চালানোর জন্য PlayerHandler এ ইভেন্ট বাইন্ড করে। CastPlayer.prototype.initializeCastPlayer হল এমন একটি পদ্ধতি যা সমস্ত Cast কার্যকারিতা সেট আপ করে। CastPlayer.prototype.switchPlayer স্থানীয় এবং দূরবর্তী প্লেয়ারের মধ্যে অবস্থা পরিবর্তন করে। CastPlayer.prototype.setupLocalPlayer এবং CastPlayer.prototype.setupRemotePlayer স্থানীয় এবং দূরবর্তী প্লেয়ারগুলিকে আরম্ভ করে।

PlayerHandler হল মিডিয়া প্লেব্যাক পরিচালনার জন্য দায়ী ক্লাস। মিডিয়া এবং প্লেব্যাক পরিচালনার বিশদ বিবরণের জন্য দায়ী আরও অনেক পদ্ধতি রয়েছে।

কাস্ট ডকুমেন্টেশন?

iOS, Android এবং Chrome প্রেরকদের জন্য আমাদের কাছে বিস্তৃত ডকুমেন্টেশন রয়েছে।

সচরাচর জিজ্ঞাস্য

• গুগল কাস্ট কী?
• আমি কিভাবে একজন গুগল কাস্ট ডেভেলপার হব?

৫. কাস্ট বোতাম যোগ করা

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

কনফিগারেশন

start প্রজেক্টের জন্য সম্পূর্ণ নমুনা অ্যাপের মতো একই নির্ভরতা এবং সেটআপ প্রয়োজন, কিন্তু এবার app-start এর বিষয়বস্তু হোস্ট করুন।

আপনার ব্রাউজারে, আপনার হোস্ট করা নমুনার https URL দেখুন।

মনে রাখবেন, পরিবর্তন করার সাথে সাথে, পরিষেবার উপর নির্ভর করে আপনার সার্ভারে নমুনাটি পুনরায় হোস্ট করতে হবে।

আরম্ভকরণ

Cast ফ্রেমওয়ার্কে একটি গ্লোবাল সিঙ্গেলটন অবজেক্ট আছে, CastContext , যা ফ্রেমওয়ার্কের সমস্ত কার্যকলাপ সমন্বয় করে। এই অবজেক্টটি অ্যাপ্লিকেশনের জীবনচক্রের প্রথম দিকেই শুরু করতে হবে, সাধারণত window['__onGCastApiAvailable'] এ নির্ধারিত কলব্যাক থেকে কল করা হয়, যা Cast SDK লোড হওয়ার পরে কল করা হয় এবং ব্যবহারের জন্য উপলব্ধ। এই ক্ষেত্রে, CastContext কে CastPlayer.prototype.initializeCastPlayer এ কল করা হয়, যা উপরে উল্লিখিত কলব্যাক থেকে কল করা হয়।

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

যখন আপনি নিজের কাস্ট-সক্ষম অ্যাপ তৈরি করেন, তখন আপনাকে কাস্ট ডেভেলপার হিসেবে নিবন্ধন করতে হবে এবং তারপর আপনার অ্যাপের জন্য একটি অ্যাপ্লিকেশন আইডি সংগ্রহ করতে হবে। এই কোডল্যাবের জন্য, আমরা একটি নমুনা অ্যাপ আইডি ব্যবহার করব।

আমি কিভাবে একজন কাস্ট ডেভেলপার হব?

Google Cast Developer Console- এ নিবন্ধন করে, আপনি আপনার অ্যাপের জন্য একটি অ্যাপ্লিকেশন আইডি পেতে পারেন।

body সেকশনের একেবারে শেষে index.html এ নিম্নলিখিত কোডটি যোগ করুন:

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

CastVideos অ্যাপটি আরম্ভ করতে এবং CastContext আরম্ভ করতে নিম্নলিখিত কোডটি index.html এ যোগ করুন:

<script src="CastVideos.js"></script>
<script type="text/javascript">
var castPlayer = new CastPlayer();
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    castPlayer.initializeCastPlayer();
  }
};
</script>

এখন, আমাদের CastVideos.js তে একটি নতুন পদ্ধতি যোগ করতে হবে, যা আমরা index.html তে যে পদ্ধতিটি কল করেছি তার সাথে সঙ্গতিপূর্ণ। আসুন initializeCastPlayer নামে একটি নতুন পদ্ধতি যোগ করি, যা CastContext-এ বিকল্প সেট করে এবং নতুন RemotePlayer এবং RemotePlayerControllers চালু করে:

/**
 * This method sets up the CastContext, and a few other members
 * that are necessary to play and control videos on a Cast
 * device.
 */
CastPlayer.prototype.initializeCastPlayer = function() {

    var options = {};

    // Set the receiver application ID to your own (created in
    // the Google Cast Developer Console), or optionally
    // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
    options.receiverApplicationId = 'C0868879';

    // Auto join policy can be one of the following three:
    // ORIGIN_SCOPED - Auto connect from same appId and page origin
    // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab
    // PAGE_SCOPED - No auto connect
    options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;

    cast.framework.CastContext.getInstance().setOptions(options);

    this.remotePlayer = new cast.framework.RemotePlayer();
    this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
        this.switchPlayer.bind(this)
    );
};

অবশেষে, আমাদের RemotePlayer এবং RemotePlayerController এর জন্য ভেরিয়েবল তৈরি করতে হবে:

var CastPlayer = function() {
  //...
  /* Cast player variables */
  /** @type {cast.framework.RemotePlayer} */
  this.remotePlayer = null;
  /** @type {cast.framework.RemotePlayerController} */
  this.remotePlayerController = null;
  //...
};

কাস্ট বোতাম

এখন যেহেতু CastContext শুরু হয়ে গেছে, ব্যবহারকারীকে একটি Cast ডিভাইস নির্বাচন করার অনুমতি দেওয়ার জন্য আমাদের Cast বোতামটি যুক্ত করতে হবে। Cast SDK " castbutton" আইডি সহ google-cast-launcher নামক একটি Cast বোতাম উপাদান সরবরাহ করে। এটি media_control বিভাগে কেবল একটি button যুক্ত করে অ্যাপ্লিকেশনের ভিডিও উপাদানে যুক্ত করা যেতে পারে।

বোতাম উপাদানটি দেখতে এরকম হবে:

<google-cast-launcher id="castbutton"></google-cast-launcher>

media_control বিভাগে index.html এ নিম্নলিখিত কোডটি যোগ করুন:

<div id="media_control">
  <div id="play"></div>
  <div id="pause"></div>
  <div id="progress_bg"></div>
  <div id="progress"></div>
  <div id="progress_indicator"></div>
  <div id="fullscreen_expand"></div>
  <div id="fullscreen_collapse"></div>
  <google-cast-launcher id="castbutton"></google-cast-launcher>
  <div id="audio_bg"></div>
  <div id="audio_bg_track"></div>
  <div id="audio_indicator"></div>
  <div id="audio_bg_level"></div>
  <div id="audio_on"></div>
  <div id="audio_off"></div>
  <div id="duration">00:00:00</div>
</div>

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

আমরা মিডিয়া প্লেব্যাকের জন্য কোনও সাপোর্ট সংযুক্ত করিনি, তাই আপনি এখনও কাস্ট ডিভাইসে ভিডিও চালাতে পারবেন না। কাস্টিং বন্ধ করতে কাস্ট বোতামে ক্লিক করুন।

৬. ভিডিও কন্টেন্ট কাস্ট করা

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

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

উচ্চ স্তরে, যদি আপনি একটি Cast ডিভাইসে একটি মিডিয়া চালাতে চান, তাহলে নিম্নলিখিতগুলি ঘটতে হবে:

1. Cast SDK থেকে একটি MediaInfo JSON অবজেক্ট তৈরি করুন যা একটি মিডিয়া আইটেমের মডেল তৈরি করে।
2. আপনার রিসিভার অ্যাপ্লিকেশন চালু করার জন্য ব্যবহারকারী কাস্ট ডিভাইসের সাথে সংযোগ স্থাপন করে।
3. আপনার রিসিভারে MediaInfo অবজেক্টটি লোড করুন এবং কন্টেন্টটি চালান।
4. মিডিয়ার অবস্থা ট্র্যাক করুন।
5. ব্যবহারকারীর মিথস্ক্রিয়ার উপর ভিত্তি করে রিসিভারকে প্লেব্যাক কমান্ড পাঠান।

ধাপ ১ হলো একটি বস্তুর সাথে অন্য বস্তুর ম্যাপিং করা; MediaInfo হলো এমন কিছু যা Cast SDK বোঝে এবং mediaJSON হলো আমাদের অ্যাপের একটি মিডিয়া আইটেমের এনক্যাপসুলেশন; আমরা সহজেই একটি mediaJSON কে MediaInfo তে ম্যাপ করতে পারি। আমরা ইতিমধ্যেই পূর্ববর্তী বিভাগে ধাপ ২ সম্পন্ন করেছি। ধাপ ৩ কাস্ট SDK দিয়ে করা সহজ।

নমুনা অ্যাপ CastPlayer ইতিমধ্যেই switchPlayer পদ্ধতিতে স্থানীয় বনাম দূরবর্তী প্লেব্যাকের মধ্যে পার্থক্য করে:

if (cast && cast.framework) {
  if (this.remotePlayer.isConnected) {
    //...

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

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

কাস্ট সেশন ম্যানেজমেন্ট

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

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

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

আমাদের বর্তমান অ্যাপ্লিকেশনে, সমস্ত সেশন এবং স্টেট ম্যানেজমেন্ট setupRemotePlayer পদ্ধতিতে পরিচালিত হয়। আপনার CastVideos.js এ নিম্নলিখিত কোডটি যোগ করে আপনার অ্যাপে এটি কনফিগার করা শুরু করা যাক:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

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

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

    // Add event listeners for player changes which may occur outside sender app
    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,
        function() {
            if (this.remotePlayer.isPaused) {
                this.playerHandler.pause();
            } else {
                this.playerHandler.play();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED,
        function() {
            if (this.remotePlayer.isMuted) {
                this.playerHandler.mute();
            } else {
                this.playerHandler.unMute();
            }
        }.bind(this)
    );

    this.remotePlayerController.addEventListener(
        cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED,
        function() {
            var newVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
            var p = document.getElementById('audio_bg_level');
            p.style.height = newVolume + 'px';
            p.style.marginTop = -newVolume + 'px';
        }.bind(this)
    );

    // This object will implement PlayerHandler callbacks with
    // remotePlayerController, and makes necessary UI updates specific
    // to remote playback
    var playerTarget = {};

    playerTarget.play = function () {
        if (this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }

        var vi = document.getElementById('video_image');
        vi.style.display = 'block';
        var localPlayer = document.getElementById('video_element');
        localPlayer.style.display = 'none';
    }.bind(this);

    playerTarget.pause = function () {
        if (!this.remotePlayer.isPaused) {
            this.remotePlayerController.playOrPause();
        }
    }.bind(this);

    playerTarget.stop = function () {
         this.remotePlayerController.stop();
    }.bind(this);

    playerTarget.getCurrentMediaTime = function() {
        return this.remotePlayer.currentTime;
    }.bind(this);

    playerTarget.getMediaDuration = function() {
        return this.remotePlayer.duration;
    }.bind(this);

    playerTarget.updateDisplayMessage = function () {
        document.getElementById('playerstate').style.display = 'block';
        document.getElementById('playerstatebg').style.display = 'block';
        document.getElementById('video_image_overlay').style.display = 'block';
        document.getElementById('playerstate').innerHTML =
            this.mediaContents[ this.currentMediaIndex]['title'] + ' ' +
            this.playerState + ' on ' + castSession.getCastDevice().friendlyName;
    }.bind(this);

    playerTarget.setVolume = function (volumeSliderPosition) {
        // Add resistance to avoid loud volume
        var currentVolume = this.remotePlayer.volumeLevel;
        var p = document.getElementById('audio_bg_level');
        if (volumeSliderPosition < FULL_VOLUME_HEIGHT) {
            var vScale =  this.currentVolume * FULL_VOLUME_HEIGHT;
            if (volumeSliderPosition > vScale) {
                volumeSliderPosition = vScale + (pos - vScale) / 2;
            }
            p.style.height = volumeSliderPosition + 'px';
            p.style.marginTop = -volumeSliderPosition + 'px';
            currentVolume = volumeSliderPosition / FULL_VOLUME_HEIGHT;
        } else {
            currentVolume = 1;
        }
        this.remotePlayer.volumeLevel = currentVolume;
        this.remotePlayerController.setVolumeLevel();
    }.bind(this);

    playerTarget.mute = function () {
        if (!this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.unMute = function () {
        if (this.remotePlayer.isMuted) {
            this.remotePlayerController.muteOrUnmute();
        }
    }.bind(this);

    playerTarget.isMuted = function() {
        return this.remotePlayer.isMuted;
    }.bind(this);

    playerTarget.seekTo = function (time) {
        this.remotePlayer.currentTime = time;
        this.remotePlayerController.seek();
    }.bind(this);

    this.playerHandler.setTarget(playerTarget);

    // Setup remote player volume right on setup
    // The remote player may have had a volume set from previous playback
    if (this.remotePlayer.isMuted) {
        this.playerHandler.mute();
    }
    var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;
    var p = document.getElementById('audio_bg_level');
    p.style.height = currentVolume + 'px';
    p.style.marginTop = -currentVolume + 'px';

    this.hideFullscreenButton();

    this.playerHandler.play();
};

মিডিয়া লোড হচ্ছে

Cast SDK-তে, RemotePlayer এবং RemotePlayerController রিসিভারে রিমোট মিডিয়া প্লেব্যাক পরিচালনা করার জন্য সুবিধাজনক API-এর একটি সেট প্রদান করে। মিডিয়া প্লেব্যাক সমর্থন করে এমন একটি CastSession জন্য, RemotePlayer এবং RemotePlayerController এর ইনস্ট্যান্স SDK দ্বারা স্বয়ংক্রিয়ভাবে তৈরি করা হবে। কোডল্যাবে আগে দেখানো হয়েছে, যথাক্রমে cast.framework.RemotePlayer এবং cast.framework.RemotePlayerController এর ইনস্ট্যান্স তৈরি করে এগুলি অ্যাক্সেস করা যেতে পারে।

এরপর, আমাদের রিসিভারে নির্বাচিত ভিডিওটি লোড করতে হবে, SDK-এর জন্য একটি MediaInfo অবজেক্ট তৈরি করে যাতে অনুরোধটি প্রক্রিয়া করা যায় এবং পাস করা যায়। এটি করার জন্য setupRemotePlayer এ নিম্নলিখিত কোডটি যোগ করুন:

/**
 * Set the PlayerHandler target to use the remote player
 */
CastPlayer.prototype.setupRemotePlayer = function () {
    //...

    playerTarget.load = function (mediaIndex) {
        console.log('Loading...' + this.mediaContents[mediaIndex]['title']);
        var mediaInfo = new chrome.cast.media.MediaInfo(
            this.mediaContents[mediaIndex]['sources'][0], 'video/mp4');

        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
        mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
        mediaInfo.metadata.title = this.mediaContents[mediaIndex]['title'];
        mediaInfo.metadata.images = [
            {'url': MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex]['thumb']}];

        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        castSession.loadMedia(request).then(
            this.playerHandler.loaded.bind(this.playerHandler),
            function (errorCode) {
                this.playerState = PLAYER_STATE.ERROR;
                console.log('Remote media load error: ' +
                    CastPlayer.getErrorMessage(errorCode));
            }.bind(this));
    }.bind(this);

    //...
};

এখন স্থানীয় এবং দূরবর্তী প্লেব্যাকের মধ্যে স্যুইচ করার জন্য একটি পদ্ধতি যোগ করুন:

/**
 * This is a method for switching between the local and remote
 * players. If the local player is selected, setupLocalPlayer()
 * is run. If there is a cast device connected we run
 * setupRemotePlayer().
 */
CastPlayer.prototype.switchPlayer = function() {
    this.stopProgressTimer();
    this.resetVolumeSlider();
    this.playerHandler.stop();
    this.playerState = PLAYER_STATE.IDLE;
    if (cast && cast.framework) {
        if (this.remotePlayer.isConnected) {
            this.setupRemotePlayer();
            return;
        }
    }
    this.setupLocalPlayer();
};

অবশেষে, যেকোনো Cast ত্রুটি বার্তা পরিচালনা করার জন্য একটি পদ্ধতি যোগ করুন:

/**
 * Makes human-readable message from chrome.cast.Error
 * @param {chrome.cast.Error} error
 * @return {string} error message
 */
CastPlayer.getErrorMessage = function(error) {
  switch (error.code) {
    case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
      return 'The API is not initialized.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CANCEL:
      return 'The operation was canceled by the user' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.CHANNEL_ERROR:
      return 'A channel to the receiver is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.EXTENSION_MISSING:
      return 'The Cast extension is not available.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.INVALID_PARAMETER:
      return 'The parameters to the operation were not valid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
      return 'No receiver was compatible with the session request.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.SESSION_ERROR:
      return 'A session could not be created, or a session was invalid.' +
        (error.description ? ' :' + error.description : '');
    case chrome.cast.ErrorCode.TIMEOUT:
      return 'The operation timed out.' +
        (error.description ? ' :' + error.description : '');
  }
};

এখন, অ্যাপটি চালান। আপনার কাস্ট ডিভাইসের সাথে সংযোগ করুন এবং একটি ভিডিও চালানো শুরু করুন। আপনি রিসিভারে ভিডিওটি বাজতে দেখতে পাবেন।

৭. কাস্ট কানেক্ট সাপোর্ট যোগ করুন

কাস্ট কানেক্ট লাইব্রেরি বিদ্যমান প্রেরক অ্যাপ্লিকেশনগুলিকে কাস্ট প্রোটোকলের মাধ্যমে অ্যান্ড্রয়েড টিভি অ্যাপ্লিকেশনগুলির সাথে যোগাযোগ করার অনুমতি দেয়। কাস্ট কানেক্ট কাস্ট অবকাঠামোর উপরে তৈরি হয়, যেখানে আপনার অ্যান্ড্রয়েড টিভি অ্যাপটি রিসিভার হিসেবে কাজ করে।

নির্ভরতা

• ক্রোম ব্রাউজার ভার্সন M87 বা তার উচ্চতর

অ্যান্ড্রয়েড রিসিভার সামঞ্জস্যপূর্ণ সেট করুন

অ্যান্ড্রয়েড টিভি অ্যাপ্লিকেশন, যাকে অ্যান্ড্রয়েড রিসিভারও বলা হয়, চালু করার জন্য, আমাদের CastOptions অবজেক্টে androidReceiverCompatible ফ্ল্যাগটিকে true তে সেট করতে হবে।

initializeCastPlayer ফাংশনে আপনার CastVideos.js এ নিম্নলিখিত কোডটি যোগ করুন:

var options = {};
...
options.androidReceiverCompatible = true;

cast.framework.CastContext.getInstance().setOptions(options);

দ্রষ্টব্য: প্রদত্ত app-done প্রজেক্ট ব্যবহার করে এই বৈশিষ্ট্যটি পরীক্ষা করার জন্য, উপরে উল্লিখিত androidReceiverCompatible ফ্ল্যাগটি চালানোর আগে true তে সেট করুন।

লঞ্চ শংসাপত্র সেট করুন

প্রেরকের পাশে, আপনি CredentialsData নির্দিষ্ট করে বলতে পারেন যে কে সেশনে যোগ দিচ্ছেন। credentials হল একটি স্ট্রিং যা ব্যবহারকারী-সংজ্ঞায়িত করা যেতে পারে, যতক্ষণ না আপনার ATV অ্যাপ এটি বুঝতে পারে। CredentialsData শুধুমাত্র লঞ্চ বা যোগদানের সময় আপনার Android TV অ্যাপে পাঠানো হয়। আপনি যদি কানেক্ট থাকাকালীন এটি আবার সেট করেন, তাহলে এটি আপনার Android TV অ্যাপে পাঠানো হবে না।

লঞ্চ শংসাপত্র সেট করার জন্য লঞ্চ বিকল্পগুলি সেট করার পরে যেকোনো সময় CredentialsData সংজ্ঞায়িত করতে হবে।

initializeCastPlayer ফাংশনের অধীনে আপনার CastVideos.js ক্লাসে নিম্নলিখিত কোডটি যোগ করুন:

cast.framework.CastContext.getInstance().setOptions(options);
...
let credentialsData = new chrome.cast.CredentialsData("{\"userId\": \"abc\"}");
cast.framework.CastContext.getInstance().setLaunchCredentialsData(credentialsData);
...

লোড অনুরোধে শংসাপত্র সেট করুন

যদি আপনার ওয়েব রিসিভার অ্যাপ এবং আপনার অ্যান্ড্রয়েড টিভি অ্যাপ credentials ভিন্নভাবে পরিচালনা করে, তাহলে আপনাকে প্রতিটির জন্য আলাদা ক্রেডেনশিয়াল সংজ্ঞায়িত করতে হতে পারে। এটির যত্ন নেওয়ার জন্য, আপনার CastVideos.js এ playerTarget.load এর অধীনে setupRemotePlayer ফাংশনে নিম্নলিখিত কোডটি যোগ করুন:

...
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.credentials = 'user-credentials';
request.atvCredentials = 'atv-user-credentials';
...

আপনার প্রেরক কোন রিসিভার অ্যাপে কাস্ট করছেন তার উপর নির্ভর করে, SDK এখন স্বয়ংক্রিয়ভাবে বর্তমান সেশনের জন্য কোন শংসাপত্র ব্যবহার করবে তা পরিচালনা করবে।

কাস্ট কানেক্ট পরীক্ষা করা হচ্ছে

দ্রষ্টব্য: এই বৈশিষ্ট্যটি পরীক্ষা করার জন্য, আপনার Chromecast with Google TV-তে Android TV APK ইনস্টল করতে হবে। যদি আপনি ইতিমধ্যেই এটি না করে থাকেন, তাহলে আপনার Chromecast with Google TV ডিভাইসে ডেভেলপমেন্টের জন্য সেট আপ করার ধাপগুলি অনুসরণ করতে ভুলবেন না।

গুগল টিভির মাধ্যমে Chromecast-এ Android TV APK ইনস্টল করার ধাপ:

1. আপনার অ্যান্ড্রয়েড টিভি ডিভাইসের আইপি ঠিকানা খুঁজুন। সাধারণত, এটি সেটিংস > নেটওয়ার্ক এবং ইন্টারনেট > (আপনার ডিভাইসটি যে নেটওয়ার্কের সাথে সংযুক্ত) এর অধীনে পাওয়া যায়। ডানদিকে এটি নেটওয়ার্কে আপনার ডিভাইসের আইপি এবং বিস্তারিত তথ্য দেখাবে।
2. টার্মিনাল ব্যবহার করে ADB এর মাধ্যমে আপনার ডিভাইসের সাথে সংযোগ স্থাপনের জন্য IP ঠিকানাটি ব্যবহার করুন:

$ adb connect <device_ip_address>:5555

3. আপনার টার্মিনাল উইন্ডো থেকে, এই কোডল্যাবের শুরুতে ডাউনলোড করা কোডল্যাব নমুনাগুলির জন্য শীর্ষ স্তরের ফোল্ডারে নেভিগেট করুন। উদাহরণস্বরূপ:

$ cd Desktop/chrome_codelab_src

4. এই ফোল্ডারে থাকা .apk ফাইলটি আপনার Android TV তে ইনস্টল করুন:

$ adb -s <device_ip_address>:5555 install android-tv-app.apk

5. এখন আপনার অ্যান্ড্রয়েড টিভি ডিভাইসের " ইওর অ্যাপস" মেনুতে "কাস্ট ভিডিও" নামে একটি অ্যাপ দেখতে পাবেন।
6. আপডেট করা ওয়েব সেন্ডার কোডটি চালান এবং কাস্ট আইকন ব্যবহার করে অথবা আপনার Chrome ব্রাউজারের ড্রপ-ডাউন মেনু থেকে Cast.. এটি এখন আপনার Android রিসিভারে Android TV অ্যাপটি চালু করবে এবং আপনাকে আপনার Android TV রিমোট ব্যবহার করে প্লেব্যাক নিয়ন্ত্রণ করতে দেবে।

৮. অভিনন্দন

এখন তুমি জানো কিভাবে Chrome ওয়েব অ্যাপে Cast SDK উইজেট ব্যবহার করে একটি ভিডিও অ্যাপ Cast-সক্ষম করতে হয়।

আরও বিস্তারিত জানার জন্য, ওয়েব সেন্ডার ডেভেলপার গাইড দেখুন।

আরও কাস্ট চান?

অন্যান্য কাস্ট কোডল্যাব এবং GitHub-এ আমাদের নমুনা অ্যাপগুলি একবার দেখে নিন।