Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Как добавить в веб-приложение отправителя продвинутые функции

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

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 для работы с дорожками

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

Индикатор выполнения

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

Дальнейшие действия

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

Интеграция Cast