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

1- نظرة عامة

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

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

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

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

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

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

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

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

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

المتطلبات

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

التجربة

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

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

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

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

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

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

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

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

تشغيل الخادم

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

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

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

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

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

انقر على "مستلم مخصّص"، وهذا هو ما نطوّره.

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

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

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

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

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

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

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

1. في متصفّحك، افتح أداة Command and Control (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

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

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

الإعداد

أدرِج النص البرمجي التالي في علامة <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 Web Receiver، واستخدام مستويات مختلفة للمسجِّل لتسجيل بيانات الأحداث. وتأخذ إعدادات 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. استخدام تراكب تصحيح الأخطاء

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

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