Эта страница переведена с помощью Cloud Translation API.

Добавьте расширенные функции в ваше приложение 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-интерфейсы 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 , чтобы поддерживать громкость на отправителе. Дополнительную информацию см. в разделе Обновления статуса .
Приложения-отправители не должны устанавливать уровень громкости на определенном, заранее определенном уровне или устанавливать уровень громкости на громкость звонка/мультимедиа на устройстве-отправителе, когда приложение загружается на получателе.

См. элементы управления громкостью Sender в Контрольном списке дизайна .

Отправка мультимедийных сообщений получателю

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() .

Рекомендуемый подход заключается в следующем:

Вызовите loadMedia() , чтобы начать сеанс
Сохраните sessionId локально
Присоединитесь к сеансу, используя 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 ) или создать приложение-получатель .

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