একটি কাস্টম ওয়েব রিসিভার তৈরি করুন

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

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

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

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

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

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

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

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

তুমি কি শিখবে

• রিসিভার ডেভেলপমেন্টের জন্য কীভাবে সেট আপ করবেন।
• কাস্ট অ্যাপ্লিকেশন ফ্রেমওয়ার্কের উপর ভিত্তি করে কাস্ট-সক্ষম রিসিভারের মূল বিষয়গুলি।
• কাস্ট করা ভিডিও কীভাবে পাবেন।
• ডিবাগ লগার কীভাবে সংহত করবেন।
• স্মার্ট ডিসপ্লের জন্য আপনার রিসিভারটি কীভাবে অপ্টিমাইজ করবেন।

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

• সর্বশেষ গুগল ক্রোম ব্রাউজার।
• HTTPS হোস্টিং পরিষেবা যেমন Firebase Hosting অথবা ngrok ।
• ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা Chromecast বা Android TV এর মতো একটি Google Cast ডিভাইস।
• HDMI ইনপুট সহ একটি টিভি বা মনিটর।

অভিজ্ঞতা

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

রিসিভার কোডল্যাব রিপোজিটরিতে দুটি নমুনা প্রকল্প রয়েছে:

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

৩. আপনার রিসিভার স্থানীয়ভাবে স্থাপন করা

আপনার ওয়েব রিসিভারটি একটি কাস্ট ডিভাইসের সাথে ব্যবহার করতে সক্ষম হওয়ার জন্য, এটি এমন কোথাও হোস্ট করা প্রয়োজন যেখানে আপনার কাস্ট ডিভাইসটি এটিতে পৌঁছাতে পারে। যদি আপনার কাছে ইতিমধ্যেই এমন একটি সার্ভার থাকে যা https সমর্থন করে, তাহলে নিম্নলিখিত নির্দেশাবলী এড়িয়ে যান এবং URL টি নোট করুন , কারণ পরবর্তী বিভাগে আপনার এটির প্রয়োজন হবে।

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

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

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

আপনার হোস্ট করা রিসিভারের URL টি নোট করে রাখুন। আপনি পরবর্তী বিভাগে এটি ব্যবহার করবেন।

৪. কাস্ট ডেভেলপার কনসোলে একটি অ্যাপ্লিকেশন নিবন্ধন করুন

আপনার কি কাস্ট ডেভেলপার অ্যাকাউন্ট নেই?

Google Cast SDK ডেভেলপার কনসোলে একটি অ্যাকাউন্টের জন্য সাইন আপ করুন এবং নিবন্ধন ফি প্রদান করুন।

Chromecast ডিভাইসে এই কোডল্যাবে তৈরি একটি কাস্টম রিসিভার চালানোর জন্য আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনটি নিবন্ধন করতে হবে। আপনার অ্যাপ্লিকেশনটি নিবন্ধন করার পরে, আপনি একটি অ্যাপ্লিকেশন আইডি পাবেন যা আপনার প্রেরক অ্যাপ্লিকেশনটিকে API কল করার জন্য ব্যবহার করতে হবে, যেমন একটি রিসিভার অ্যাপ্লিকেশন চালু করার জন্য।

"নতুন অ্যাপ্লিকেশন যোগ করুন" এ ক্লিক করুন

"কাস্টম রিসিভার" নির্বাচন করুন, এটিই আমরা তৈরি করছি।

আপনার নতুন রিসিভারের বিবরণ লিখুন, আপনার শেষের URL টি ব্যবহার করতে ভুলবেন না।

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

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

"নতুন ডিভাইস যোগ করুন" এ ক্লিক করুন

আপনার কাস্ট ডিভাইসের পিছনে মুদ্রিত সিরিয়াল নম্বরটি লিখুন এবং এটিকে একটি বর্ণনামূলক নাম দিন। Google Cast SDK ডেভেলপার কনসোল অ্যাক্সেস করার সময় Chrome এ আপনার স্ক্রিন কাস্ট করেও আপনি আপনার সিরিয়াল নম্বরটি খুঁজে পেতে পারেন।

আপনার রিসিভার এবং ডিভাইস পরীক্ষার জন্য প্রস্তুত হতে ৫-১৫ মিনিট সময় লাগবে। ৫-১৫ মিনিট অপেক্ষা করার পর আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি রিবুট করতে হবে।

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

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

আপনার ব্রাউজারে, কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুলটি খুলুন।

1. আপনার আমাদের CaC টুলটি দেখা উচিত।
2. ডিফল্ট "CC1AD845" নমুনা রিসিভার আইডি ব্যবহার করুন এবং "সেট অ্যাপ আইডি" বোতামে ক্লিক করুন।
3. উপরের বাম দিকে কাস্ট বোতামে ক্লিক করুন এবং আপনার Google Cast ডিভাইসটি নির্বাচন করুন।

4. উপরে "লোড মিডিয়া" ট্যাবে নেভিগেট করুন।

5. একটি নমুনা ভিডিও চালাতে "বিষয়বস্তু অনুসারে লোড করুন" বোতামে ক্লিক করুন।
6. ডিফল্ট রিসিভার ব্যবহার করে মৌলিক রিসিভার কার্যকারিতা কেমন দেখায় তা দেখানোর জন্য ভিডিওটি আপনার Google Cast ডিভাইসে চলতে শুরু করবে।

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

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

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

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

1. নির্বাচন করুন আপনার নমুনা কোড ডাউনলোড থেকে app-start ডিরেক্টরি।
2. js/receiver.js এবং index.html খুলুন।

মনে রাখবেন, এই কোডল্যাবটি যখন আপনি কাজ করছেন, তখন http-server আপনার করা পরিবর্তনগুলি গ্রহণ করবে। যদি আপনি লক্ষ্য করেন যে এটি তা করে না, http-server বন্ধ করে পুনরায় চালু করার চেষ্টা করুন।

অ্যাপ ডিজাইন

রিসিভার অ্যাপটি কাস্ট সেশন শুরু করে এবং প্রেরকের কাছ থেকে লোড অনুরোধ (অন্য কথায়, মিডিয়া প্লে ব্যাক করার কমান্ড) না আসা পর্যন্ত স্ট্যান্ড-বাই থাকবে।

অ্যাপটিতে index.html এ সংজ্ঞায়িত একটি প্রধান ভিউ এবং js/receiver.js নামক একটি জাভাস্ক্রিপ্ট ফাইল রয়েছে যাতে আমাদের রিসিভারকে কাজ করার জন্য সমস্ত যুক্তি রয়েছে।

সূচক.html

এই html ফাইলটিতে আমাদের রিসিভার অ্যাপের UI থাকবে। আপাতত এটি খালি, এবং আমরা কোড ল্যাব জুড়ে এটি যুক্ত করব।

রিসিভার.জেএস

এই স্ক্রিপ্টটি আমাদের রিসিভার অ্যাপের সমস্ত লজিক পরিচালনা করবে। বর্তমানে এটি কেবল একটি খালি ফাইল, তবে আমরা পরবর্তী বিভাগে মাত্র কয়েকটি লাইন কোড সহ এটিকে সম্পূর্ণরূপে কার্যকরী কাস্ট রিসিভারে রূপান্তর করতে যাচ্ছি।

৭. একটি বেসিক কাস্ট রিসিভার

আপনার প্রয়োজনীয় সব তথ্য আছে?

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

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

আরম্ভকরণ

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

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

footer> loading receiver.js, এর আগে index.html <body> তে নিম্নলিখিত কোডটি যোগ করুন, যাতে রিসিভার SDK-তে ডিফল্ট রিসিভার UI আনার জন্য জায়গা থাকে যা আপনার যোগ করা স্ক্রিপ্টের সাথে পাঠানো হচ্ছে।

<cast-media-player></cast-media-player>

এখন, আমাদের js/receiver.js এ SDK আরম্ভ করতে হবে, যার মধ্যে রয়েছে:

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

js/receiver.js এ নিম্নলিখিতটি যোগ করুন।

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

৮. "মৌলিক" ভিডিও কন্টেন্ট কাস্ট করা

এই কোডল্যাবের উদ্দেশ্যে, আপনার একেবারে নতুন রিসিভারটি চেষ্টা করে দেখতে CaC টুল ব্যবহার করুন।

আপনার ওয়েব ব্রাউজারটি কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুলের দিকে নির্দেশ করুন।

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

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

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

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

এই প্রথম মৌলিক প্রচেষ্টায় আমরা MediaInfo তে একটি প্লেযোগ্য সম্পদ URL ( MediaInfo.contentUrl এ সংরক্ষিত) পূরণ করতে যাচ্ছি।

একজন বাস্তব-জগতের প্রেরক MediaInfo.contentId তে একটি অ্যাপ্লিকেশন-নির্দিষ্ট মিডিয়া শনাক্তকারী ব্যবহার করেন। রিসিভার contentId কে একটি শনাক্তকারী হিসেবে ব্যবহার করে প্রকৃত সম্পদ URL সমাধান করার জন্য উপযুক্ত ব্যাকএন্ড API কল করে এবং এটিকে MediaInfo.contentUrl. রিসিভার DRM লাইসেন্স অর্জন বা বিজ্ঞাপন বিরতি সম্পর্কে তথ্য ইনজেক্ট করার মতো কাজগুলিও পরিচালনা করবে।

আমরা পরবর্তী বিভাগে আপনার রিসিভারটি ঠিক এরকম কিছু করার জন্য প্রসারিত করতে যাচ্ছি। আপাতত, কাস্ট আইকনে ক্লিক করুন এবং আপনার রিসিভারটি খুলতে আপনার ডিভাইসটি নির্বাচন করুন।

"লোড মিডিয়া" ট্যাবে যান এবং "লোড বাই কন্টেন্ট" বোতামে ক্লিক করুন। আপনার রিসিভার নমুনা কন্টেন্টটি চালানো শুরু করবে।

তাই রিসিভার SDK এর পরিচালনার বাইরে:

• কাস্ট সেশন শুরু করা হচ্ছে
• প্রেরকদের কাছ থেকে আগত LOAD অনুরোধগুলি পরিচালনা করুন যাতে খেলার যোগ্য সম্পদ রয়েছে
• বড় স্ক্রিনে প্রদর্শিত হওয়ার জন্য প্রস্তুত একটি মৌলিক প্লেয়ার UI প্রদান করুন।

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

৯. একটি বহিরাগত API এর সাথে একীভূত করুন

বাস্তব জগতের অ্যাপ্লিকেশনগুলিতে বেশিরভাগ ডেভেলপাররা তাদের কাস্ট রিসিভারের সাথে কীভাবে ইন্টারঅ্যাক্ট করে তার সাথে সামঞ্জস্য রেখে, আমরা আমাদের রিসিভারটি এমনভাবে পরিবর্তন করতে যাচ্ছি যাতে LOAD অনুরোধগুলি পরিচালনা করা যায় যা একটি প্লেযোগ্য সম্পদ URL পাঠানোর পরিবর্তে তার API কী দ্বারা উদ্দেশ্যযুক্ত মিডিয়া সামগ্রী উল্লেখ করে।

অ্যাপ্লিকেশনগুলি সাধারণত এটি করে কারণ:

• প্রেরক হয়তো কন্টেন্টের URL জানেন না।
• কাস্ট অ্যাপ্লিকেশনটি রিসিভারে সরাসরি প্রমাণীকরণ, অন্যান্য ব্যবসায়িক লজিক বা API কল পরিচালনা করার জন্য ডিজাইন করা হয়েছে।

এই কার্যকারিতাটি প্রাথমিকভাবে PlayerManager setMessageInterceptor() পদ্ধতিতে বাস্তবায়িত হয়। এটি আপনাকে টাইপ অনুসারে আগত বার্তাগুলিকে আটকাতে এবং SDK এর অভ্যন্তরীণ বার্তা হ্যান্ডলারে পৌঁছানোর আগে সেগুলিকে পরিবর্তন করতে সক্ষম করে। এই বিভাগে আমরা LOAD অনুরোধগুলি নিয়ে কাজ করছি যেখানে আমরা নিম্নলিখিতগুলি করব:

• আগত LOAD অনুরোধ এবং এর কাস্টম contentId পড়ুন।
• স্ট্রিমেবল অ্যাসেটটি contentId দিয়ে খুঁজে বের করতে আমাদের API-তে GET কল করুন।
• স্ট্রিমের URL ব্যবহার করে LOAD অনুরোধটি পরিবর্তন করুন।
• স্ট্রিম টাইপ প্যারামিটার সেট করতে MediaInformation অবজেক্টটি পরিবর্তন করুন।
• প্লেব্যাকের জন্য অনুরোধটি SDK-তে পাঠান, অথবা যদি আমরা অনুরোধ করা মিডিয়াটি খুঁজে না পাই তবে কমান্ডটি প্রত্যাখ্যান করুন।

প্রদত্ত নমুনা API সাধারণ রিসিভার কাজগুলিকে কাস্টমাইজ করার জন্য SDK-এর হুকগুলি প্রদর্শন করে, যদিও এটি বেশিরভাগই একটি অপ্রচলিত অভিজ্ঞতার উপর নির্ভর করে।

নমুনা API

আপনার ব্রাউজারটি https://storage.googleapis.com/cpe-sample-media/content.json- এ নির্দেশ করুন এবং আমাদের নমুনা ভিডিও ক্যাটালগটি দেখুন। কন্টেন্টটিতে png ফর্ম্যাটে পোস্টার ছবির URL এবং DASH এবং HLS উভয় স্ট্রিম অন্তর্ভুক্ত রয়েছে। DASH এবং HLS স্ট্রিমগুলি খণ্ডিত mp4 কন্টেইনারে সংরক্ষিত ডিমাক্সড ভিডিও এবং অডিও সোর্সগুলিকে নির্দেশ করে।

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

পরবর্তী ধাপে, রিসিভারকে LOAD অনুরোধের জন্য কল করার পর, আমরা প্রতিটি এন্ট্রির কী (যেমন, bbb, fbb_ad ) স্ট্রিমের URL-এ ম্যাপ করব।

লোড অনুরোধটি আটকান

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

context.start() এ কল করার ঠিক আগে, আপনার js/receiver.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন।

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

পরবর্তী বিভাগে DASH কন্টেন্টের জন্য লোড রিকোয়েস্টের media প্রোপার্টি কীভাবে কনফিগার করতে হয় তা বর্ণনা করা হবে।

নমুনা API DASH কন্টেন্ট ব্যবহার করা

এখন যেহেতু আমরা লোড ইন্টারসেপ্টর প্রস্তুত করেছি, আমরা রিসিভারকে কন্টেন্ট টাইপ নির্দিষ্ট করব। এই তথ্য রিসিভারকে মাস্টার প্লেলিস্ট URL এবং স্ট্রিম MIME টাইপ প্রদান করবে। LOAD ইন্টারসেপ্টরের Promise() এর js/receiver.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

এই ধাপটি সম্পন্ন করার পর আপনি DASH কন্টেন্ট দিয়ে লোড করার চেষ্টা করার জন্য এটি পরীক্ষা করে দেখতে পারেন। আপনি যদি HLS কন্টেন্ট দিয়ে লোডিং পরীক্ষা করতে চান তবে পরবর্তী ধাপটি দেখুন।

নমুনা API HLS কন্টেন্ট ব্যবহার করা

নমুনা API-তে HLS কন্টেন্টের পাশাপাশি DASHও অন্তর্ভুক্ত। আগের ধাপে আমরা যেমন contentType সেট করেছিলাম, তেমনই লোড অনুরোধের নমুনা API-এর HLS url ব্যবহার করার জন্য কিছু অতিরিক্ত বৈশিষ্ট্যের প্রয়োজন হবে। যখন রিসিভার HLS স্ট্রিম চালানোর জন্য কনফিগার করা হয়, তখন প্রত্যাশিত ডিফল্ট কন্টেইনার প্রকার হল ট্রান্সপোর্ট স্ট্রিম (TS)। ফলস্বরূপ, যদি শুধুমাত্র contentUrl প্রপার্টি পরিবর্তন করা হয় তবে রিসিভার TS ফর্ম্যাটে নমুনা MP4 স্ট্রিমগুলি খোলার চেষ্টা করবে। লোড অনুরোধে, MediaInformation অবজেক্টটি অতিরিক্ত বৈশিষ্ট্য সহ পরিবর্তন করা উচিত যাতে রিসিভার জানতে পারে যে সামগ্রীটি TS নয়, MP4 ধরণের। contentUrl এবং contentType প্রপার্টি পরিবর্তন করতে লোড ইন্টারসেপ্টরে আপনার js/receiver.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন। অতিরিক্তভাবে HlsSegmentFormat এবং HlsVideoSegmentFormat প্রপার্টি যোগ করুন।

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

এটি পরীক্ষা করে দেখুন

আবার, কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুলটি খুলুন এবং আপনার অ্যাপ আইডিটিকে আপনার রিসিভারের অ্যাপ আইডিতে সেট করুন। কাস্ট বোতামটি ব্যবহার করে আপনার ডিভাইসটি নির্বাচন করুন।

"লোড মিডিয়া" ট্যাবে যান। এবার "লোড বাই কন্টেন্ট" বোতামের পাশে "কন্টেন্ট URL" ক্ষেত্রের লেখাটি মুছে ফেলুন , যা আমাদের অ্যাপ্লিকেশনকে আমাদের মিডিয়াতে শুধুমাত্র contentId রেফারেন্স সম্বলিত একটি LOAD অনুরোধ পাঠাতে বাধ্য করবে।

ধরে নিচ্ছি যে রিসিভারে আপনার পরিবর্তনগুলি সবকিছু ঠিকঠাকভাবে কাজ করেছে, ইন্টারসেপ্টরের উচিত MediaInfo অবজেক্টটিকে এমন কিছুতে রূপ দেওয়ার যত্ন নেওয়া যা SDK স্ক্রিনে চালাতে পারে।

আপনার মিডিয়া সঠিকভাবে চলছে কিনা তা দেখতে "কন্টেন্ট অনুসারে লোড করুন" বোতামে ক্লিক করুন। content.json ফাইলে Content ID অন্য ID তে পরিবর্তন করতে দ্বিধা করবেন না।

১০. স্মার্ট ডিসপ্লের জন্য অপ্টিমাইজেশন

স্মার্ট ডিসপ্লে হলো এমন ডিভাইস যার স্পর্শ কার্যকারিতা রয়েছে এবং রিসিভার অ্যাপ্লিকেশনগুলিকে স্পর্শ-সক্ষম নিয়ন্ত্রণ সমর্থন করার অনুমতি দেয়।

এই বিভাগটি ব্যাখ্যা করে যে স্মার্ট ডিসপ্লেতে চালু হলে আপনার রিসিভার অ্যাপ্লিকেশনটি কীভাবে অপ্টিমাইজ করবেন এবং প্লেয়ার নিয়ন্ত্রণগুলি কীভাবে কাস্টমাইজ করবেন।

এই কাস্টমাইজেশনটি CAF-প্রদত্ত বিল্ট-ইন প্লেয়ার UI <cast-media-player> উপাদান ব্যবহার করে। যদি এই উপাদানটি ব্যবহার না করা হয়, তাহলে UI অবস্থা ট্র্যাকিং, ব্র্যান্ডিং এবং অন্যান্য কাস্টমাইজেশন ম্যানুয়ালি করতে হবে।

যদি আপনি একটি নতুন টাচ-সক্ষম কাস্ট ডিভাইস ব্যবহার করেন, তাহলে Cast SDK ডেভেলপারের কনসোলে এটি নিবন্ধন করতে ভুলবেন না। রেফারেন্সের জন্য আপনি এই কোডল্যাবের বিভাগ 3- এ বর্ণিত পদক্ষেপগুলি অনুসরণ করতে পারেন।

UI নিয়ন্ত্রণ অ্যাক্সেস করা

স্মার্ট ডিসপ্লের জন্য UI Controls অবজেক্টটি cast.framework.ui.Controls.GetInstance() ব্যবহার করে অ্যাক্সেস করা যেতে পারে। context.start() এর উপরে আপনার js/receiver.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

যদি আপনি <cast-media-player> উপাদানটি ব্যবহার না করেন, তাহলে আপনাকে CastReceiverOptions এ touchScreenOptimizedApp সেট করতে হবে। এই কোডল্যাবে আমরা <cast-media-player> উপাদানটি ব্যবহার করছি।

context.start({ touchScreenOptimizedApp: true });

MetadataType এবং MediaStatus.supportedMediaCommands উপর ভিত্তি করে প্রতিটি স্লটে ডিফল্ট নিয়ন্ত্রণ বোতামগুলি বরাদ্দ করা হয়।

ভিডিও নিয়ন্ত্রণ

MetadataType.MOVIE , MetadataType.TV_SHOW , এবং MetadataType.GENERIC এর জন্য, স্মার্ট ডিসপ্লের জন্য UI Controls অবজেক্টটি নীচের উদাহরণের মতো প্রদর্শিত হবে।

1. --playback-logo-image
2. MediaMetadata.subtitle
3. MediaMetadata.title
4. MediaStatus.currentTime
5. MediaInformation.duration
6. ControlsSlot.SLOT_SECONDARY_1 : ControlsButton.QUEUE_PREV
7. ControlsSlot.SLOT_PRIMARY_1 : ControlsButton.SEEK_BACKWARD_30
8. PLAY/PAUSE
9. ControlsSlot.SLOT_PRIMARY_2 : ControlsButton.SEEK_FORWARD_30
10. ControlsSlot.SLOT_SECONDARY_2 : ControlsButton.QUEUE_NEXT

অডিও নিয়ন্ত্রণ

MetadataType.MUSIC_TRACK এর জন্য, স্মার্ট ডিসপ্লের জন্য UI Controls অবজেক্টটি নীচের মত প্রদর্শিত হবে:

1. --playback-logo-image
2. MusicTrackMediaMetadata.albumName
3. MusicTrackMediaMetadata.title
4. MusicTrackMediaMetadata.albumArtist
5. MusicTrackMediaMetadata.images[0]
6. MediaStatus.currentTime
7. MediaInformation.duration
8. ControlsSlot.SLOT_SECONDARY_1 : ControlsButton.NO_BUTTON
9. ControlsSlot.SLOT_PRIMARY_1 : ControlsButton.QUEUE_PREV
10. PLAY/PAUSE
11. ControlsSlot.SLOT_PRIMARY_2 : ControlsButton.QUEUE_NEXT
12. ControlsSlot.SLOT_SECONDARY_2 : ControlsButton.NO_BUTTON

সমর্থিত মিডিয়া কমান্ড আপডেট করা হচ্ছে

UI Controls অবজেক্ট MediaStatus.supportedMediaCommands এর উপর ভিত্তি করে ControlsButton দেখানো হচ্ছে কিনা তাও নির্ধারণ করে।

যখন supportedMediaCommands এর মান ALL_BASIC_MEDIA এর সমান হয়, তখন ডিফল্ট নিয়ন্ত্রণ বিন্যাসটি নীচের মত প্রদর্শিত হবে:

যখন supportedMediaCommands এর মান ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT সমান হয়, তখন ডিফল্ট নিয়ন্ত্রণ বিন্যাসটি নীচের মত প্রদর্শিত হবে:

যখন supportedMediaCommands এর মান PAUSE | QUEUE_PREV | QUEUE_NEXT সমান হয়, তখন ডিফল্ট নিয়ন্ত্রণ বিন্যাসটি নীচের মত প্রদর্শিত হবে:

যখন টেক্সট ট্র্যাকগুলি উপলব্ধ থাকে, তখন ক্লোজড ক্যাপশন বোতামটি সর্বদা SLOT_1 এ প্রদর্শিত হবে।

রিসিভার কনটেক্সট শুরু করার পর supportedMediaCommands এর মান গতিশীলভাবে পরিবর্তন করতে, আপনি PlayerManager.setSupportedMediaCommands কল করে মানটি ওভাররাইড করতে পারেন। এছাড়াও, আপনি addSupportedMediaCommands ব্যবহার করে একটি নতুন কমান্ড যোগ করতে পারেন অথবা removeSupportedMediaCommands ব্যবহার করে একটি বিদ্যমান কমান্ড অপসারণ করতে পারেন।

নিয়ন্ত্রণ বোতাম কাস্টমাইজ করা

আপনি PlayerDataBinder ব্যবহার করে নিয়ন্ত্রণগুলি কাস্টমাইজ করতে পারেন। আপনার নিয়ন্ত্রণগুলির প্রথম স্লট সেট করতে touchControls এর নীচে আপনার js/receiver.js ফাইলে নিম্নলিখিত কোডটি যুক্ত করুন:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

১১. স্মার্ট ডিসপ্লেতে মিডিয়া ব্রাউজ বাস্তবায়ন করা

মিডিয়া ব্রাউজ হল একটি CAF রিসিভার বৈশিষ্ট্য যা ব্যবহারকারীদের টাচ ডিভাইসে অতিরিক্ত কন্টেন্ট অন্বেষণ করতে দেয়। এটি বাস্তবায়নের জন্য আপনাকে PlayerDataBinder ব্যবহার করে BrowseContent UI সেট করতে হবে। এরপর আপনি যে কন্টেন্টটি প্রদর্শন করতে চান তার উপর ভিত্তি করে BrowseItems দিয়ে এটি পূরণ করতে পারেন।

ব্রাউজ কন্টেন্ট

নিচে BrowseContent UI এবং এর বৈশিষ্ট্যগুলির একটি উদাহরণ দেওয়া হল:

1. BrowseContent.title
2. BrowseContent.items

আকৃতির অনুপাত

আপনার ছবির সম্পদের জন্য সেরা আকৃতির অনুপাত নির্বাচন করতে targetAspectRatio property ব্যবহার করুন। CAF রিসিভার SDK দ্বারা তিনটি আকৃতির অনুপাত সমর্থিত: SQUARE_1_TO_1 , PORTRAIT_2_TO_3 , LANDSCAPE_16_TO_9 .

আইটেম ব্রাউজ করুন

প্রতিটি আইটেমের শিরোনাম, সাবটাইটেল, সময়কাল এবং ছবি প্রদর্শন করতে BrowseItem ব্যবহার করুন:

1. BrowseItem.image
2. BrowseItem.duration
3. BrowseItem.title
4. BrowseItem.subtitle

মিডিয়া ব্রাউজ ডেটা সেট করুন

আপনি setBrowseContent এ কল করে ব্রাউজিংয়ের জন্য মিডিয়া কন্টেন্টের একটি তালিকা প্রদান করতে পারেন। আপনার playerDataBinder এর নীচে আপনার js/receiver.js ফাইলে এবং আপনার MEDIA_CHANGED ইভেন্ট লিসেনারের মধ্যে "Up Next" শিরোনাম সহ ব্রাউজ আইটেমগুলি সেট করতে নিম্নলিখিত কোডটি যুক্ত করুন।

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

মিডিয়া ব্রাউজ আইটেমে ক্লিক করলে LOAD ইন্টারসেপ্টরটি ট্রিগার হবে। request.media.contentId ম্যাপ করার জন্য নিম্নলিখিত কোডটি আপনার LOAD ইন্টারসেপ্টরে যোগ করুন request.media.entity থেকে media browse আইটেমে:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

মিডিয়া ব্রাউজ UI অপসারণ করতে আপনি BrowseContent অবজেক্টটিকে null এ সেট করতে পারেন।

১২. রিসিভার অ্যাপস ডিবাগ করা

কাস্ট রিসিভার SDK ডেভেলপারদের জন্য CastDebugLogger API এবং লগ ক্যাপচার করার জন্য একটি সহযোগী কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল ব্যবহার করে সহজেই রিসিভার অ্যাপগুলি ডিবাগ করার আরেকটি বিকল্প প্রদান করে।

★ দ্রষ্টব্য:

কাস্ট ডিবাগ লগার API ব্যবহার করার জন্য, আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি Google Cast SDK ডেভেলপার কনসোলে নিবন্ধন করতে হবে এবং 1.44 বা তার বেশি সংস্করণের একটি ডিভাইস ফার্মওয়্যার সংস্করণ ব্যবহার করতে হবে।

আরম্ভকরণ

API অন্তর্ভুক্ত করতে আপনার index.html ফাইলে CastDebugLogger সোর্স স্ক্রিপ্ট যোগ করুন। সোর্সটি Cast Receiver SDK ঘোষণার পরে <head> ট্যাগে ঘোষণা করা উচিত।

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

ফাইলের উপরে এবং playerManager এর নিচে js/receiver.js এ, CastDebugLogger ইনস্ট্যান্স পুনরুদ্ধার করতে এবং লগারটি সক্ষম করতে নিম্নলিখিত কোডটি যোগ করুন:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

সতর্কতা: আপনার প্রোডাকশন রিসিভারের জন্য setEnabled কে false এ পরিবর্তন করতে ভুলবেন না।

যখন ডিবাগ লগার সক্রিয় থাকে, তখন রিসিভারে DEBUG MODE প্রদর্শনকারী একটি ওভারলে প্রদর্শিত হবে।

লগ প্লেয়ার ইভেন্ট

CastDebugLogger ব্যবহার করে আপনি সহজেই CAF রিসিভার SDK দ্বারা চালিত প্লেয়ার ইভেন্টগুলি লগ করতে পারেন এবং ইভেন্ট ডেটা লগ করার জন্য বিভিন্ন লগার স্তর ব্যবহার করতে পারেন। loggerLevelByEvents কনফিগারেশন cast.framework.events.EventType এবং cast.framework.events.category ব্যবহার করে কোন ইভেন্টগুলি লগ করা হবে তা নির্দিষ্ট করে।

যখন কোনও প্লেয়ার CORE ইভেন্ট ট্রিগার হয় অথবা কোনও mediaStatus পরিবর্তন সম্প্রচারিত হয় তখন লগ ইন করার জন্য castDebugLogger ঘোষণার নীচে নিম্নলিখিত কোডটি যুক্ত করুন:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

লগ বার্তা এবং কাস্টম ট্যাগ

CastDebugLogger API আপনাকে লগ বার্তা তৈরি করতে দেয় যা বিভিন্ন রঙের সাথে রিসিভার ডিবাগ ওভারলেতে প্রদর্শিত হয়। নিম্নলিখিত লগ পদ্ধতিগুলি উপলব্ধ, সর্বোচ্চ থেকে সর্বনিম্ন অগ্রাধিকার অনুসারে তালিকাভুক্ত:

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

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

লগগুলিকে কার্যকরভাবে দেখানোর জন্য, আপনার LOAD ইন্টারসেপ্টরে লগ যোগ করুন।

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

প্রতিটি কাস্টম ট্যাগের জন্য loggerLevelByTags এ লগ লেভেল সেট করে আপনি ডিবাগ ওভারলেতে কোন বার্তাগুলি প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, লগ লেভেল cast.framework.LoggerLevel.DEBUG সহ একটি কাস্টম ট্যাগ সক্ষম করলে ত্রুটি, সতর্কতা, তথ্য এবং ডিবাগ লগ বার্তা সহ সমস্ত বার্তা প্রদর্শিত হবে। WARNING স্তর সহ একটি কাস্টম ট্যাগ সক্ষম করলে কেবল ত্রুটি এবং সতর্কতা লগ বার্তা প্রদর্শিত হবে।

loggerLevelByTags কনফিগারেশন ঐচ্ছিক। যদি একটি কাস্টম ট্যাগ তার লগার স্তরের জন্য কনফিগার করা না থাকে, তাহলে সমস্ত লগ বার্তা ডিবাগ ওভারলেতে প্রদর্শিত হবে।

CORE ইভেন্ট লগারের নিচে নিম্নলিখিত কোডটি যোগ করুন:

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

ডিবাগ ওভারলে

কাস্ট ডিবাগ লগার রিসিভারে একটি ডিবাগ ওভারলে প্রদান করে যা কাস্ট ডিভাইসে আপনার কাস্টম লগ বার্তা প্রদর্শন করে। ডিবাগ ওভারলে টগল করতে showDebugLogs এবং ওভারলেতে লগ বার্তা সাফ করতে clearDebugLogs ব্যবহার করুন।

আপনার রিসিভারে ডিবাগ ওভারলে প্রিভিউ করতে নিম্নলিখিত কোডটি যোগ করুন।

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

১৩. অভিনন্দন

এখন তুমি জানো কিভাবে Cast Web Receiver SDK ব্যবহার করে একটি কাস্টম ওয়েব রিসিভার অ্যাপ্লিকেশন তৈরি করতে হয়।

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

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

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