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

‫1. نظرة عامة

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

ما هي تكنولوجيا Google Cast؟

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

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

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

ما الذي سنقوم بإنشائه؟

بعد إكمال هذا الدرس العملي، ستكون قد أنشأت تطبيق Cast Receiver يستفيد من واجهات برمجة التطبيقات Live APIs.

أهداف الدورة التعليمية

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

المتطلبات

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

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

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

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

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

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

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

3- نشر تطبيق الاستقبال محليًا

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

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

تشغيل الخادم

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

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

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

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

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

اختَر "جهاز استقبال مخصّص"، وهو ما سننشئه.

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

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

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

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

أدخِل الرقم التسلسلي المطبوع على الجزء الخلفي من جهاز 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، ثمّ انقر على ضبط.

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

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

في أداة اعتراض التحميل، أزِل أمر الوسائط المتوافق مع 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) الخاصة بتطبيق Cast Receiver.

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