إضافة دعم مباشر إلى مستقبِل 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

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

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

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

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

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

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

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

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

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

تشغيل الخادم

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

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

4. تسجيل تطبيق في Cast Developer 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، وانقر على ضبط.

يجب إبلاغ Web Receiver Cast Application Framework (إطار عمل تطبيق البث) بأنّ المحتوى الذي سيتم تشغيله هو بث مباشر. لإجراء ذلك، عليك تعديل التطبيق باستخدام سطر التعليمة البرمجية التالي. أضِفه إلى الجزء الرئيسي من أداة اعتراض التحميل في 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;

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

في أداة اعتراض التحميل، عليك إزالة أمر 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) لجهاز استقبال البث.

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