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

1- نظرة عامة

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

ما هي خدمة Google Cast؟

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

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

تم توفير قائمة التحقّق من تصميم Google 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- تسجيل تطبيق في Play Console

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

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

اختَر "المستقبِل المخصَّص". هذا هو الإصدار الذي ننشئه.

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

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

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

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

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

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

5. بث بث مباشر بسيط

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

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

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

للبدء، افتح مُرسِل الويب في Chrome. أدخِل معرّف تطبيق المُستلِم الذي حصلت عليه على Play Console Developer Console وانقر على "ضبط".

في جهاز الاستقبال، علينا إضافة بعض المنطق لإعلام إطار عمل تطبيق Cast (CAF) بأنّ البث مباشر. لحسن الحظ، يتطلب هذا الإجراء سطرًا واحدًا فقط من الرمز. إضافة سطر الرمز التالي إلى أداة اعتراض التحميل في receiver.js:

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

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

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

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;

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

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

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

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

loadGuideData();

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

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

7- إيقاف التقديم/الترجيع

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

في أداة اعتراض التحميل، أزِل أمر الوسائط المتوافقة مع SEK. سيؤدي هذا إلى إيقاف البحث عن جميع واجهات المُرسِلين والأجهزة الجوّالة.

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

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

/**
 * Seek 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.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // 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 seekData;
    }
);

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

8- تهانينا

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

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