Добавьте расширенные функции в ваше приложение 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)

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

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

Объект 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;

Вы можете установить активные треки в запросе media 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 .

Требования КОРС

Для адаптивной потоковой передачи мультимедиа 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 ) или приложение-получатель .

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