1. ওভারভিউ
এই কোডল্যাব আপনাকে শেখাবে কিভাবে কাস্ট লাইভ ব্রেকস API ব্যবহার করে এমন একটি কাস্টম ওয়েব রিসিভার অ্যাপ তৈরি করতে হয়।
Google Cast কি?
Google Cast ব্যবহারকারীদের একটি মোবাইল ডিভাইস থেকে একটি টিভিতে সামগ্রী কাস্ট করার অনুমতি দেয়৷ ব্যবহারকারীরা তখন তাদের মোবাইল ডিভাইসটিকে টিভিতে মিডিয়া প্লেব্যাকের জন্য রিমোট কন্ট্রোল হিসাবে ব্যবহার করতে পারে।
Google Cast SDK আপনাকে একটি টিভি বা সাউন্ড সিস্টেম নিয়ন্ত্রণ করতে আপনার অ্যাপ প্রসারিত করতে দেয়৷ কাস্ট SDK আপনাকে Google Cast ডিজাইন চেকলিস্টের উপর ভিত্তি করে প্রয়োজনীয় UI উপাদান যোগ করতে দেয়।
Google Cast ডিজাইন চেকলিস্ট সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে কাস্ট ব্যবহারকারীর অভিজ্ঞতা সহজ এবং অনুমানযোগ্য করার জন্য প্রদান করা হয়েছে৷
আমরা কি নির্মাণ করা যাচ্ছে?
আপনি যখন এই কোডল্যাবটি সম্পূর্ণ করবেন, তখন আপনি একটি কাস্ট রিসিভার তৈরি করবেন যা লাইভ এপিআইগুলির সুবিধা নেয়৷
আপনি কি শিখবেন
- কাস্টে লাইভ ভিডিও সামগ্রী কীভাবে পরিচালনা করবেন।
- কাস্ট দ্বারা সমর্থিত বিভিন্ন লাইভ স্ট্রিমিং পরিস্থিতিগুলি কীভাবে কনফিগার করবেন।
- কীভাবে আপনার লাইভস্ট্রিমে প্রোগ্রাম ডেটা যুক্ত করবেন
আপনি কি প্রয়োজন হবে
- সর্বশেষ গুগল ক্রোম ব্রাউজার।
- এইচটিটিপিএস হোস্টিং পরিষেবা যেমন ফায়ারবেস হোস্টিং বা এনগ্রোক ।
- একটি গুগল কাস্ট ডিভাইস যেমন ক্রোমকাস্ট বা অ্যান্ড্রয়েড টিভি ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা।
- এইচডিএমআই ইনপুট সহ একটি টিভি বা মনিটর, বা একটি গুগল হোম হাব
অভিজ্ঞতা
- আপনার পূর্ববর্তী ওয়েব বিকাশের জ্ঞান থাকতে হবে।
- পূর্ববর্তী অভিজ্ঞতা বিল্ডিং কাস্ট প্রেরক এবং রিসিভার অ্যাপ্লিকেশন।
আপনি কিভাবে এই টিউটোরিয়াল ব্যবহার করবেন?
How would you rate your experience with building web apps?
2. নমুনা কোড পান
আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন ...
এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।
3. স্থানীয়ভাবে আপনার রিসিভার স্থাপন করা
আপনার কাস্ট ডিভাইস সহ আপনার ওয়েব রিসিভারটি ব্যবহার করতে সক্ষম হতে, এটি কোথাও হোস্ট করা দরকার যেখানে আপনার কাস্ট ডিভাইস এটিতে পৌঁছতে পারে। আপনার কাছে ইতিমধ্যেই https সমর্থন করে এমন একটি সার্ভার উপলব্ধ থাকলে, নিম্নলিখিত নির্দেশাবলী এড়িয়ে যান এবং URL টি নোট করুন , কারণ পরবর্তী বিভাগে আপনার এটির প্রয়োজন হবে৷
আপনার যদি ব্যবহারের জন্য কোনও সার্ভার উপলব্ধ না থাকে তবে আপনি ফায়ারবেস হোস্টিং বা এনগ্রোক ব্যবহার করতে পারেন।
সার্ভার চালান
একবার আপনার পছন্দের পরিষেবা সেট আপ হয়ে গেলে, app-start নেভিগেট করুন এবং আপনার সার্ভার শুরু করুন।
আপনার হোস্ট করা রিসিভারের জন্য URL টি নোট করুন। আপনি পরবর্তী বিভাগে এটি ব্যবহার করা হবে.
4. কাস্ট ডেভেলপার কনসোলে একটি অ্যাপ্লিকেশন নিবন্ধন করুন৷
একটি কাস্টম রিসিভার চালাতে সক্ষম হওয়ার জন্য আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশন নিবন্ধন করতে হবে, এই কোডল্যাবে অন্তর্নির্মিত হিসাবে, Chromecast ডিভাইসে। আপনি আপনার আবেদন নিবন্ধন করার পরে, আপনি একটি অ্যাপ্লিকেশন আইডি পাবেন যা আপনার প্রেরকের অ্যাপ্লিকেশনটিকে API কলগুলি সম্পাদন করতে ব্যবহার করতে হবে, যেমন একটি রিসিভার অ্যাপ্লিকেশন চালু করতে।
"নতুন অ্যাপ্লিকেশন যোগ করুন" ক্লিক করুন
Select "Custom Receiver", this is what we're building.
আপনার নতুন রিসিভারের বিশদটি প্রবেশ করান, আপনি যে ইউআরএলটি শেষ করেছেন তা ব্যবহার করতে ভুলবেন না
শেষ বিভাগে। Make a note of the Application ID assigned to your brand new receiver.
আপনাকে অবশ্যই আপনার গুগল কাস্ট ডিভাইসটিও নিবন্ধভুক্ত করতে হবে যাতে এটি আপনার রিসিভার অ্যাপ্লিকেশনটি প্রকাশের আগে অ্যাক্সেস করতে পারে। একবার আপনি আপনার রিসিভার অ্যাপ্লিকেশন প্রকাশ করলে, এটি সমস্ত Google Cast ডিভাইসগুলিতে উপলব্ধ হবে৷ এই কোডল্যাবের উদ্দেশ্যে এটি একটি অপ্রকাশিত রিসিভার অ্যাপ্লিকেশনের সাথে কাজ করার পরামর্শ দেওয়া হচ্ছে৷
"নতুন ডিভাইস যোগ করুন" ক্লিক করুন
আপনার কাস্ট ডিভাইসের পিছনে প্রিন্ট করা সিরিয়াল নম্বরটি লিখুন এবং এটিকে একটি বর্ণনামূলক নাম দিন। আপনি Google Cast SDK বিকাশকারী কনসোল অ্যাক্সেস করার সময় Chrome এ আপনার স্ক্রীন কাস্ট করে আপনার সিরিয়াল নম্বর খুঁজে পেতে পারেন
আপনার রিসিভার এবং ডিভাইস পরীক্ষার জন্য প্রস্তুত হতে 5-15 মিনিট সময় লাগবে। 5-15 মিনিট অপেক্ষা করার পরে আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি পুনরায় বুট করতে হবে৷
5. একটি সাধারণ লাইভ স্ট্রিম কাস্ট করা
এই কোডল্যাব শুরু করার আগে, লাইভ ডেভেলপার গাইড পর্যালোচনা করা সহায়ক হতে পারে যা লাইভ API-এর একটি ওভারভিউ প্রদান করে।
আমাদের প্রেরকের জন্য, আমরা একটি কাস্ট সেশন শুরু করতে Cactool l ব্যবহার করব। রিসিভারটি স্বয়ংক্রিয়ভাবে একটি লাইভস্ট্রিম চালানো শুরু করার জন্য ডিজাইন করা হয়েছে।
রিসিভার তিনটি ফাইলের সমন্বয়ে গঠিত। একটি বেসিক এইচটিএমএল ফাইল যার নাম receiver.html যা মূল অ্যাপ স্ট্রাকচার ধারণ করে। আপনাকে এই ফাইলটি পরিবর্তন করতে হবে না। এছাড়াও receiver.js নামে একটি ফাইল রয়েছে, যাতে রিসিভারের জন্য সমস্ত যুক্তি রয়েছে। অবশেষে, একটি metadata_service.js আছে যা পরবর্তীতে কোডল্যাবে ব্যবহার করা হবে প্রোগ্রাম গাইড ডেটা প্রাপ্ত করার জন্য।
শুরু করতে, ক্রোমে ক্যাকটুল খুলুন। কাস্ট SDK বিকাশকারী কনসোলে আপনাকে দেওয়া রিসিভার অ্যাপ্লিকেশন আইডি লিখুন এবং সেট এ ক্লিক করুন।
ওয়েব রিসিভার কাস্ট অ্যাপ্লিকেশান ফ্রেমওয়ার্ক (CAF) কে নির্দেশ দেওয়া দরকার যে প্লে করা বিষয়বস্তু একটি লাইভস্ট্রিম। এটি করতে, কোডের নিম্নলিখিত লাইন দিয়ে অ্যাপ্লিকেশনটি সংশোধন করুন। receiver.js এ লোড ইন্টারসেপ্টরের মূল অংশে এটি যোগ করুন:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
স্ট্রিমের ধরনটি LIVE সেট করা CAF এর লাইভ UI সক্ষম করে৷ ওয়েব রিসিভার SDK স্বয়ংক্রিয়ভাবে স্ট্রিমের লাইভ প্রান্তে চলে যাবে। লাইভ প্রোগ্রাম গাইড ডেটা এখনও যোগ করা হয়নি তাই স্ক্রাব বারটি স্ট্রীমের সন্ধানযোগ্য-পরিসীমার সম্পূর্ণ দৈর্ঘ্য উপস্থাপন করবে।
receiver.js এ আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং কাস্ট বোতামে ক্লিক করে এবং একটি টার্গেট কাস্ট ডিভাইস নির্বাচন করে Cactool- এ একটি কাস্ট সেশন শুরু করুন৷ লাইভস্ট্রিম অবিলম্বে খেলা শুরু করা উচিত.
6. প্রোগ্রাম গাইড ডেটা যোগ করা
লাইভ কন্টেন্টের জন্য CAF-এর সমর্থন এখন রিসিভার এবং প্রেরক অ্যাপ্লিকেশনগুলিতে প্রোগ্রাম গাইড ডেটা প্রদর্শনের জন্য সমর্থন অন্তর্ভুক্ত করে। বিষয়বস্তু প্রদানকারীদের একটি ভাল শেষ ব্যবহারকারীর অভিজ্ঞতার জন্য তাদের রিসিভার অ্যাপ্লিকেশনগুলিতে প্রোগ্রামিং মেটাডেটা অন্তর্ভুক্ত করার জন্য দৃঢ়ভাবে উত্সাহিত করা হয়, বিশেষ করে টিভি চ্যানেলের মতো দীর্ঘ লাইভ স্ট্রিমগুলির জন্য।
CAF একক স্ট্রীমে একাধিক প্রোগ্রামের জন্য মেটাডেটা সেট করা সমর্থন করে। MediaMetadata অবজেক্টে স্টার্ট টাইমস্ট্যাম্প এবং সময়কাল সেট করে, রিসিভার স্বয়ংক্রিয়ভাবে প্রেরকদের দেখানো মেটাডেটা এবং স্ট্রীমে প্লেয়ারের বর্তমান অবস্থানের উপর ভিত্তি করে ওভারলে আপডেট করে। নীচে এপিআইগুলির একটি নমুনা এবং তাদের সাধারণ ব্যবহার রয়েছে।
// 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;
For this codelab we will use a sample metadata service to provide the metadata for our livestream. প্রোগ্রাম মেটাডেটার একটি তালিকা তৈরি করতে, একটি ধারক তৈরি করুন। 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 কল করুন।
7. সন্ধান অক্ষম করা
বেশিরভাগ ভিডিও স্ট্রিম সেগমেন্টের সমন্বয়ে গঠিত যা ভিডিও ফ্রেমের একটি পরিসীমা ধারণ করে। অন্যথায় নির্দিষ্ট না হলে, CAF ব্যবহারকারীদের এই সেগমেন্টের মধ্যে খোঁজার অনুমতি দেবে। ওয়েব রিসিভার উপলব্ধ কয়েকটি API-তে কল করে এটি নির্দিষ্ট করতে পারে।
লোড ইন্টারসেপ্টরে, SEEK সমর্থিত মিডিয়া কমান্ডটি সরান। এটি সমস্ত মোবাইল প্রেরক এবং স্পর্শ ইন্টারফেসে খোঁজা অক্ষম করে। 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 ফাইলটি সংরক্ষণ করুন এবং একটি কাস্ট সেশন শুরু করুন৷ আপনি আর লাইভস্ট্রিমের মধ্যে অনুসন্ধান করতে সক্ষম হবেন না।
8. অভিনন্দন
আপনি এখন জানেন কিভাবে সর্বশেষ কাস্ট রিসিভার SDK ব্যবহার করে একটি কাস্টম রিসিভার অ্যাপ্লিকেশন তৈরি করতে হয়৷
আরও বিশদ বিবরণের জন্য, লাইভ স্ট্রিমিং বিকাশকারীর নির্দেশিকা দেখুন।