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

1. نظرة عامة

سيعلمك هذا الدليل التعليمي كيفية إضافة "مُسجِّل تصحيح أخطاء البث" إلى تطبيق "مُستلِم الويب المخصّص" الحالي.

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

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

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

ما الذي سنبنيه؟

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

اطّلِع على دليل Cast Debug Logger للاطّلاع على التفاصيل والمزيد من المعلومات.

المُعطيات

• كيفية إعداد بيئتك لتطوير جهاز الاستقبال على الويب
• كيفية دمج Debug Logger في جهاز استقبال البث

المتطلبات

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

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

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

هل تواجه مشاكل في الاتصال بالشبكة؟

إذا كنت في موقع جغرافي لا تتوفّر فيه شبكة Wi-Fi موثوقة، يمكنك توصيل جهاز Chromecast باستخدام محوّل إيثرنت لجهاز Chromecast أو Chromecast مع Google TV.

كيف ستستخدم هذا الدليل التعليمي؟

قراءة النص فقط قراءته وإكمال التمارين

كيف تقيّم تجربتك في إنشاء تطبيقات الويب؟

مبتدئ متوسط متقدّم

ما مدى رضاك عن تجربة مشاهدة التلفزيون؟

مبتدئ متوسط خبير

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

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

تنزيل المصدر

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

يحتوي مستودع رمز Cast Debug Logger على مشروعَين نموذجيَّين:

• app-start: الرمز البرمجي الأوّلي الذي ستستند إليه في هذا الدليل التعليمي حول الرموز البرمجية.
• app-done: الرمز الكامل لتطبيق الفيديو النموذجي المكتمل.

3- نشر جهاز الاستقبال على الجهاز

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

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

تشغيل الخادم

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

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

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

أليس لديك حساب مطوِّر برامج Cast؟

اشترِك في حساب على Google Cast SDK Developer Console وادفع رسوم التسجيل.

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

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

اختَر "مستلِم مخصّص"، وهو ما سننشئه.

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

عليك أيضًا تسجيل جهاز Google Cast ليتمكّن من الوصول إلى تطبيق المُستلِم قبل نشره. بعد نشر تطبيق المُستلِم، سيكون متاحًا لجميع أجهزة Google 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 وإعادة تشغيله.

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

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

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

index.html

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

receiver.js

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

مستندات البث؟

لدينا مستندات شاملة لأجهزة الاستقبال وأجهزة iOS وAndroid وChrome المُرسِلة.

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

• ما المقصود بتكنولوجيا Google Cast؟
• كيف يمكنني أن أصبح مطوِّر تطبيقات على Google Cast؟

7- الدمج مع CastDebugLogger API

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

اطّلِع على دليل Cast Debug Logger للاطّلاع على التفاصيل والمزيد من المعلومات.

★ ملاحظة:

لاستخدام CastDebugLogger API، عليك تسجيل جهاز البث على Google Cast SDK Developer Console واستخدام الإصدار 1.44 من البرامج الثابتة للجهاز أو إصدار أحدث.

الإعداد

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

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

تتيح لك واجهة برمجة التطبيقات 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 لكل علامة مخصّصة. على سبيل المثال، سيؤدي تفعيل علامة مخصّصة بمستوى السجلّ 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. استخدام Debug Overlay

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

بدء اتصال بث جديد:

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.