إضافة ميزات متقدّمة إلى تطبيق Web Sender

الفواصل الإعلانية

توفِّر حزمة Web Sender دعمًا للفواصل الإعلانية والإعلانات المصاحبة ضمن بث وسائط معين.

يمكنك الاطّلاع على نظرة عامة على الفواصل الإعلانية في أجهزة استقبال الويب لمزيد من المعلومات للحصول على معلومات عن طريقة عمل الفواصل الإعلانية

بينما يمكن تحديد الفواصل على كل من المرسل والمستلم، يُنصح بتحديدها المحدد في جهاز استقبال الويب جهاز استقبال Android TV للحفاظ على ثباتك السلوك عبر المنصات.

حدِّد على الويب الفواصل الإعلانية في أمر تحميل باستخدام BreakClip وBreak:

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

استخدام واجهات برمجة التطبيقات للمسارات

يمكن أن يكون المقطع الصوتي كائنًا نصيًا (ترجمة أو شرح) أو مقطعًا صوتيًا أو بث فيديو. الخاص بك. تتيح لك واجهات برمجة التطبيقات للمسارات استخدام هذه الكائنات في تطبيقك.

كائن Track مقطعًا صوتيًا في حزمة SDK. يمكنك إعداد مسار وضبط معرّف فريد. على النحو التالي:

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

قد يتضمّن عنصر الوسائط مقاطع صوتية متعددة على سبيل المثال، يمكن أن يحتوي على عدة مقاطع الترجمة (لكل منها لغة مختلفة) أو عمليات بث صوتي بديلة متعددة (لمختلف اللغات).

MediaInfo هي الفئة التي تصمم عنصر وسائط. لربط مجموعة من Track أخرى بها عنصر وسائط، فيمكنك تحديث tracks الموقع. يجب أن يتم هذا الاقتران قبل تحويل الوسائط تم تحميله إلى المُستلِم:

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

يمكنك ضبط المسارات النشطة في الوسائط activeTrackIds طلبك.

يمكنك أيضًا تفعيل مقطع صوتي واحد أو أكثر كان مرتبطًا بالوسائط. بعد تحميل الوسائط، عن طريق استدعاء EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) وتمرير أرقام تعريف قنوات الإصدار المطلوب تفعيلها في opt_activeTrackIds. ملاحظة: تكون كلتا المعلمتين اختياريتين ويمكنك اختيار أي المسارات أو الأنماط النشطة تحديدها وفقًا لتقديرك. على سبيل المثال، إليك كيفية تفعيل الترجمة باللغة الفرنسية (2) والصوت باللغة الفرنسية (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

لإزالة جميع مسارات الصوت أو الفيديو من الوسائط الحالية، ما عليك سوى ضبط mediaInfo.tracks=null (مصفوفة فارغة) وأعِد تحميل الوسائط.

لإزالة كل المسارات النصية من الوسائط الحالية (على سبيل المثال، إيقاف ترجمات)، نفّذ أحد الإجراءات التالية:

• تحديث تطبيق "var activeTrackIds = [2, 3];" (المعروض سابقًا) ليصبح يتضمن [3] فقط المقطع الصوتي.
• ضبط mediaInfo.tracks=null لاحظ أنه ليس من الضروري أعِد تحميل الوسائط لإيقاف الشرح النصي (track.hidden). إرسال مصفوفة activeTracksId لا تحتوي على يؤدي تفعيل trackId إلى إيقاف مسار النص.

تغيير نمط المقاطع النصية

TextTrackStyle هو الكائن الذي يضم معلومات النمط لمسار نصي. بعد إنشاء عنصر TextTrackStyle حالي أو تعديله، يمكنك تطبيق ذلك عنصر الوسائط الذي يتم تشغيله حاليًا من خلال طلب editTrackInfo كما يلي:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

ويمكنك تتبع حالة الطلب عن طريق طلبات الاسترداد، سواء نجاح أو خطأ، وتحديث المرسِل المصدر وفقًا لذلك.

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

يمكنك تصميم عناصر نمط تتبُّع النص التالية:

• لون الواجهة (النص) وتعتيمها
• لون الخلفية ودرجة التعتيم
• نوع الحافة
• لون الحافة
• مقياس الخط
• مجموعة الخطوط
• نمط الخط

على سبيل المثال، يمكنك ضبط لون النص على اللون الأحمر بدرجة تعتيم 75% على النحو التالي:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

التحكم في مستوى الصوت

يمكنك استخدام صفحة RemotePlayer و RemotePlayerController لضبط مستوى صوت جهاز الاستقبال.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

يجب أن يلتزم تطبيق المرسِل بالإرشادات التالية للتحكم في مستوى الصوت:

• ويجب أن يتزامن تطبيق المرسِل مع المُستلِم حتى تعرض واجهة المستخدم للمرسل دائمًا مستوى الصوت لكل مستلم. يمكنك استخدام RemotePlayerEventType.VOLUME_LEVEL_CHANGED و معاودة الاتصال RemotePlayerEventType.IS_MUTED_CHANGED للحفاظ على مستوى الصوت على المُرسِل. يمكنك الاطّلاع على تعديلات الحالة. لمزيد من المعلومات.
• يجب ألا تضبط تطبيقات المُرسِل مستوى الصوت على مستوى محدَّد ومحدّد مسبقًا. أو ضبط مستوى الصوت على مستوى صوت الرنين/الوسائط في جهاز المُرسِل عند يتم تحميل التطبيق على جهاز المُستلِم.

عرض عناصر التحكّم في مستوى صوت المرسِل في قائمة التحقق من التصميم.

جارٍ إرسال رسائل وسائط إلى المستلِم.

يمكن إرسال Media Messages من المُرسِل إلى المستلم. على سبيل المثال، لإرسال رسالة SKIP_AD إلى المستلِم:

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

آخر الأخبار

عند اتصال عدة مرسلين بالمستلم نفسه، من المهم أن يكون كل مرسل على دراية بالتغييرات التي تطرأ على المُستلِم حتى إذا كانت تلك التغييرات تم البدء من مرسلين آخرين.

لتحقيق هذه الغاية، يجب أن يسجّل تطبيقك جميع المستمعين اللازمين على RemotePlayerController إذا كانت TextTrackStyle من التغييرات الحالية في الوسائط، فسيتم إعلام كل المرسلين المتصلين والخصائص المقابلة لجلسة الوسائط الحالية، مثل activeTrackIds وtextTrackStyle من MediaInfo إلى المرسلين في عمليات معاودة الاتصال. في هذه الحالة، يتضمن جهاز SDK المستلم ما إذا كان النمط الجديد مختلفًا عن النمط السابق إلى جميع المرسلين المتصلين بغض النظر عن ذلك.

مؤشر التقدم

إن عرض موقع التشغيل مع مؤشر تقدم على المرسل هو متطلبات معظم التطبيقات. تستخدم واجهات برمجة التطبيقات Cast بروتوكول وسائط البث الذي تحسين استهلاك معدل نقل البيانات في هذه الحالات وغيرها، وبالتالي إلى تنفيذ مزامنة الحالة الخاصة بك. من أجل التنفيذ السليم لمؤشر تقدم تشغيل الوسائط باستخدام واجهات برمجة التطبيقات، يمكنك الاطلاع على Cast Videos-chrome نموذج تطبيق.

متطلبات سياسة مشاركة الموارد المتعددة المصادر (CORS)

لبث الوسائط التكيُّفي، تتطلّب تكنولوجيا Google Cast توفُّر عناوين بروتوكول مشاركة الموارد المتعددة المصادر (CORS) ولكن حتى مجموعات بث وسائط mp4 البسيطة تتطلب سياسة مشاركة الموارد المتعددة المصادر (CORS) إذا كانت تتضمن مقاطع صوتية. إذا كنت إذا كنت تريد تفعيل المسارات لأي وسائط، فيجب تفعيل سياسة مشاركة الموارد المتعددة المصادر (CORS) لكل من المسار مجموعات البث ومصادر الوسائط لذلك، في حال عدم توفّر عناوين CORS لوسائط mp4 البسيطة على خادمك، ثم إضافة عنوان فرعي بعد ذلك، لن تتمكن من بث الوسائط إلا إذا حدّثت خادمك لتضمين عناوين CORS المناسبة.

يجب توفّر الرؤوس التالية: Content-Type وAccept-Encoding وRange. يُرجى العلم أنّ آخر عنوانَين، Accept-Encoding وRange، إضافيان. رؤوس قد لا تكون بحاجة إليها من قبل.

حرفان "*" لا يمكن استخدامه لعنوان Access-Control-Allow-Origin. في حال حذف تشتمل الصفحة على محتوى وسائط محمي، فيجب أن تستخدم نطاقًا بدلاً من حرف بدل.

استئناف جلسة بدون إعادة تحميل صفحة الويب

لاستئناف CastSession حالية، يُرجى استخدام requestSessionById(sessionId) مع sessionId من الجلسة التي تحاول الانضمام إليها.

يمكن العثور على sessionId على CastSession النشِط باستخدام getSessionId() بعد الاتصال loadMedia()

النهج الموصى به هو:

1. اتصل loadMedia() لبدء الجلسة
2. تخزين "sessionId" على الجهاز
3. إعادة الانضمام إلى الجلسة باستخدام requestSessionById(sessionId) عند الحاجة

let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

الخطوات التالية

وبهذا نصل إلى الميزات التي يمكنك إضافتها إلى تطبيق Web Sender. يمكنك الآن إنشاء تطبيق مرسل لنظام أساسي آخر (Android أو iOS)، أو إنشاء تطبيق مستلِم