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

1- نظرة عامة

شعار Google Cast

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

ما المقصود بـ Google Cast؟

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

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

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

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

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

ما ستتعرَّف عليه

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

المتطلبات

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

التجربة

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

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

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

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

مبتدئ متوسط مختص

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

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

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

3. نشر جهاز الاستقبال محليًا

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

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

تشغيل الخادم

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

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

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

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

صورة لوحدة تحكّم المطوّرين في حزمة Google Cast SDK يظهر فيها الزر "إضافة تطبيق جديد" مميّزًا

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

صورة لشاشة "تطبيق جهاز الاستقبال الجديد" مع تمييز الخيار "جهاز استقبال مخصّص"

انقر على "مستلم مخصّص"، وهذا هو ما نطوّره.

صورة لشاشة "جهاز استقبال مخصّص جديد" تعرِض عنوان URL يكتبه أحد المستخدِمين في الحقل "عنوان URL لتطبيق جهاز الاستقبال"

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

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

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

صورة لوحدة تحكّم المطوّرين في حزمة تطوير البرامج (SDK) لتكنولوجيا Google Cast مع تمييز الزر "إضافة جهاز جديد"

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

صورة لمربّع الحوار "إضافة جهاز استقبال بث"

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

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

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

صورة هاتف Android يشغِّل فيديو، وتظهر الرسالة "جارٍ البث إلى غرفة المعيشة" في أسفل الشاشة فوق مجموعة من عناصر التحكّم في مشغّل الفيديو مباشرةًصورة لشاشة بالحجم الكامل تشغل الفيديو نفسه

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

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

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

للبدء، افتح Cactool في Chrome. أدخِل رقم تعريف تطبيق جهاز الاستقبال الذي تلقّيته على وحدة تحكّم المطوّرين في حزمة تطوير البرامج (SDK) لتكنولوجيا Google 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;

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

لإيقاف طلبات البحث الصوتي التي يوفّرها المساعد، مثل 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) لجهاز استقبال البث.

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