Добавьте расширенные функции в ваше приложение Web Sender

Рекламные паузы

SDK Web Sender обеспечивает поддержку рекламных пауз и сопутствующей рекламы в рамках заданного медиапотока.

Для получения более подробной информации о том, как работают рекламные паузы, см. раздел «Обзор рекламных пауз в Web Receiver» .

Хотя прерывания можно указать как на отправителе, так и на получателе, рекомендуется указывать их на веб-приемнике и приемнике 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)

Использование API треков

Дорожка может представлять собой текстовый объект (субтитры или подписи) или объект аудио- или видеопотока. API-интерфейсы дорожек позволяют работать с этими объектами в вашем приложении.

Объект 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 получателя не проверяет, отличается ли новый стиль от предыдущего, и уведомляет всех подключенных отправителей независимо от этого.

Индикатор прогресса

Отображение места воспроизведения с индикатором прогресса на стороне отправителя является обязательным требованием для большинства приложений. API Cast используют протокол Cast Media, который оптимизирует потребление полосы пропускания для этого и других сценариев, поэтому вам не нужно реализовывать собственную синхронизацию состояния. Для корректной реализации индикатора прогресса воспроизведения мультимедиа с использованием API см. пример приложения CastVideos-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();
  }
});

Следующие шаги

На этом завершается описание функций, которые вы можете добавить в свое веб-приложение для отправки сообщений. Теперь вы можете создать приложение для отправки сообщений на другой платформе ( Android или iOS ) или приложение для получения сообщений .

Назад
Интегрировать актерский состав