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

1. نظرة عامة

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

ما المقصود بتكنولوجيا Google Cast؟

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

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

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

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

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

المُعطيات

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

المتطلبات

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

التجربة

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

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

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

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

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

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

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

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

تشغيل الخادم

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

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

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

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

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

حدد "جهاز استقبال مخصص"، هذا هو ما ننشئه.

أدخِل تفاصيل المُستلِم الجديد، وتأكَّد من استخدام عنوان 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 هذا على جميع واجهات المستخدم الخاصة بتطبيق جهاز الاستقبال.

receiver.js

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

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

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

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

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

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

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