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

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

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

Дополнительную информацию о работе рекламных пауз см. в обзоре рекламных пауз 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;

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

Требования 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 ) или создать приложение-получатель .

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