إضافة دعم مباشر إلى مستقبِل Cast

1. نظرة عامة

سيعلّمك هذا الدرس التطبيقي حول الترميز كيفية إنشاء تطبيق مخصّص لاستقبال الويب يستخدم واجهة برمجة التطبيقات Cast Live Breaks API.

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

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

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

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

ما الذي سننشئه؟

عند الانتهاء من هذا الدرس التطبيقي حول الترميز، ستكون قد أنشأت جهاز استقبال بث يستفيد من واجهات برمجة التطبيقات Live APIs.

المُعطيات

• كيفية التعامل مع محتوى الفيديو المباشر في Cast
• كيفية ضبط سيناريوهات البث المباشر المختلفة المتوافقة مع Cast
• كيفية إضافة بيانات البرنامج إلى البث المباشر

المتطلبات

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

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

• يجب أن يكون لديك معرفة سابقة بتطوير الويب.
• خبرة سابقة في إنشاء تطبيقات مُرسِل ومستقبل بث الوسائط

> هل تواجه مشاكل في الشبكة؟ > إذا كنت في موقع جغرافي لا تتوفّر فيه شبكة WiFi موثوقة، يمكن توصيل جهاز Chromecast باستخدام محوِّل إيثرنت من أجل

Chromecast أو Chromecast مع Google TV

كيف ستستخدم هذا البرنامج التعليمي؟

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

ما مدى رضاك عن تجربتك في إنشاء تطبيقات الويب؟

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

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

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

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

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

> يتضمّن مستودع الدرس التطبيقي حول الترميز cast-videos-cast نموذجَين لمشروعَين: > * app-start، رمز البدء الذي ستبني عليه في هذا الدرس التطبيقي حول الترميز. * app-done: الرمز الكامل لنموذج تطبيق الفيديو النهائي.

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

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

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

تشغيل الخادم

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

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

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

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

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

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

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

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

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

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

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

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

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

5- بث محتوى مباشر بسيط

قبل بدء هذا الدرس التطبيقي حول الترميز، قد يكون من المفيد مراجعة دليل المطوّر المباشر الذي يقدّم نظرة عامة على واجهات برمجة التطبيقات المباشرة.

بالنسبة إلى المُرسِل، سنستخدم Cactool لبدء جلسة بث. تم تصميم جهاز الاستقبال لبدء تشغيل البث المباشر تلقائيًا.

يتألّف جهاز الاستقبال من ثلاثة ملفات. ملف HTML أساسي يُسمّى receiver.html ويحتوي على بنية التطبيق الرئيسية. ولن تحتاج إلى تعديل هذا الملف. هناك أيضًا ملف يُسمى receiver.js، ويحتوي على جميع منطق المُستلِم. وأخيرًا، هناك أيضًا metadata_service.js سيتم استخدامه لاحقًا في الدرس التطبيقي حول الترميز لمحاكاة الحصول على بيانات أدلة البرنامج.

للبدء، افتح Cactool في Chrome. أدخِل معرّف تطبيق المستلِم الذي تم منحه لك في Play Console لـ Google Cast SDK، ثم انقر على ضبط.

يجب توجيه Web Receiver Cast Application Framework (إطار عمل تطبيق البث) بأنّ المحتوى الذي سيتم تشغيله هو بث مباشر. لإجراء ذلك، عدِّل التطبيق باستخدام سطر الرمز التالي. أضِفه إلى الجزء الرئيسي من أداة اعتراض التحميل في receiver.js:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

يؤدي ضبط نوع البث على LIVE إلى تفعيل واجهة المستخدم المباشرة في CAF. ستنتقل حزمة تطوير البرامج (SDK) لبرنامج Web Receiver تلقائيًا إلى محتوى البث المباشر. لم تتم إضافة بيانات دليل البرامج المباشرة إلى الآن، لذا سيمثّل شريط التمرير المدة الكاملة للنطاق الذي يمكن التقديم أو الإيقاف فيه للبث.

احفظ التغييرات في receiver.js وابدأ جلسة بث على Cactool من خلال النقر على زر البث واختيار جهاز بث مستهدف. من المفترض أن يبدأ البث المباشر على الفور.

6- إضافة بيانات دليل البرامج

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

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

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

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

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

بالإضافة إلى ذلك، أضف استدعاءً للدالة لتحميل بيانات الدليل في أداة اعتراض التحميل:

loadGuideData();

احفظ ملف receiver.js وابدأ جلسة بث. من المفترض أن يظهر لك وقت بدء البرنامج ووقت انتهائه وعنوانه على الشاشة.

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

7- إيقاف ميزة التقديم أو الترجيع

تتكون معظم الفيديوهات المضمّنة من مقاطع تحتوي على مجموعة من إطارات الفيديو. ما لم يتم تحديد خلاف ذلك، ستسمح ميزة CAF للمستخدمين بالبحث ضمن هذه الشرائح. ويمكن لمستقبل الويب تحديد ذلك من خلال استدعاء اثنين من واجهات برمجة التطبيقات المتاحة.

في أداة اعتراض التحميل، أزِل أمر الوسائط المتوافق مع SEEK. يؤدي ذلك إلى إيقاف ميزة التقديم أو الإيقاف السريع في جميع واجهات المرسِل واللمس على الأجهزة الجوّالة. أضِف الرمز التالي بعد تعريفات متغيّرات مثيل حزمة تطوير البرامج (SDK) في receiver.js.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

لإيقاف أوامر التقديم أو الإيقاف الصوتي المستندة إلى "مساعد Google"، مثل Ok Google، ارجِع 60 ثانية، يجب استخدام أداة اعتراض عمليات التقديم أو الإيقاف. يتم استدعاء هذا المُعترض في كل مرة يتم فيها تقديم طلب لتقديم أو ترجيع الفيديو. إذا تم إيقاف أمر الوسائط المتوافق مع SEEK، سيرفض الاعتراض طلب التقديم أو الإيقاف. أضِف مقتطف الرمز التالي إلى ملف receiver.js:

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

احفظ ملف receiver.js وابدأ جلسة بث. من المفترض ألا يعود بإمكانك التقديم أو الإيقاف خلال البث المباشر.

8. تهانينا

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

لمزيد من التفاصيل، يُرجى الاطّلاع على دليل المطوّر الخاص بميزة البث المباشر.

> هل تريد المزيد من المحتوى المعروض على الشاشة؟ > يمكنك الاطّلاع على المشاريع البرمجية الأخرى لتطبيقات البث ونماذج التطبيقات على GitHub.