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

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

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

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

يمكن تحديد الفواصل على كلّ من المرسِل والمستلِم، ولكن يُنصح بتحديدها في جهاز الاستقبال على الويب وجهاز استقبال 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، الذي يحسّن استهلاك معدل نقل البيانات في هذه الحالة وغيرها، ولذلك لن تحتاج إلى تنفيذ مزامنة الحالة الخاصة بك. ومن أجل التنفيذ الصحيح لمؤشر تقدّم تشغيل الوسائط باستخدام واجهات برمجة التطبيقات، يمكنك الاطّلاع على نموذج تطبيق 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)، أو إنشاء تطبيق للمستلِم.