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

এই কোডল্যাবটি আপনাকে শেখাবে কিভাবে আপনার বিদ্যমান কাস্টম ওয়েব রিসিভার অ্যাপে কাস্ট ডিবাগ লগার যোগ করবেন।
গুগল কাস্ট কী?
Google Cast SDK আপনার অ্যাপকে Google Cast-সক্ষম ডিভাইসগুলিতে সামগ্রী চালাতে এবং প্লেব্যাক নিয়ন্ত্রণ করতে দেয়। এটি আপনাকে Google Cast ডিজাইন চেকলিস্টের উপর ভিত্তি করে প্রয়োজনীয় UI উপাদান সরবরাহ করে।
সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে কাস্ট ব্যবহারকারীর অভিজ্ঞতা সহজ এবং অনুমানযোগ্য করার জন্য গুগল কাস্ট ডিজাইন চেকলিস্ট প্রদান করা হয়েছে।
আমরা কী তৈরি করতে যাচ্ছি?
এই কোডল্যাবটি সম্পন্ন করার পর, আপনার কাছে একটি কাস্টম ওয়েব রিসিভার থাকবে যা কাস্ট ডিবাগ লগারের সাথে ইন্টিগ্রেটেড থাকবে।
বিস্তারিত এবং আরও তথ্যের জন্য কাস্ট ডিবাগ লগার নির্দেশিকা দেখুন।
তুমি কি শিখবে
- ওয়েব রিসিভার ডেভেলপমেন্টের জন্য আপনার পরিবেশ কীভাবে সেট আপ করবেন।
- আপনার কাস্ট রিসিভারে ডিবাগ লগার কীভাবে সংহত করবেন।
তোমার যা লাগবে
- সর্বশেষ গুগল ক্রোম ব্রাউজার।
- HTTPS হোস্টিং পরিষেবা যেমন Firebase Hosting অথবা ngrok ।
- ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা Chromecast বা Android TV এর মতো একটি Google Cast ডিভাইস।
- HDMI ইনপুট সহ একটি টিভি বা মনিটর।
অভিজ্ঞতা
- আপনার পূর্ববর্তী কাস্ট অভিজ্ঞতা থাকতে হবে এবং কাস্ট ওয়েব রিসিভার কীভাবে কাজ করে তা বুঝতে হবে।
- আপনার পূর্ববর্তী ওয়েব ডেভেলপমেন্ট জ্ঞান থাকতে হবে।
- আপনার টিভি দেখার পূর্ব জ্ঞানও প্রয়োজন :)
আপনি এই টিউটোরিয়ালটি কীভাবে ব্যবহার করবেন?
ওয়েব অ্যাপ তৈরির ক্ষেত্রে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
টিভি দেখার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
2. নমুনা কোড পান
আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন...
এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।
৩. আপনার রিসিভার স্থানীয়ভাবে স্থাপন করা
আপনার ওয়েব রিসিভারটি একটি কাস্ট ডিভাইসের সাথে ব্যবহার করতে সক্ষম হওয়ার জন্য, এটি এমন কোথাও হোস্ট করা প্রয়োজন যেখানে আপনার কাস্ট ডিভাইসটি এটিতে পৌঁছাতে পারে। যদি আপনার কাছে ইতিমধ্যেই এমন একটি সার্ভার থাকে যা https সমর্থন করে, তাহলে নিম্নলিখিত নির্দেশাবলী এড়িয়ে যান এবং URL টি নোট করুন , কারণ পরবর্তী বিভাগে আপনার এটির প্রয়োজন হবে।
যদি আপনার ব্যবহারের জন্য কোন সার্ভার উপলব্ধ না থাকে, তাহলে আপনি Firebase Hosting অথবা ngrok ব্যবহার করতে পারেন।
সার্ভার চালান
আপনার পছন্দের পরিষেবা সেট আপ হয়ে গেলে, app-start নেভিগেট করুন এবং আপনার সার্ভার শুরু করুন।
আপনার হোস্ট করা রিসিভারের URL টি নোট করে রাখুন। আপনি পরবর্তী বিভাগে এটি ব্যবহার করবেন।
৪. কাস্ট ডেভেলপার কনসোলে একটি অ্যাপ্লিকেশন নিবন্ধন করুন
Chromecast ডিভাইসে এই কোডল্যাবে তৈরি একটি কাস্টম ওয়েব রিসিভার চালানোর জন্য আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনটি নিবন্ধন করতে হবে। আপনার অ্যাপ্লিকেশনটি নিবন্ধন করার পরে, আপনি একটি অ্যাপ্লিকেশন আইডি পাবেন যা আপনার প্রেরক অ্যাপ্লিকেশনটিকে API কল করার জন্য ব্যবহার করতে হবে, যেমন একটি রিসিভার অ্যাপ্লিকেশন চালু করার জন্য।

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

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

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

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

আপনার কাস্ট ডিভাইসের পিছনে মুদ্রিত সিরিয়াল নম্বরটি লিখুন এবং এটিকে একটি বর্ণনামূলক নাম দিন। Google Cast SDK ডেভেলপার কনসোল অ্যাক্সেস করার সময় Chrome এ আপনার স্ক্রিন কাস্ট করেও আপনি আপনার সিরিয়াল নম্বরটি খুঁজে পেতে পারেন।
আপনার রিসিভার এবং ডিভাইসটি পরীক্ষার জন্য প্রস্তুত হতে ৫-১৫ মিনিট সময় লাগবে। ৫-১৫ মিনিট অপেক্ষা করার পর আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি রিবুট করতে হবে।
৫. নমুনা অ্যাপটি চালান

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

- ডিফল্ট
CC1AD845রিসিভার আইডি ব্যবহার করুন এবংSET APP IDবোতামে ক্লিক করুন। - উপরের বাম দিকের কাস্ট বোতামে ক্লিক করুন এবং আপনার Google Cast-সক্ষম ডিভাইসটি নির্বাচন করুন।

- উপরে
LOAD MEDIAট্যাবে নেভিগেট করুন।

- অনুরোধের ধরণ রেডিও বোতামটি
LOADএ পরিবর্তন করুন। - একটি নমুনা ভিডিও চালাতে
SEND REQUESTবোতামে ক্লিক করুন। - ডিফল্ট রিসিভার ব্যবহার করে মৌলিক রিসিভার কার্যকারিতা কেমন দেখায় তা দেখানোর জন্য ভিডিওটি আপনার Google Cast-সক্ষম ডিভাইসে চালানো শুরু হবে।
৬. শুরুর প্রকল্পটি প্রস্তুত করুন
আপনার ডাউনলোড করা স্টার্ট অ্যাপটিতে Google Cast-এর জন্য সাপোর্ট যোগ করতে হবে। এখানে কিছু Google Cast পরিভাষা দেওয়া হল যা আমরা এই কোডল্যাবে ব্যবহার করব:
- একটি প্রেরক অ্যাপ একটি মোবাইল ডিভাইস বা ল্যাপটপে চলে,
- একটি রিসিভার অ্যাপ গুগল কাস্ট বা অ্যান্ড্রয়েড টিভি ডিভাইসে চলে।
এখন আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে স্টার্টার প্রজেক্টের উপরে তৈরি করতে প্রস্তুত:
- নির্বাচন করুন
আপনার নমুনা কোড ডাউনলোড থেকে app-startডিরেক্টরি। -
js/receiver.jsএবংindex.htmlখুলুন।
মনে রাখবেন, এই কোডল্যাবটি যখন আপনি কাজ করছেন, তখন http-server আপনার করা পরিবর্তনগুলি বুঝতে পারছে। যদি তা না হয়, তাহলে http-server বন্ধ করে পুনরায় চালু করার চেষ্টা করুন।
অ্যাপ ডিজাইন
রিসিভার অ্যাপটি কাস্ট সেশন শুরু করে এবং প্রেরকের কাছ থেকে লোড অনুরোধ (যেমন মিডিয়া প্লেব্যাক করার আদেশ) না আসা পর্যন্ত স্ট্যান্ডবাই থাকবে।
অ্যাপটিতে index.html এ সংজ্ঞায়িত একটি প্রধান ভিউ এবং js/receiver.js নামক একটি জাভাস্ক্রিপ্ট ফাইল রয়েছে যাতে আমাদের রিসিভারকে কাজ করার জন্য সমস্ত যুক্তি রয়েছে।
index.html সম্পর্কে
এই html ফাইলটিতে আমাদের রিসিভার অ্যাপের সমস্ত UI রয়েছে।
রিসিভার.জেএস
এই স্ক্রিপ্টটি আমাদের রিসিভার অ্যাপের সমস্ত যুক্তি পরিচালনা করে।
সচরাচর জিজ্ঞাস্য
৭. CastDebugLogger API এর সাথে একীভূত করুন
CastDebugLogger API ব্যবহার করে ডেভেলপারদের সহজেই আপনার রিসিভার অ্যাপটি ডিবাগ করার জন্য Cast Receiver SDK আরেকটি বিকল্প প্রদান করে।
বিস্তারিত এবং আরও তথ্যের জন্য কাস্ট ডিবাগ লগার নির্দেশিকা দেখুন।
আরম্ভকরণ
index.html এ ওয়েব রিসিভার 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 ইনস্ট্যান্সটি পান এবং একটি READY ইভেন্ট লিসেনারে লগারটি সক্ষম করুন:
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);
}
});
যখন ডিবাগ লগার সক্রিয় থাকে, তখন রিসিভারে DEBUG MODE একটি ওভারলে প্রদর্শিত হয়।

লগ প্লেয়ার ইভেন্ট
CastDebugLogger ব্যবহার করে আপনি সহজেই Cast Web Receiver SDK দ্বারা চালিত প্লেয়ার ইভেন্টগুলি লগ করতে পারেন এবং ইভেন্ট ডেটা লগ করার জন্য বিভিন্ন লগার স্তর ব্যবহার করতে পারেন। loggerLevelByEvents কনফিগারেশন cast.framework.events.EventType এবং cast.framework.events.category ব্যবহার করে লগ করা ইভেন্টগুলি নির্দিষ্ট করে।
প্লেয়ার CORE ইভেন্ট ট্রিগার হলে অথবা mediaStatus পরিবর্তন সম্প্রচারিত হলে লগ ইন করতে READY ইভেন্ট লিসেনারের নিচে নিম্নলিখিতটি যোগ করুন:
...
// 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);
প্রতিটি লগ পদ্ধতির জন্য, প্রথম প্যারামিটারটি একটি কাস্টম ট্যাগ এবং দ্বিতীয় প্যারামিটারটি হল লগ বার্তা । ট্যাগটি আপনার সহায়ক মনে হয় এমন যেকোনো স্ট্রিং হতে পারে।
লগগুলিকে কার্যকরভাবে দেখানোর জন্য, আপনার LOAD ইন্টারসেপ্টরে লগ যোগ করুন।
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
loadRequestData => {
// Listed in order from highest to lowest priority.
castDebugLogger.error(LOG_TAG, 'Test error log');
castDebugLogger.warn(LOG_TAG, 'Test warn log');
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);
castDebugLogger.debug(LOG_TAG, 'Test debug log');
return loadRequestData;
}
);
প্রতিটি কাস্টম ট্যাগের জন্য loggerLevelByTags এ লগ লেভেল সেট করে আপনি ডিবাগ ওভারলেতে কোন বার্তাগুলি প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, লগ লেভেল cast.framework.LoggerLevel.DEBUG সহ একটি কাস্টম ট্যাগ সক্ষম করলে ত্রুটি, সতর্কতা, তথ্য এবং ডিবাগ লগ বার্তা সহ সমস্ত বার্তা প্রদর্শিত হবে। আরেকটি উদাহরণ হল যে WARNING স্তর সহ একটি কাস্টম ট্যাগ সক্ষম করলে কেবল ত্রুটি এবং সতর্কতা লগ বার্তা প্রদর্শিত হবে।
loggerLevelByTags কনফিগারেশন ঐচ্ছিক। যদি একটি কাস্টম ট্যাগ তার লগার স্তরের জন্য কনফিগার করা না থাকে, তাহলে সমস্ত লগ বার্তা ডিবাগ ওভারলেতে প্রদর্শিত হবে।
loggerLevelByEvents কলের নিচে নিম্নলিখিতটি যোগ করুন:
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
৮. ডিবাগ ওভারলে ব্যবহার করা
কাস্ট ডিবাগ লগার আপনার কাস্টম লগ বার্তাগুলি দেখানোর জন্য রিসিভারে একটি ডিবাগ ওভারলে প্রদান করে। ডিবাগ ওভারলে টগল করতে showDebugLogs এবং ওভারলেতে লগ বার্তাগুলি সাফ করতে clearDebugLogs ব্যবহার করুন।
আপনার রিসিভারে ডিবাগ ওভারলে প্রিভিউ করতে READY ইভেন্ট লিসেনারে নিম্নলিখিতগুলি যোগ করুন:
// 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);
// Show debug overlay.
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay.
castDebugLogger.clearDebugLogs();
}
});

৯. কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল ব্যবহার করা
সংক্ষিপ্ত বিবরণ
কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল আপনার লগগুলি ক্যাপচার করে এবং ডিবাগ ওভারলে নিয়ন্ত্রণ করে।
আপনার রিসিভারকে CaC টুলের সাথে সংযুক্ত করার দুটি উপায় রয়েছে:
একটি নতুন কাস্ট সংযোগ শুরু করুন:
- CaC টুলটি খুলুন, রিসিভার অ্যাপ আইডি সেট করুন এবং রিসিভারে কাস্ট করতে কাস্ট বোতামে ক্লিক করুন।
- একই রিসিভার অ্যাপ আইডি সহ একই ডিভাইসে একটি পৃথক প্রেরক অ্যাপ কাস্ট করুন।
- প্রেরক অ্যাপ থেকে মিডিয়া লোড করুন এবং লগ বার্তাগুলি টুলে দেখা যাবে।
একটি বিদ্যমান কাস্ট সেশনে যোগদান করুন:
- রিসিভার SDK অথবা প্রেরক SDK ব্যবহার করে চলমান কাস্ট সেশন আইডি পান। রিসিভারের দিক থেকে, Chrome রিমোট ডিবাগার কনসোলে সেশন আইডি পেতে নিম্নলিখিতটি লিখুন:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
অথবা আপনি একটি সংযুক্ত ওয়েব প্রেরকের কাছ থেকে সেশন আইডি পেতে পারেন, নিম্নলিখিত পদ্ধতিটি ব্যবহার করুন:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

- CaC টুলে সেশন আইডি ইনপুট করুন এবং
RESUMEবোতামে ক্লিক করুন। - কাস্ট বোতামটি সংযুক্ত থাকা উচিত এবং টুলে লগ বার্তা দেখানো শুরু করা উচিত।
চেষ্টা করার জিনিস
এরপর আমরা আপনার নমুনা রিসিভারের লগগুলি দেখতে CaC টুল ব্যবহার করব।
- CaC টুলটি খুলুন।

- আপনার নমুনা অ্যাপের রিসিভার অ্যাপ আইডি লিখুন এবং
SET APP IDবোতামে ক্লিক করুন। - উপরের বাম দিকের কাস্ট বোতামে ক্লিক করুন এবং আপনার রিসিভার খুলতে আপনার Google Cast-সক্ষম ডিভাইসটি নির্বাচন করুন।

- উপরে
LOAD MEDIAট্যাবে নেভিগেট করুন।

- অনুরোধের ধরণ রেডিও বোতামটি
LOADএ পরিবর্তন করুন। - একটি নমুনা ভিডিও চালাতে
SEND REQUESTবোতামে ক্লিক করুন।

- আপনার ডিভাইসে এখন একটি নমুনা ভিডিও চালানো উচিত। টুলের নীচে "লগ মেসেজ" ট্যাবে আপনার পূর্ববর্তী ধাপগুলির লগগুলি প্রদর্শিত হতে শুরু করবে।
লগগুলি অনুসন্ধান করতে এবং রিসিভার নিয়ন্ত্রণ করতে নিম্নলিখিত বৈশিষ্ট্যগুলি অন্বেষণ করার চেষ্টা করুন:
-
MEDIA INFOএবং মিডিয়া স্ট্যাটাস দেখতে মিডিয়া তথ্য অথবাMEDIA STATUSট্যাবে ক্লিক করুন। - রিসিভারে একটি ডিবাগ ওভারলে দেখতে
SHOW OVERLAYবোতামে ক্লিক করুন। - রিসিভার অ্যাপটি পুনরায় লোড করতে এবং আবার কাস্ট করতে
CLEAR CACHE AND STOPবোতামটি ব্যবহার করুন।
১০. অভিনন্দন
এখন আপনি জানেন কিভাবে সর্বশেষ কাস্ট রিসিভার SDK ব্যবহার করে আপনার কাস্ট-সক্ষম ওয়েব রিসিভার অ্যাপে কাস্ট ডিবাগ লগার যোগ করবেন।
আরও বিস্তারিত জানার জন্য, কাস্ট ডিবাগ লগার এবং কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল ডেভেলপার গাইড দেখুন।