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

1. نظرة عامة

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

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

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

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

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

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

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

المُعطيات

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

المتطلبات

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

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

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

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

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

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

القراءة فقط اقرأها وأكمِل التمارين

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

حديث متوسط بارعة

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

حديث متوسط بارعة

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

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

تنزيل المصدر

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

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

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

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

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

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

تشغيل الخادم

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

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

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

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

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

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

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

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

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

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

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

أدخِل الرقم التسلسلي المطبوع على الجهة الخلفية من جهاز البث وأضِف إليه اسمًا وصفيًا. يمكنك أيضًا العثور على الرقم التسلسلي من خلال بث الشاشة في Chrome عند الوصول إلى Play Console لـ 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

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

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

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

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

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

7- الدمج مع CastDebugLogger API

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

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

★ ملاحظة:

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

الإعداد

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

تحذير: احرص على تغيير 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. تهانينا

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

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

هل تريد مزيدًا من المحتوى المخصّص للبث؟

يمكنك الاطّلاع على المشاريع البرمجية الأخرى لتطبيقات البث ونماذج التطبيقات على GitHub.