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

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