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

1. نظرة عامة

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

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

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

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

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

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

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

المُعطيات

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

المتطلبات

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

التجربة

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

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- بث محتوى مباشر بسيط

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

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

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

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

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

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

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

يمكنك حفظ التغييرات على "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;

في هذا الدرس التطبيقي حول الترميز، سنستخدم نموذج خدمة بيانات وصفية لتوفير البيانات الوصفية من البث المباشر. لإنشاء قائمة بالبيانات الوصفية للبرنامج، يمكنك إنشاء container. تحتوي 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 ثانية، يجب استخدام اعتراض التقديم/الترجيع. يتم استدعاء أداة الاعتراض في كل مرة يتم فيها إجراء طلب طلب. في حال إيقاف أمر "البحث" المتوافق مع الوسائط، سيرفض جهاز الاعتراض طلب التقديم. أضِف مقتطف الرمز التالي إلى ملف 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) لجهاز الاستقبال للبث.

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