تصحيح أخطاء تطبيقات جهاز استقبال البث

‫1. نظرة عامة

سيعلّمك هذا الدرس التطبيقي حول الترميز كيفية إضافة أداة Cast Debug Logger إلى تطبيق "مستقبل الويب المخصّص" الحالي.

ما هي تكنولوجيا Google Cast؟

تتيح حزمة تطوير البرامج (SDK) الخاصة بتكنولوجيا Google Cast لتطبيقك تشغيل المحتوى والتحكّم في التشغيل على الأجهزة التي تتيح استخدام Google Cast. توفّر لك هذه الأداة مكوّنات واجهة المستخدم اللازمة استنادًا إلى قائمة تدقيق تصميم Google Cast.

يتم توفير قائمة التحقّق من تصميم Google Cast لتكون تجربة المستخدم في Cast بسيطة ويمكن توقّعها على جميع الأنظمة الأساسية المتوافقة.

ما الذي سنقوم بإنشائه؟

عند إكمال هذا الدرس التطبيقي حول الترميز، سيكون لديك برنامج استقبال ويب مخصّص مدمج مع أداة "تسجيل الأخطاء في Cast".

راجِع دليل أداة تسجيل الأخطاء في Cast للحصول على التفاصيل والمزيد من المعلومات.

أهداف الدورة التعليمية

• كيفية إعداد بيئة تطوير "تطبيق استقبال الويب"
• كيفية دمج أداة تسجيل الأخطاء في "مستقبِل Cast"

المتطلبات

• أحدث إصدار من متصفّح Google Chrome
• خدمة استضافة HTTPS، مثل استضافة Firebase أو ngrok
• جهاز بث، مثل Chromecast أو Android TV، تم إعداده للوصول إلى الإنترنت.
• تلفزيون أو شاشة مزوَّدان بمنفذ إدخال HDMI

تجربة الاستخدام

• يجب أن تكون لديك خبرة سابقة في استخدام Cast وأن تفهم طريقة عمل Cast Web Receiver.
• يجب أن تكون لديك معرفة سابقة بتطوير الويب.
• ستحتاج أيضًا إلى معرفة سابقة بمشاهدة التلفزيون :)

‫2. الحصول على الرمز النموذجي

يمكنك تنزيل كل الرموز النموذجية على جهاز الكمبيوتر...

file_downloadتنزيل المصدر

وفكّ ضغط ملف ZIP الذي تم تنزيله.

3- نشر تطبيق الاستقبال محليًا

لكي تتمكّن من استخدام تطبيق استقبال الويب مع جهاز البث، يجب استضافته في مكان يمكن لجهاز البث الوصول إليه. إذا كان لديك خادم متاح يدعم بروتوكول HTTPS، تخطَّ التعليمات التالية ودوِّن عنوان URL، لأنّك ستحتاج إليه في القسم التالي.

إذا لم يكن لديك خادم متاح للاستخدام، يمكنك استخدام استضافة Firebase أو ngrok.

تشغيل الخادم

بعد إعداد الخدمة التي تختارها، انتقِل إلى app-start وابدأ تشغيل الخادم.

دوِّن عنوان URL الخاص بجهاز الاستقبال المستضاف. ستستخدمه في القسم التالي.

4. تسجيل تطبيق في Cast Play Console

يجب تسجيل تطبيقك لتتمكّن من تشغيل أداة استقبال ويب مخصّصة، كما هو موضّح في هذا الدرس التطبيقي حول الترميز، على أجهزة Chromecast. بعد تسجيل تطبيقك، ستتلقّى معرّف تطبيق يجب أن يستخدمه تطبيق المرسِل لتنفيذ طلبات البيانات من واجهة برمجة التطبيقات، مثل تشغيل تطبيق جهاز الاستقبال.

انقر على "إضافة تطبيق جديد".

اختَر "جهاز استقبال مخصّص"، وهو ما سننشئه.

أدخِل تفاصيل المستلم الجديد، وتأكَّد من استخدام عنوان URL من القسم الأخير. دوِّن رقم تعريف التطبيق المخصّص لجهاز الاستقبال الجديد.

يجب أيضًا تسجيل جهاز البث ليتمكّن من الوصول إلى تطبيق الاستقبال قبل نشره. بعد نشر تطبيق جهاز الاستقبال، سيصبح متاحًا لجميع أجهزة Google Cast. لأغراض هذا الدرس التطبيقي حول الترميز، يُنصح باستخدام تطبيق استقبال غير منشور.

انقر على "إضافة جهاز جديد".

أدخِل الرقم التسلسلي المطبوع على الجزء الخلفي من جهاز Cast وأدخِل اسمًا وصفيًا له. يمكنك أيضًا العثور على الرقم التسلسلي من خلال مشاركة شاشتك في Chrome عند الوصول إلى Play Console لـ Google Cast SDK.

سيستغرق إعداد جهاز الاستقبال والجهاز للاختبار من 5 إلى 15 دقيقة. بعد الانتظار لمدة تتراوح بين 5 و15 دقيقة، عليك إعادة تشغيل جهاز البث.

5. تشغيل نموذج التطبيق

بينما ننتظر أن يصبح Web Receiver الجديد جاهزًا للاختبار، دعنا نلقي نظرة على شكل نموذج لتطبيق Web Receiver مكتمل. سيكون جهاز الاستقبال الذي سننشئه قادرًا على تشغيل الوسائط باستخدام البث التكيّفي لمعدل نقل البيانات.

1. في المتصفّح، افتح أداة "التحكّم والسيطرة" (CaC).

2. استخدِم معرّف جهاز الاستقبال التلقائي CC1AD845 وانقر على الزر SET APP ID.
3. انقر على زر "البث" في أعلى يمين الصفحة واختَر الجهاز الذي يتيح استخدام Google Cast.

4. انتقِل إلى علامة التبويب LOAD MEDIA في أعلى الصفحة.

5. غيِّر زر الاختيار لنوع الطلب إلى LOAD.
6. انقر على الزر SEND REQUEST لتشغيل فيديو نموذجي.
7. سيبدأ تشغيل الفيديو على جهازك الذي يتيح استخدام Google Cast لعرض الشكل الأساسي لوظائف جهاز الاستقبال باستخدام "جهاز الاستقبال التلقائي".

6. إعداد مشروع البدء

يجب أن نضيف إمكانية استخدام Google Cast إلى تطبيق البث الذي نزّلته. في ما يلي بعض المصطلحات المستخدَمة في Google Cast والتي سنستخدمها في هذا الدرس التطبيقي حول الترميز:

• يعمل تطبيق المرسل على جهاز جوّال أو كمبيوتر محمول.
• يعمل تطبيق المستقبِل على جهاز Google Cast أو جهاز Android TV.

أنت الآن جاهز للبناء على مشروع البداية باستخدام محرِّر النصوص المفضّل لديك:

1. اختَر الدليل app-start من ملف تنزيل الرمز النموذجي.
2. فتح js/receiver.js وindex.html

يُرجى العِلم أنّه أثناء العمل على هذا الدرس العملي، من المفترض أن يرصد http-server التغييرات التي تجريها. إذا لم يحدث ذلك، حاوِل إيقاف http-server وإعادة تشغيله.

تصميم التطبيقات

يبدأ تطبيق الاستقبال جلسة Cast ويبقى في وضع الاستعداد إلى أن يصل طلب LOAD (مثل أمر تشغيل جزء من الوسائط) من جهاز الإرسال.

يتألف التطبيق من طريقة عرض رئيسية واحدة، محدّدة في index.html، وملف JavaScript واحد باسم js/receiver.js يحتوي على جميع التعليمات البرمجية اللازمة لتشغيل جهاز الاستقبال.

index.html

يحتوي ملف html هذا على جميع عناصر واجهة المستخدم لتطبيق جهاز الاستقبال.

receiver.js

يدير هذا النص البرمجي جميع منطق تطبيق الاستقبال.

الأسئلة الشائعة

• ما هي تكنولوجيا Google Cast؟
• كيف يمكنني أن أصبح مطوّرًا في Google Cast؟

7. دمج النطاق مع CastDebugLogger API

توفّر حزمة تطوير البرامج (SDK) لتطبيق الاستقبال Cast خيارًا آخر للمطوّرين لتصحيح أخطاء تطبيق الاستقبال بسهولة باستخدام CastDebugLogger API.

راجِع دليل أداة تسجيل الأخطاء في Cast للحصول على التفاصيل والمزيد من المعلومات.

الإعداد

أدرِج النص البرمجي التالي في علامة <head> لتطبيق جهاز الاستقبال مباشرةً بعد النص البرمجي لحزمة تطوير البرامج (SDK) الخاصة بـ Web Receiver، وذلك في 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 وفعِّل أداة التسجيل في متتبِّع أحداث 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);
  }
});

عند تفعيل أداة تسجيل بيانات تصحيح الأخطاء، يتم عرض تراكب DEBUG MODE على جهاز الاستقبال.

تسجيل أحداث اللاعب

باستخدام CastDebugLogger، يمكنك بسهولة تسجيل أحداث اللاعب التي يتم تشغيلها بواسطة Cast Web Receiver SDK واستخدام مستويات تسجيل مختلفة لتسجيل بيانات الأحداث. يستخدِم الأمر loggerLevelByEvents config المَعلمتَين 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
};

رسائل السجلّ والعلامات المخصّصة

تتيح واجهة برمجة التطبيقات 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 اختيارية. في حال عدم ضبط علامة مخصّصة لمستوى مسجّل البيانات، ستظهر جميع رسائل السجلّ على طبقة تصحيح الأخطاء.

أضِف ما يلي أسفل طلب loggerLevelByEvents:

...

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

...

8. استخدام "تراكب تصحيح الأخطاء"

توفّر أداة تسجيل بيانات تصحيح الأخطاء في Cast تراكب تصحيح أخطاء على جهاز الاستقبال لعرض رسائل السجلّ المخصّصة. استخدِم 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) السجلات وتتحكّم في تراكب تصحيح الأخطاء.

تتوفّر طريقتان لربط جهاز الاستقبال بأداة CaC:

لبدء اتصال Cast جديد، اتّبِع الخطوات التالية:

1. افتح أداة CaC، واضبط رقم تعريف تطبيق جهاز الاستقبال، ثم انقر على زر "البث" لبث المحتوى إلى جهاز الاستقبال.
2. إرسال تطبيق مرسِل منفصل إلى الجهاز نفسه باستخدام رقم تعريف تطبيق الاستقبال نفسه
3. تحميل الوسائط من تطبيق المرسِل وستظهر رسائل السجلّ على الأداة

للانضمام إلى جلسة Cast حالية، اتّبِع الخطوات التالية:

1. احصل على معرّف جلسة البث الحالية باستخدام حزمة تطوير البرامج (SDK) الخاصة بجهاز الاستقبال أو حزمة تطوير البرامج (SDK) الخاصة بجهاز الإرسال. من جهة جهاز الاستقبال، أدخِل ما يلي للحصول على معرّف الجلسة في وحدة تحكّم أداة تصحيح الأخطاء عن بُعد في Chrome:

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

أو يمكنك الحصول على رقم تعريف الجلسة من جهاز إرسال ويب مرتبط، واستخدام الطريقة التالية:

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

2. أدخِل معرّف الجلسة في "أداة CaC" وانقر على الزر RESUME.
3. يجب أن يكون زر البث متصلاً وأن يبدأ في عرض رسائل السجلّ على الأداة.

أفكار ننصح بتجربتها

بعد ذلك، سنستخدم أداة CaC Tool للاطّلاع على السجلات على جهاز الاستقبال النموذجي.

1. افتح أداة "الموافقة والخيارات".

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. تهانينا

أصبحت الآن على دراية بكيفية إضافة أداة "تسجيل الأخطاء في البث" إلى تطبيق "أداة استقبال الويب" الذي يتيح استخدام Google Cast باستخدام أحدث إصدار من حزمة تطوير البرامج (SDK) الخاصة بأداة استقبال البث.

لمزيد من التفاصيل، يُرجى الاطّلاع على دليلَي المطوّرين Cast Debug Logger وأداة "التحكّم والإدارة" (CaC).