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

1- نظرة عامة

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

ما المقصود بـ Google Cast؟

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

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

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

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

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

ما ستتعرَّف عليه

• كيفية إعداد بيئتك لتطوير مستقبِل الويب.
• كيفية دمج أداة تسجيل تصحيح الأخطاء في جهاز استقبال البث.

المتطلبات

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

التجربة

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

2. الحصول على نموذج الشفرة

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

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

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

3- نشر جهاز الاستقبال محليًا

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

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

تشغيل الخادم

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

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

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

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

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

حدّد "Custom المستلِم"، وهذا ما ننشئه.

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

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

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

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

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

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

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

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 هذا على كل واجهات المستخدم لتطبيقنا على جهاز الاستقبال.

pickupr.js

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

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

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

7- الدمج مع واجهة برمجة تطبيقات CastDebugLogger

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

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

الإعداد

أدرِج النص البرمجي التالي في علامة <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);
  }
});

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

تسجيل أحداث المشغل

باستخدام CastDebugLogger، يمكنك بسهولة تسجيل أحداث المشغّل التي يتم تنشيطها بواسطة حزمة SDK لجهاز استقبال Web 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 بإنشاء رسائل سجلّ تظهر على تراكب تصحيح أخطاء المستلِم بألوان مختلفة. استخدم طرق السجل التالية، مدرجة بالترتيب من الأولوية القصوى إلى الأولوية الدنيا:

• 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. استخدام تراكب تصحيح الأخطاء

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

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

لمزيد من التفاصيل، يمكنك الاطّلاع على دليل مطوّري البرامج Cast Debugger وCommand & Control Tool (CaC).