اشکال زدایی برنامه های گیرنده Cast

۱. مرور کلی

این آزمایشگاه کد به شما آموزش می‌دهد که چگونه Cast Debug Logger را به برنامه Custom Web Receiver موجود خود اضافه کنید.

گوگل کست چیست؟

کیت توسعه نرم‌افزاری گوگل کست (Google Cast SDK) به برنامه شما اجازه می‌دهد تا محتوا را پخش کند و پخش را در دستگاه‌های دارای قابلیت گوگل کست کنترل کند. این کیت، اجزای رابط کاربری لازم را بر اساس چک لیست طراحی گوگل کست (Google Cast Design Checklist) در اختیار شما قرار می‌دهد.

چک لیست طراحی گوگل کست (Google Cast) ارائه شده است تا تجربه کاربری کست (Cast) را در تمام پلتفرم‌های پشتیبانی‌شده ساده و قابل پیش‌بینی کند.

قرار است چه چیزی بسازیم؟

وقتی این آزمایشگاه کد را تکمیل کردید، یک گیرنده وب سفارشی خواهید داشت که با Cast Debug Logger یکپارچه شده است.

برای جزئیات و اطلاعات بیشتر به راهنمای Cast Debug Logger مراجعه کنید.

آنچه یاد خواهید گرفت

• چگونه محیط خود را برای توسعه گیرنده وب تنظیم کنید.
• نحوه ادغام Debug Logger در گیرنده Cast شما.

آنچه نیاز دارید

• جدیدترین مرورگر گوگل کروم .
• سرویس میزبانی HTTPS مانند Firebase Hosting یا ngrok .
• یک دستگاه گوگل کست مانند کروم کست یا تلویزیون اندروید که به اینترنت دسترسی داشته باشد.
• تلویزیون یا مانیتوری که ورودی HDMI داشته باشد.

تجربه

• شما باید تجربه قبلی در زمینه Cast داشته باشید و نحوه کار گیرنده Cast Web را درک کنید.
• شما باید دانش قبلی در زمینه توسعه وب داشته باشید.
• همچنین به دانش قبلی در مورد تماشای تلویزیون نیاز خواهید داشت :)

مشکلات شبکه دارید؟

اگر در مکانی هستید که شبکه وای‌فای قابل اعتمادی ندارید، می‌توانید دستگاه کروم‌کست را با استفاده از یک آداپتور اترنت برای کروم‌کست یا کروم‌کست با گوگل تی‌وی، سیم‌کشی کنید.

چگونه از این آموزش استفاده خواهید کرد؟

فقط تا انتها بخوانید آن را بخوانید و تمرین‌ها را انجام دهید

تجربه خود را در ساخت برنامه‌های وب چگونه ارزیابی می‌کنید؟

تازه کار متوسط ماهر

تجربه خود را با تماشای تلویزیون چگونه ارزیابی می‌کنید؟

تازه کار متوسط ماهر

۲. کد نمونه را دریافت کنید

شما می‌توانید تمام کدهای نمونه را روی کامپیوتر خود دانلود کنید...

منبع

و فایل زیپ دانلود شده را از حالت فشرده خارج کنید.

مخزن Codelab مربوط به Cast Debug Logger شامل دو پروژه نمونه است:

• app-start — کد آغازینی که در این آزمایشگاه کد بر اساس آن کدنویسی خواهید کرد.
• app-done — کد کامل برای برنامه ویدیویی نمونه نهایی.

۳. نصب گیرنده به صورت محلی

برای اینکه بتوانید از گیرنده وب خود با دستگاه Cast استفاده کنید، باید آن را در جایی میزبانی کنید که دستگاه Cast شما بتواند به آن دسترسی داشته باشد. اگر از قبل سروری دارید که از https پشتیبانی می‌کند، دستورالعمل‌های زیر را رد کنید و URL را یادداشت کنید ، زیرا در بخش بعدی به آن نیاز خواهید داشت.

اگر سروری برای استفاده در دسترس ندارید، می‌توانید از Firebase Hosting یا ngrok استفاده کنید.

سرور را اجرا کنید

پس از تنظیم سرویس مورد نظر خود، به app-start بروید و سرور خود را شروع کنید.

آدرس اینترنتی (URL) گیرنده میزبان خود را یادداشت کنید. در بخش بعدی از آن استفاده خواهید کرد.

۴. یک برنامه را در کنسول توسعه‌دهندگان Cast ثبت کنید

حساب توسعه‌دهنده‌ی کست ندارید؟

در کنسول توسعه‌دهندگان Google Cast SDK یک حساب کاربری ایجاد کنید و هزینه ثبت‌نام را پرداخت کنید.

برای اینکه بتوانید یک گیرنده وب سفارشی، همانطور که در این آزمایشگاه کد ساخته شده است، را روی دستگاه‌های Chromecast اجرا کنید، باید برنامه خود را ثبت کنید . پس از ثبت برنامه، یک شناسه برنامه دریافت خواهید کرد که برنامه فرستنده شما باید برای انجام فراخوانی‌های API، مانند راه‌اندازی یک برنامه گیرنده، از آن استفاده کند.

روی «افزودن برنامه جدید» کلیک کنید

«گیرنده سفارشی» را انتخاب کنید، این چیزی است که ما در حال ساخت آن هستیم.

جزئیات گیرنده جدید خود را وارد کنید، حتماً از URL بخش آخر استفاده کنید. شناسه برنامه اختصاص داده شده به گیرنده جدید خود را یادداشت کنید .

همچنین باید دستگاه Google Cast خود را ثبت کنید تا قبل از انتشار، بتواند به برنامه گیرنده شما دسترسی داشته باشد. پس از انتشار برنامه گیرنده، برای همه دستگاه‌های Google Cast در دسترس خواهد بود. برای اهداف این آزمایشگاه کد، توصیه می‌شود با یک برنامه گیرنده منتشر نشده کار کنید.

روی «افزودن دستگاه جدید» کلیک کنید

شماره سریال چاپ شده در پشت دستگاه Cast خود را وارد کنید و یک نام توصیفی به آن بدهید. همچنین می‌توانید با استفاده از Cast کردن صفحه نمایش خود در Chrome هنگام دسترسی به کنسول توسعه‌دهندگان Google Cast SDK، شماره سریال خود را پیدا کنید.

۵ تا ۱۵ دقیقه طول می‌کشد تا گیرنده و دستگاه شما برای آزمایش آماده شوند. پس از ۵ تا ۱۵ دقیقه انتظار، باید دستگاه Cast خود را مجدداً راه‌اندازی کنید.

۵. برنامه نمونه را اجرا کنید

در حالی که منتظر آماده شدن گیرنده وب جدیدمان برای آزمایش هستیم، بیایید ببینیم یک نمونه برنامه گیرنده وب تکمیل شده چگونه است. گیرنده‌ای که قرار است بسازیم قادر به پخش رسانه با استفاده از پخش تطبیقی ​​بیت‌ریت خواهد بود.

1. در مرورگر خود، ابزار فرمان و کنترل (CaC) را باز کنید.

2. از شناسه پیش‌فرض گیرنده CC1AD845 استفاده کنید و روی دکمه SET APP ID کلیک کنید.
3. روی دکمه Cast در بالا سمت چپ کلیک کنید و دستگاهی که از Google Cast پشتیبانی می‌کند را انتخاب کنید.

4. به برگه LOAD MEDIA در بالا بروید.

5. دکمه رادیویی نوع درخواست را به LOAD تغییر دهید.
6. برای پخش ویدیوی نمونه، روی دکمه SEND REQUEST کلیک کنید.
7. ویدیو در دستگاه دارای قابلیت Google Cast شما شروع به پخش می‌کند تا عملکرد اولیه گیرنده با استفاده از گیرنده پیش‌فرض نشان داده شود.

۶. پروژه اولیه را آماده کنید

ما باید پشتیبانی از گوگل کست را به برنامه‌ی شروع که دانلود کرده‌اید اضافه کنیم. در اینجا برخی از اصطلاحات گوگل کست که در این آزمایشگاه کد استفاده خواهیم کرد، آورده شده است:

• یک برنامه فرستنده روی دستگاه تلفن همراه یا لپ‌تاپ اجرا می‌شود،
• یک برنامه گیرنده روی دستگاه Google Cast یا Android TV اجرا می‌شود.

اکنون آماده‌اید تا با استفاده از ویرایشگر متن مورد علاقه‌تان، پروژه‌ی اولیه را توسعه دهید:

1. انتخاب کنید پوشه app-start از کد نمونه‌ای که دانلود کرده‌اید.
2. js/receiver.js و index.html را باز کنید.

توجه داشته باشید، همانطور که در حال کار با این آزمایشگاه کد هستید، http-server باید تغییراتی را که ایجاد می‌کنید دریافت کند. اگر این اتفاق نیفتاد، سعی کنید http-server متوقف و مجدداً راه‌اندازی کنید.

طراحی اپلیکیشن

برنامه گیرنده، جلسه Cast را راه‌اندازی می‌کند و تا زمانی که درخواست LOAD (مانند دستور پخش یک قطعه رسانه) از فرستنده برسد، در حالت آماده‌باش قرار می‌گیرد.

این برنامه شامل یک نمای اصلی است که در index.html تعریف شده است و یک فایل جاوا اسکریپت به نام js/receiver.js که شامل تمام منطق لازم برای کار کردن گیرنده ما است.

فهرست.html

این فایل html شامل تمام رابط کاربری (UI) برنامه گیرنده ما است.

گیرنده.js

این اسکریپت تمام منطق برنامه گیرنده ما را مدیریت می‌کند.

مستندات بازیگران؟

ما مستندات گسترده‌ای برای گیرنده، iOS، اندروید و فرستندگان کروم داریم.

سوالات متداول

• گوگل کست چیست؟
• چگونه می‌توانم توسعه‌دهنده گوگل کست شوم؟

۷. ادغام با API مربوط به CastDebugLogger

کیت توسعه نرم‌افزاری Cast Receiver گزینه دیگری را برای توسعه‌دهندگان فراهم می‌کند تا با استفاده از API مربوط به CastDebugLogger، به راحتی برنامه گیرنده خود را اشکال‌زدایی کنند.

برای جزئیات و اطلاعات بیشتر به راهنمای Cast Debug Logger مراجعه کنید.

★ توجه:

برای استفاده از API مربوط به CastDebugLogger ، باید دستگاه Cast خود را در کنسول توسعه‌دهندگان Google Cast SDK ثبت کنید و از نسخه فریمور دستگاه ۱.۴۴ یا بالاتر استفاده کنید.

مقداردهی اولیه

اسکریپت زیر را در تگ <head> برنامه گیرنده خود، درست بعد از اسکریپت Web Receiver SDK، در 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>

در js/receiver.js در بالای فایل و زیر playerManager ، نمونه CastDebugLogger را دریافت کنید و logger را در یک شنونده رویداد 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);
  }
});

هشدار: مطمئن شوید که برای یک گیرنده‌ی عملیاتی، مقدار setEnabled را به false تغییر دهید.

وقتی ثبت‌کننده‌ی اشکال‌زدایی فعال باشد، یک پوشش از DEBUG MODE روی گیرنده نمایش داده می‌شود.

رویدادهای بازیکن را ثبت کنید

با استفاده از CastDebugLogger می‌توانید به راحتی رویدادهای بازیکن را که توسط Cast Web Receiver SDK ایجاد می‌شوند، ثبت کنید و از سطوح مختلف ثبت‌کننده برای ثبت داده‌های رویداد استفاده کنید. پیکربندی loggerLevelByEvents از cast.framework.events.EventType و cast.framework.events.category برای مشخص کردن رویدادهایی که باید ثبت شوند، استفاده می‌کند.

کد زیر را در زیر شنونده رویداد READY اضافه کنید تا هنگام فعال شدن رویدادهای CORE بازیکن یا پخش تغییر mediaStatus گزارش شود:

...

// 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
};

پیام‌های لاگ و تگ‌های سفارشی

API مربوط به CastDebugLogger به شما امکان می‌دهد پیام‌های لاگی ایجاد کنید که با رنگ‌های مختلف روی پوشش اشکال‌زدایی گیرنده ظاهر شوند. از متدهای لاگ زیر که به ترتیب از بالاترین به پایین‌ترین اولویت فهرست شده‌اند، استفاده کنید:

• 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 اختیاری است. اگر یک تگ سفارشی برای سطح logger خود پیکربندی نشده باشد، تمام پیام‌های گزارش در پوشش اشکال‌زدایی نمایش داده می‌شوند.

کد زیر را پس از فراخوانی loggerLevelByEvents اضافه کنید:

...

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

...

۸. استفاده از پوشش اشکال‌زدایی

ابزار Cast Debug Logger یک پوشش اشکال‌زدایی روی گیرنده ارائه می‌دهد تا پیام‌های لاگ سفارشی شما را نمایش دهد. 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 وجود دارد:

شروع یک اتصال جدید Cast:

1. ابزار CaC را باز کنید، شناسه برنامه گیرنده را تنظیم کنید و برای ارسال به گیرنده، روی دکمه «ارسال» کلیک کنید.
2. یک برنامه فرستنده جداگانه را به همان دستگاه با همان شناسه برنامه گیرنده ارسال کنید.
3. رسانه را از برنامه فرستنده بارگیری کنید و پیام‌های گزارش در ابزار نشان داده می‌شوند.

به یک جلسه Cast موجود بپیوندید:

1. شناسه جلسه Cast در حال اجرا را با استفاده از SDK گیرنده یا SDK فرستنده دریافت کنید. از سمت گیرنده، برای دریافت شناسه جلسه در کنسول Chrome Remote Debugger ، موارد زیر را وارد کنید:

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

یا می‌توانید شناسه جلسه را از یک فرستنده وب متصل دریافت کنید، از روش زیر استفاده کنید:

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

2. شناسه جلسه را در ابزار CaC وارد کنید و روی دکمه RESUME کلیک کنید.
3. دکمه‌ی Cast باید متصل شده باشد و پیام‌های لاگ روی ابزار نمایش داده شوند.

چیزهایی که باید امتحان کنید

در مرحله بعد، از ابزار CaC برای مشاهده گزارش‌های مربوط به گیرنده نمونه شما استفاده خواهیم کرد.

1. ابزار CaC را باز کنید.

2. شناسه برنامه گیرنده برنامه نمونه خود را وارد کنید و روی دکمه SET APP ID کلیک کنید.
3. روی دکمه‌ی Cast در بالا سمت چپ کلیک کنید و دستگاهی که از Google Cast پشتیبانی می‌کند را انتخاب کنید تا گیرنده‌ی شما باز شود.

4. به برگه LOAD MEDIA در بالا بروید.

5. دکمه رادیویی نوع درخواست را به LOAD تغییر دهید.
6. برای پخش ویدیوی نمونه، روی دکمه SEND REQUEST کلیک کنید.

7. اکنون باید یک ویدیوی نمونه در دستگاه شما پخش شود. باید بتوانید گزارش‌های مراحل قبلی را که در تب «پیام‌های گزارش» در پایین ابزار نمایش داده می‌شوند، مشاهده کنید.

برای بررسی لاگ‌ها و کنترل گیرنده، ویژگی‌های زیر را بررسی کنید:

• برای مشاهده اطلاعات رسانه و وضعیت رسانه، روی زبانه MEDIA INFO یا MEDIA STATUS کلیک کنید.
• برای مشاهده‌ی پوشش اشکال‌زدایی روی گیرنده، روی دکمه‌ی SHOW OVERLAY کلیک کنید.
• از دکمه‌ی CLEAR CACHE AND STOP برای بارگذاری مجدد برنامه‌ی گیرنده و ارسال مجدد استفاده کنید.

۱۰. تبریک

اکنون می‌دانید که چگونه با استفاده از جدیدترین SDK مربوط به Cast Receiver، ابزار Cast Debug Logger را به برنامه Web Receiver خود که از Cast پشتیبانی می‌کند، اضافه کنید.

برای جزئیات بیشتر، به راهنماهای توسعه‌دهندگان Cast Debug Logger و Command and Control (CaC) Tool مراجعه کنید.

بازیگران بیشتری می‌خواهید؟

نگاهی به سایر آزمایشگاه‌های کد Cast و برنامه‌های نمونه ما در GitHub بیندازید.