1. সংক্ষিপ্ত বিবরণ
এই কোডল্যাব আপনাকে শেখাবে কিভাবে একটি কাস্টম ওয়েব রিসিভার অ্যাপ তৈরি করতে হয় যা Cast Live Breaks API ব্যবহার করে।
গুগল কাস্ট কী?
গুগল কাস্ট ব্যবহারকারীদের মোবাইল ডিভাইস থেকে টিভিতে কন্টেন্ট কাস্ট করার সুযোগ দেয়। এরপর ব্যবহারকারীরা টিভিতে মিডিয়া প্লেব্যাকের জন্য তাদের মোবাইল ডিভাইসটিকে রিমোট কন্ট্রোল হিসেবে ব্যবহার করতে পারবেন।
Google Cast SDK আপনাকে আপনার অ্যাপটি টিভি বা সাউন্ড সিস্টেম নিয়ন্ত্রণ করতে প্রসারিত করতে দেয়। Cast SDK আপনাকে Google Cast ডিজাইন চেকলিস্টের উপর ভিত্তি করে প্রয়োজনীয় UI উপাদান যোগ করতে দেয়।
সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে কাস্ট ব্যবহারকারীর অভিজ্ঞতা সহজ এবং অনুমানযোগ্য করার জন্য গুগল কাস্ট ডিজাইন চেকলিস্ট প্রদান করা হয়েছে।
আমরা কী তৈরি করতে যাচ্ছি?
এই কোডল্যাবটি সম্পন্ন করার পর, আপনি একটি কাস্ট রিসিভার তৈরি করতে পারবেন যা লাইভ API গুলির সুবিধা গ্রহণ করবে।
তুমি কি শিখবে
- কাস্টে লাইভ ভিডিও কন্টেন্ট কীভাবে পরিচালনা করবেন।
- কাস্ট দ্বারা সমর্থিত বিভিন্ন লাইভ স্ট্রিমিং পরিস্থিতি কীভাবে কনফিগার করবেন।
- আপনার লাইভস্ট্রিমে প্রোগ্রামের ডেটা কীভাবে যোগ করবেন
তোমার যা লাগবে
- সর্বশেষ গুগল ক্রোম ব্রাউজার।
- HTTPS হোস্টিং পরিষেবা যেমন Firebase Hosting অথবা ngrok ।
- ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা Chromecast বা Android TV এর মতো একটি Google Cast ডিভাইস।
- HDMI ইনপুট সহ একটি টিভি বা মনিটর, অথবা একটি Google Home Hub
অভিজ্ঞতা
- আপনার পূর্ববর্তী ওয়েব ডেভেলপমেন্ট জ্ঞান থাকতে হবে।
- কাস্ট প্রেরক এবং গ্রহণকারী অ্যাপ্লিকেশন তৈরির পূর্ব অভিজ্ঞতা।
আপনি এই টিউটোরিয়ালটি কীভাবে ব্যবহার করবেন?
ওয়েব অ্যাপ তৈরির ক্ষেত্রে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
2. নমুনা কোড পান
আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন...
এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।
৩. আপনার রিসিভার স্থানীয়ভাবে স্থাপন করা
আপনার ওয়েব রিসিভারটি একটি কাস্ট ডিভাইসের সাথে ব্যবহার করতে সক্ষম হওয়ার জন্য, এটি এমন কোথাও হোস্ট করা প্রয়োজন যেখানে আপনার কাস্ট ডিভাইসটি এটিতে পৌঁছাতে পারে। যদি আপনার কাছে ইতিমধ্যেই এমন একটি সার্ভার থাকে যা https সমর্থন করে, তাহলে নিম্নলিখিত নির্দেশাবলী এড়িয়ে যান এবং URL টি নোট করুন , কারণ পরবর্তী বিভাগে আপনার এটির প্রয়োজন হবে।
যদি আপনার ব্যবহারের জন্য কোন সার্ভার উপলব্ধ না থাকে, তাহলে আপনি Firebase Hosting অথবা ngrok ব্যবহার করতে পারেন।
সার্ভার চালান
আপনার পছন্দের পরিষেবা সেট আপ হয়ে গেলে, app-start নেভিগেট করুন এবং আপনার সার্ভার শুরু করুন।
আপনার হোস্ট করা রিসিভারের URL টি নোট করে রাখুন। আপনি পরবর্তী বিভাগে এটি ব্যবহার করবেন।
৪. কাস্ট ডেভেলপার কনসোলে একটি অ্যাপ্লিকেশন নিবন্ধন করুন
Chromecast ডিভাইসে এই কোডল্যাবের অন্তর্নির্মিত একটি কাস্টম রিসিভার চালানোর জন্য আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনটি নিবন্ধন করতে হবে। আপনার অ্যাপ্লিকেশনটি নিবন্ধন করার পরে, আপনি একটি অ্যাপ্লিকেশন আইডি পাবেন যা আপনার প্রেরক অ্যাপ্লিকেশনটিকে API কল করার জন্য ব্যবহার করতে হবে, যেমন একটি রিসিভার অ্যাপ্লিকেশন চালু করার জন্য।
"নতুন অ্যাপ্লিকেশন যোগ করুন" এ ক্লিক করুন
"কাস্টম রিসিভার" নির্বাচন করুন, এটিই আমরা তৈরি করছি।
আপনার নতুন রিসিভারের বিবরণ লিখুন, আপনার শেষের URL টি ব্যবহার করতে ভুলবেন না।
শেষ অংশে। আপনার একেবারে নতুন রিসিভারের জন্য নির্ধারিত অ্যাপ্লিকেশন আইডিটি নোট করুন ।
আপনার Google Cast ডিভাইসটি নিবন্ধন করতে হবে যাতে এটি আপনার রিসিভার অ্যাপ্লিকেশনটি প্রকাশ করার আগে অ্যাক্সেস করতে পারে। আপনার রিসিভার অ্যাপ্লিকেশনটি প্রকাশ করার পরে, এটি সমস্ত Google Cast ডিভাইসে উপলব্ধ হবে। এই কোডল্যাবের উদ্দেশ্যে, একটি অপ্রকাশিত রিসিভার অ্যাপ্লিকেশনের সাথে কাজ করার পরামর্শ দেওয়া হচ্ছে।
"নতুন ডিভাইস যোগ করুন" এ ক্লিক করুন
আপনার কাস্ট ডিভাইসের পিছনে মুদ্রিত সিরিয়াল নম্বরটি লিখুন এবং এটিকে একটি বর্ণনামূলক নাম দিন। Google Cast SDK ডেভেলপার কনসোল অ্যাক্সেস করার সময় Chrome এ আপনার স্ক্রিন কাস্ট করেও আপনি আপনার সিরিয়াল নম্বরটি খুঁজে পেতে পারেন।
আপনার রিসিভার এবং ডিভাইসটি পরীক্ষার জন্য প্রস্তুত হতে ৫-১৫ মিনিট সময় লাগবে। ৫-১৫ মিনিট অপেক্ষা করার পর আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি রিবুট করতে হবে।
৫. একটি সহজ লাইভ স্ট্রিম কাস্ট করা
এই কোডল্যাবটি শুরু করার আগে, লাইভ ডেভেলপার গাইডটি পর্যালোচনা করা সহায়ক হতে পারে যা লাইভ API গুলির একটি সারসংক্ষেপ প্রদান করে।
আমাদের প্রেরকের জন্য, আমরা একটি কাস্ট সেশন শুরু করতে Cactool l ব্যবহার করব। রিসিভারটি স্বয়ংক্রিয়ভাবে একটি লাইভস্ট্রিম চালানো শুরু করার জন্য ডিজাইন করা হয়েছে।
রিসিভারটি তিনটি ফাইলের সমন্বয়ে গঠিত। receiver.html নামক একটি মৌলিক HTML ফাইল যার মধ্যে মূল অ্যাপ স্ট্রাকচার রয়েছে। আপনাকে এই ফাইলটি পরিবর্তন করতে হবে না। receiver.js নামে একটি ফাইলও রয়েছে, যাতে রিসিভারের জন্য সমস্ত যুক্তি রয়েছে। অবশেষে, একটি metadata_service.js ও রয়েছে যা পরবর্তীতে কোডল্যাবে প্রোগ্রাম গাইড ডেটা প্রাপ্তির অনুকরণ করতে ব্যবহার করা হবে।
শুরু করতে, Chrome এ Cactool খুলুন। Cast SDK Developer Console-এ আপনাকে যে Receiver Application ID দেওয়া হয়েছিল তা লিখুন এবং Set এ ক্লিক করুন।
ওয়েব রিসিভার কাস্ট অ্যাপ্লিকেশন ফ্রেমওয়ার্ক (CAF)-কে নির্দেশ দিতে হবে যে যে কন্টেন্টটি প্লে করা হবে তা একটি লাইভস্ট্রিম। এটি করার জন্য, নিম্নলিখিত লাইন অফ কোড দিয়ে অ্যাপ্লিকেশনটি পরিবর্তন করুন। এটি receiver.js এ লোড ইন্টারসেপ্টরের মূল অংশে যুক্ত করুন:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
স্ট্রিম টাইপকে LIVE এ সেট করলে CAF এর লাইভ UI সক্ষম হয়। ওয়েব রিসিভার SDK স্বয়ংক্রিয়ভাবে স্ট্রিমের লাইভ প্রান্তে চলে যাবে। লাইভ প্রোগ্রাম গাইড ডেটা এখনও যোগ করা হয়নি তাই স্ক্রাব বারটি স্ট্রিমের সন্ধানযোগ্য-পরিসরের সম্পূর্ণ দৈর্ঘ্য উপস্থাপন করবে।
আপনার পরিবর্তনগুলি receiver.js এ সংরক্ষণ করুন এবং cast বোতামে ক্লিক করে এবং একটি টার্গেট কাস্ট ডিভাইস নির্বাচন করে Cactool- এ একটি Cast সেশন শুরু করুন। লাইভস্ট্রিমটি অবিলম্বে বাজানো শুরু হবে।
৬. প্রোগ্রাম গাইড ডেটা যোগ করা
লাইভ কন্টেন্টের জন্য CAF-এর সহায়তায় এখন রিসিভার এবং প্রেরক অ্যাপ্লিকেশনগুলিতে প্রোগ্রাম গাইড ডেটা প্রদর্শনের জন্য সমর্থন অন্তর্ভুক্ত রয়েছে। কন্টেন্ট প্রদানকারীদের তাদের রিসিভার অ্যাপ্লিকেশনগুলিতে প্রোগ্রামিং মেটাডেটা অন্তর্ভুক্ত করার জন্য জোরালোভাবে উৎসাহিত করা হচ্ছে, বিশেষ করে টিভি চ্যানেলের মতো দীর্ঘস্থায়ী লাইভ স্ট্রিমগুলির জন্য, আরও ভাল শেষ ব্যবহারকারীর অভিজ্ঞতার জন্য।
CAF একটি একক স্ট্রিমে একাধিক প্রোগ্রামের জন্য মেটাডেটা সেট করা সমর্থন করে। মিডিয়ামেটাডেটা অবজেক্টে শুরুর টাইমস্ট্যাম্প এবং সময়কাল সেট করে, রিসিভার স্বয়ংক্রিয়ভাবে প্রেরকদের উপর প্রদর্শিত মেটাডেটা এবং স্ট্রিমে প্লেয়ারের বর্তমান অবস্থানের উপর ভিত্তি করে ওভারলে আপডেট করে। নীচে API এবং তাদের সাধারণ ব্যবহারের একটি নমুনা দেওয়া হল।
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
এই কোডল্যাবের জন্য আমরা আমাদের লাইভস্ট্রিমের জন্য মেটাডেটা প্রদানের জন্য একটি নমুনা মেটাডেটা পরিষেবা ব্যবহার করব। প্রোগ্রাম মেটাডেটার তালিকা তৈরি করতে, একটি কন্টেইনার তৈরি করুন। ContainerMetadata একটি একক মিডিয়া স্ট্রিমের জন্য MediaMetadata অবজেক্টের একটি তালিকা ধারণ করে। প্রতিটি MediaMetadata অবজেক্ট কন্টেইনারের একটি একক অংশকে প্রতিনিধিত্ব করে। যখন প্লেহেড একটি নির্দিষ্ট বিভাগের সীমানার মধ্যে থাকে, তখন এর মেটাডেটা স্বয়ংক্রিয়ভাবে মিডিয়া স্ট্যাটাসে কপি হয়ে যায়। আমাদের পরিষেবা থেকে নমুনা মেটাডেটা ডাউনলোড করতে এবং CAF-কে কন্টেইনার সরবরাহ করতে নিম্নলিখিত কোডটি receiver.js ফাইলে যুক্ত করুন।
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
অতিরিক্তভাবে, লোড ইন্টারসেপ্টরে গাইড ডেটা লোড করার জন্য ফাংশনে একটি কল যোগ করুন:
loadGuideData();
receiver.js ফাইলটি সংরক্ষণ করুন এবং একটি কাস্ট সেশন শুরু করুন। আপনি প্রোগ্রাম শুরুর সময়, শেষের সময় এবং শিরোনাম সবকিছু স্ক্রিনে দেখতে পাবেন।
প্লেহেড যখন কন্টেইনারের একটি নতুন বিভাগে স্থানান্তরিত হয় তখন রিসিভার থেকে সমস্ত প্রেরকের কাছে একটি নতুন মিডিয়া স্ট্যাটাস বার্তা পাঠানো হয় যাতে প্রেরক অ্যাপ্লিকেশনগুলি তাদের UI আপডেট করতে পারে। প্রেরক অ্যাপ্লিকেশনগুলিতে প্রোগ্রামের তথ্য সরবরাহ করা চালিয়ে যাওয়ার জন্য রিসিভার অ্যাপ্লিকেশনগুলিকে মিডিয়া স্ট্যাটাস ইন্টারসেপ্টরে কন্টেইনার মেটাডেটা আপডেট করার পরামর্শ দেওয়া হয়। আমাদের নমুনা পরিষেবাতে আমরা বর্তমান প্রোগ্রাম মেটাডেটা, পাশাপাশি পরবর্তী দুটি প্রোগ্রামের মেটাডেটা ফেরত দিই। একটি স্ট্রিমের জন্য মেটাডেটা আপডেট করতে, একটি নতুন কন্টেইনার তৈরি করুন এবং আগের উদাহরণের মতো setContainerMetadata কল করুন।
৭. অনুসন্ধান নিষ্ক্রিয় করা হচ্ছে
বেশিরভাগ ভিডিও স্ট্রিম এমন অংশ দিয়ে তৈরি যা বিভিন্ন ধরণের ভিডিও ফ্রেম ধারণ করে। অন্যথায় নির্দিষ্ট না করা হলে, CAF ব্যবহারকারীদের এই অংশগুলির মধ্যে অনুসন্ধান করার অনুমতি দেবে। ওয়েব রিসিভার উপলব্ধ কয়েকটি API কল করে এটি নির্দিষ্ট করতে পারে।
লোড ইন্টারসেপ্টরে, SEEK সমর্থিত মিডিয়া কমান্ডটি সরিয়ে ফেলুন। এটি সমস্ত মোবাইল সেন্ডার এবং টাচ ইন্টারফেসে seeking অক্ষম করে। receiver.js এ SDK ইনস্ট্যান্স ভেরিয়েবলের সংজ্ঞার পরে নিম্নলিখিত কোডটি যোগ করুন।
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Ok Google এর মতো সহকারী দ্বারা চালিত ভয়েস সিক কমান্ডগুলি অক্ষম করতে, 60 সেকেন্ড পিছনে যান , সিক ইন্টারসেপ্টর ব্যবহার করা উচিত। প্রতিবার সিক অনুরোধ করা হলে এই ইন্টারসেপ্টরটি কল করা হয়। যদি SEEK সমর্থিত মিডিয়া কমান্ড অক্ষম করা থাকে, তাহলে ইন্টারসেপ্টর সিক অনুরোধটি প্রত্যাখ্যান করবে। receiver.js ফাইলে নিম্নলিখিত কোড স্নিপেট যুক্ত করুন:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
receiver.js ফাইলটি সংরক্ষণ করুন এবং একটি কাস্ট সেশন শুরু করুন। আপনি আর লাইভস্ট্রিমের মধ্যে অনুসন্ধান করতে পারবেন না।
৮. অভিনন্দন
এখন তুমি জানো কিভাবে সর্বশেষ কাস্ট রিসিভার SDK ব্যবহার করে একটি কাস্টম রিসিভার অ্যাপ্লিকেশন তৈরি করতে হয়।
আরও বিস্তারিত জানার জন্য, লাইভ স্ট্রিমিং ডেভেলপারের নির্দেশিকা দেখুন।