ডিবাগিং কাস্ট রিসিভার অ্যাপ

1. ওভারভিউ

এই কোডল্যাব আপনাকে আপনার বিদ্যমান কাস্টম ওয়েব রিসিভার অ্যাপে কাস্ট ডিবাগ লগার যোগ করতে শেখাবে৷

Google Cast কি?

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

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

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

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

বিশদ বিবরণ এবং আরও তথ্যের জন্য কাস্ট ডিবাগ লগার গাইড দেখুন৷

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

• ওয়েব রিসিভার ডেভেলপমেন্টের জন্য আপনার পরিবেশ কিভাবে সেট আপ করবেন।
• কীভাবে আপনার কাস্ট রিসিভারে ডিবাগ লগারকে একীভূত করবেন।

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

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

অভিজ্ঞতা

• আপনার পূর্ববর্তী কাস্ট অভিজ্ঞতা থাকা উচিত এবং একটি কাস্ট ওয়েব রিসিভার কীভাবে কাজ করে তা বোঝা উচিত।
• আপনার পূর্বের ওয়েব ডেভেলপমেন্ট জ্ঞান থাকতে হবে।
• You will also need previous knowledge of watching TV :)

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

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

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

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

How would you rate your experience with building web apps?

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

How would you rate your experience with watching TV?

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

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

You can download all the sample code to your computer...

ডাউনলোড উত্স

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

The Cast Debug Logger codelab repository contains two sample projects:

• app-start —The starting code that you'll build upon in this codelab.
• app-done —The complete code for the finished sample video app.

3। স্থানীয়ভাবে আপনার রিসিভার মোতায়েন করা

To be able to use your web receiver with a Cast device, it needs to be hosted somewhere where your Cast device can reach it. Should you already have a server available to you that supports https, skip the following instructions and make note of the URL , as you'll need it in the next section.

If you don't have a server available to use, you can use Firebase Hosting or ngrok .

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

Once you have the service of your choice set up, navigate to app-start and start your server.

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

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

কাস্ট বিকাশকারী অ্যাকাউন্ট নেই?

Sign up for an account on the Google Cast SDK Developer Console and pay the registration fee.

You must register your application to be able to run a custom Web Receiver, as built in this codelab, on Chromecast devices. After you've registered your application, you'll receive an application ID that your sender application must use to perform API calls, such as to launch a receiver application.

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

Select "Custom Receiver", this is what we're building.

Enter the details of your new receiver, be sure to use the URL from the last section. Make a note of the Application ID assigned to your brand new receiver.

You must also register your Google Cast device so that it may access your receiver application before you publish it. Once you publish your receiver application, it will be available to all Google Cast devices. এই কোডল্যাবের উদ্দেশ্যে এটি একটি অপ্রকাশিত রিসিভার অ্যাপ্লিকেশন দিয়ে কাজ করার পরামর্শ দেওয়া হয়।

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

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

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

5. নমুনা অ্যাপ চালান

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

1. আপনার ব্রাউজারে, কমান্ড এবং নিয়ন্ত্রণ (সিএসি) সরঞ্জামটি খুলুন।

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

4. শীর্ষে LOAD MEDIA ট্যাবে নেভিগেট করুন।

5. LOAD করতে অনুরোধের ধরণের রেডিও বোতামটি পরিবর্তন করুন।
6. একটি নমুনা ভিডিও প্লে করতে SEND REQUEST বোতামটি ক্লিক করুন।
7. ডিফল্ট রিসিভারটি ব্যবহার করার মতো কী বেসিক রিসিভার কার্যকারিতা দেখায় তা দেখানোর জন্য ভিডিওটি আপনার গুগল কাস্ট-সক্ষম ডিভাইসে খেলতে শুরু করবে।

6 .. প্রারম্ভিক প্রকল্পটি প্রস্তুত করুন

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

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

এখন আপনি আপনার প্রিয় পাঠ্য সম্পাদক ব্যবহার করে স্টার্টার প্রকল্পের শীর্ষে তৈরি করতে প্রস্তুত:

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

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

অ্যাপ ডিজাইন

The receiver app initializes the Cast session and will standby until a LOAD request (such as the command to playback a piece of media) from a sender arrives.

The app consists of one main view, defined in index.html and one JavaScript file called js/receiver.js containing all the logic to make our receiver work.

index.html

এই এইচটিএমএল ফাইলটিতে আমাদের রিসিভার অ্যাপের জন্য সমস্ত ইউআই রয়েছে।

receiver.js

এই স্ক্রিপ্টটি আমাদের রিসিভার অ্যাপের জন্য সমস্ত যুক্তি পরিচালনা করে।

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

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

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

• Google Cast কি?
• আমি কীভাবে গুগল কাস্ট বিকাশকারী হয়ে উঠব?

।

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

বিশদ এবং আরও তথ্যের জন্য কাস্ট ডিবাগ লগার গাইড দেখুন।

★ দ্রষ্টব্য:

To use the CastDebugLogger API , you must register your Cast device on the Google Cast SDK Developer Console and use a device firmware version of 1.44 or above.

সূচনা

ওয়েব রিসিভার এসডিকে স্ক্রিপ্টের ঠিক পরে আপনার রিসিভার অ্যাপটিতে <head> এ নিম্নলিখিত স্ক্রিপ্টটি অন্তর্ভুক্ত করুন index.html

<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>

In js/receiver.js at the top of the file and below the playerManager , get the CastDebugLogger instance and enable the logger in a READY event listener:

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 একটি ওভারলে রিসিভারে প্রদর্শিত হয়।

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

Using CastDebugLogger you can easily log player events that are fired by the Cast Web Receiver SDK and use different logger levels to log the event data. 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 এ লগ লেভেল সেট করে ডিবাগ ওভারলেতে কোন বার্তাগুলি উপস্থিত হবে তা নিয়ন্ত্রণ করতে পারেন৷ For example, enabling a custom tag with log level cast.framework.LoggerLevel.DEBUG would display all messages added with error, warn, info, and debug log messages. আরেকটি উদাহরণ হল যে WARNING স্তরের সাথে একটি কাস্টম ট্যাগ সক্রিয় করা শুধুমাত্র ত্রুটি প্রদর্শন করবে এবং লগ বার্তা সতর্ক করবে৷

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

loggerLevelByEvents কলটির নীচে নিম্নলিখিতগুলি যুক্ত করুন:

...

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

...

8. ডিবাগ ওভারলে ব্যবহার করা

কাস্ট ডিবাগ লগার আপনার কাস্টম লগ বার্তাগুলি দেখানোর জন্য রিসিভারে একটি ডিবাগ ওভারলে সরবরাহ করে। ডিবাগ ওভারলে টগল করতে 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();
  }
});

9। কমান্ড এবং নিয়ন্ত্রণ (সিএসি) সরঞ্জাম ব্যবহার করে

ওভারভিউ

কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল আপনার লগ ক্যাপচার করে এবং ডিবাগ ওভারলে নিয়ন্ত্রণ করে।

আপনার রিসিভারকে CaC টুলের সাথে সংযুক্ত করার দুটি উপায় রয়েছে:

একটি নতুন কাস্ট সংযোগ শুরু করুন:

1. CaC টুল খুলুন, রিসিভার অ্যাপ আইডি সেট করুন এবং রিসিভারে কাস্ট করতে কাস্ট বোতামে ক্লিক করুন।
2. একই রিসিভার অ্যাপ আইডি সহ একই ডিভাইসে একটি পৃথক প্রেরক অ্যাপ কাস্ট করুন।
3. প্রেরক অ্যাপ থেকে মিডিয়া লোড করুন এবং লগ বার্তাগুলি টুলটিতে দেখাবে।

একটি বিদ্যমান কাস্ট সেশনে যোগ দিন:

1. রিসিভার SDK বা প্রেরক SDK ব্যবহার করে চলমান কাস্ট সেশন আইডি পান৷ রিসিভারের দিক থেকে, Chrome রিমোট ডিবাগার কনসোলে সেশন আইডি পেতে নিম্নলিখিতটি লিখুন:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

অথবা আপনি একটি সংযুক্ত ওয়েব প্রেরকের কাছ থেকে সেশন আইডি পেতে পারেন, নিম্নলিখিত পদ্ধতিটি ব্যবহার করুন:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. CaC টুলে সেশন আইডি ইনপুট করুন এবং RESUME বোতামে ক্লিক করুন।
3. কাস্ট বোতামটি সংযুক্ত হওয়া উচিত এবং টুলটিতে লগ বার্তাগুলি দেখানো শুরু করা উচিত।

চেষ্টা করার জিনিস

পরবর্তীতে আমরা আপনার নমুনা রিসিভারে লগ দেখতে CaC টুল ব্যবহার করব।

1. CaC টুল খুলুন।

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

4. শীর্ষে LOAD MEDIA ট্যাবে নেভিগেট করুন।

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

7. একটি নমুনা ভিডিও এখন আপনার ডিভাইসে চালানো উচিত। টুলের নীচে "লগ বার্তা" ট্যাবে প্রদর্শিত হওয়া শুরুর আগের ধাপগুলি থেকে আপনার লগগুলি দেখা শুরু করা উচিত৷

লগগুলি তদন্ত করতে এবং রিসিভার নিয়ন্ত্রণ করতে নিম্নলিখিত বৈশিষ্ট্যগুলি অন্বেষণ করার চেষ্টা করুন:

• MEDIA INFO এবং মিডিয়া তথ্য এবং মিডিয়া স্থিতি দেখতে মিডিয়া তথ্য বা MEDIA STATUS ট্যাবে ক্লিক করুন।
• রিসিভারে একটি ডিবাগ ওভারলে দেখতে SHOW OVERLAY বোতামে ক্লিক করুন।
• রিসিভার অ্যাপটি পুনরায় লোড করতে এবং আবার কাস্ট করতে CLEAR CACHE AND STOP বোতামটি ব্যবহার করুন৷

10. অভিনন্দন

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

আরও বিশদ বিবরণের জন্য, কাস্ট ডিবাগ লগার এবং কমান্ড অ্যান্ড কন্ট্রোল (CaC) টুল বিকাশকারী নির্দেশিকাগুলি দেখুন৷

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

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