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

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