কাস্ট রিসিভারে লাইভ সমর্থন যোগ করুন

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

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

Google Cast কি?

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

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

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

আমরা কি নির্মাণ করা যাচ্ছে?

আপনি যখন এই কোডল্যাবটি সম্পূর্ণ করবেন, তখন আপনি একটি কাস্ট রিসিভার তৈরি করবেন যা লাইভ এপিআইগুলির সুবিধা নেয়৷

আপনি কি শিখবেন

• কাস্টে লাইভ ভিডিও সামগ্রী কীভাবে পরিচালনা করবেন।
• কাস্ট দ্বারা সমর্থিত বিভিন্ন লাইভ স্ট্রিমিং পরিস্থিতি কীভাবে কনফিগার করবেন।
• কীভাবে আপনার লাইভস্ট্রিমে প্রোগ্রাম ডেটা যুক্ত করবেন

আপনি কি প্রয়োজন হবে

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

অভিজ্ঞতা

• আপনার পূর্বের ওয়েব ডেভেলপমেন্ট জ্ঞান থাকতে হবে।
• কাস্ট প্রেরক এবং রিসিভার অ্যাপ্লিকেশন তৈরির পূর্বের অভিজ্ঞতা।

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

Chromecast বা Google TV সহ Chromecast এর জন্য।

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

শুধুমাত্র মাধ্যমে এটি পড়ুন এটি পড়ুন এবং ব্যায়াম সম্পূর্ণ করুন

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

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

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

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

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

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

> কাস্ট-ভিডিও-কাস্ট কোডল্যাব সংগ্রহস্থলে দুটি নমুনা প্রকল্প রয়েছে: > * app-start — এই কোডল্যাবে আপনি যে প্রারম্ভিক কোড তৈরি করবেন। * অ্যাপ-ডন —সমাপ্ত নমুনা ভিডিও অ্যাপের সম্পূর্ণ কোড।

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

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

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

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

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

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

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

> একটি কাস্ট বিকাশকারী অ্যাকাউন্ট নেই? > Google Cast SDK বিকাশকারী কনসোলে একটি অ্যাকাউন্টের জন্য সাইন আপ করুন এবং নিবন্ধন ফি প্রদান করুন৷

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

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

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

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

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

আপনাকে অবশ্যই আপনার Google Cast ডিভাইসটি নিবন্ধন করতে হবে যাতে আপনি এটি প্রকাশ করার আগে এটি আপনার রিসিভার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারে৷ একবার আপনি আপনার রিসিভার অ্যাপ্লিকেশন প্রকাশ করলে, এটি সমস্ত 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 অবজেক্টে স্টার্ট টাইমস্ট্যাম্প এবং সময়কাল সেট করে, রিসিভার স্বয়ংক্রিয়ভাবে প্রেরকদের দেখানো মেটাডেটা এবং স্ট্রীমে প্লেয়ারের বর্তমান অবস্থানের উপর ভিত্তি করে ওভারলে আপডেট করে। নীচে APIs এবং তাদের সাধারণ ব্যবহারের একটি নমুনা রয়েছে৷

// 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 কল করুন।

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 ব্যবহার করে একটি কাস্টম রিসিভার অ্যাপ্লিকেশন তৈরি করতে হয়৷

আরও বিশদ বিবরণের জন্য, লাইভ স্ট্রিমিং বিকাশকারীর নির্দেশিকা দেখুন।

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