Интегрируйте Cast SDK в ваше приложение Web Sender

В этом руководстве разработчика описывается, как добавить поддержку Google Cast в приложение Web Sender с помощью Cast SDK.

Терминология

Мобильное устройство или браузер является отправителем , который управляет воспроизведением; Устройство Google Cast является приемником , который отображает контент на экране для воспроизведения.

SDK Web Sender состоит из двух частей: Framework API ( cast.framework ) и Base API ( chrome.cast ). Как правило, вы выполняете вызовы более простого Framework API более высокого уровня, которые затем обрабатываются более низким уровнем. Базовый API уровня.

Платформа отправителя относится к API платформы, модулю и связанным ресурсам, которые предоставляют оболочку для функций более низкого уровня. Приложение-отправитель или приложение Google Cast Chrome — это веб-приложение (HTML/JavaScript), работающее в браузере Chrome на устройстве-отправителе. Приложение веб-приемника — это приложение HTML/JavaScript, работающее на Chromecast или устройстве Google Cast.

Платформа отправителя использует асинхронный обратный вызов для информирования приложения-отправителя о событиях и перехода между различными состояниями жизненного цикла приложения Cast.

Загрузите библиотеку

Чтобы ваше приложение могло реализовать функции Google Cast, ему необходимо знать расположение SDK Google Cast Web Sender, как показано ниже. Добавьте параметр запроса URL-адреса loadCastFramework, чтобы также загрузить API Web Sender Framework. Все страницы вашего приложения должны ссылаться на библиотеку следующим образом: 

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Рамки

SDK Web Sender использует cast.framework. * пространство имен. Пространство имен представляет собой следующее:

  • Методы или функции, вызывающие операции API.
  • Прослушиватели событий для функций прослушивания в API

Структура состоит из следующих основных компонентов:

  • CastContext — это одноэлементный объект, который предоставляет информацию о текущем состоянии Cast и запускает события для изменения состояния Cast и состояния сеанса Cast.
  • Объект CastSession управляет сеансом — он предоставляет информацию о состоянии и запускает события, такие как изменения громкости устройства, состояние отключения звука и метаданные приложения.
  • Элемент кнопки Cast — простой пользовательский элемент HTML, расширяющий кнопку HTML. Если предоставленной кнопки трансляции недостаточно, вы можете использовать состояние трансляции для реализации кнопки трансляции.
  • RemotePlayerController обеспечивает привязку данных для упрощения реализации удаленного проигрывателя.

Ознакомьтесь с Справочником по API Google Cast Web Sender , чтобы получить полное описание пространства имен.

Кнопка трансляции

Компонент кнопки трансляции в вашем приложении полностью обрабатывается платформой. Сюда входит управление видимостью, а также обработка событий кликов.

<google-cast-launcher></google-cast-launcher>

Альтернативно вы можете создать кнопку программно:

document.createElement("google-cast-launcher");

При необходимости к элементу можно применить любые дополнительные стили, например размер или расположение. Используйте атрибут --connected-color , чтобы выбрать цвет для подключенного состояния веб-приемника, и --disconnected-color для отключенного состояния.

Инициализация

После загрузки API платформы приложение вызовет обработчик window.__onGCastApiAvailable . Вы должны убедиться, что приложение устанавливает этот обработчик в window перед загрузкой библиотеки отправителя .

В этом обработчике вы инициализируете взаимодействие Cast, вызывая метод setOptions(options) CastContext .

Например:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Затем вы инициализируете API следующим образом:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Сначала приложение получает одноэлементный экземпляр объекта CastContext , предоставленный платформой. Затем он использует setOptions(options) с помощью объекта CastOptions для установки applicationID .

Если вы используете медиа-приемник по умолчанию, который не требует регистрации, вы используете константу, предопределенную SDK Web Sender, как показано ниже, вместо applicationID : 

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Контроль СМИ

После инициализации CastContext приложение может получить текущий CastSession в любое время с помощью getCurrentSession() .

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

CastSession можно использовать для загрузки мультимедиа на подключенное устройство Cast с помощью loadMedia(loadRequest) . Сначала создайте MediaInfo , используя contentId и contentType , а также любую другую информацию, связанную с контентом. Затем создайте из него LoadRequest , установив всю необходимую информацию для запроса. Наконец, вызовите loadMedia(loadRequest) в вашем CastSession .

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

Метод loadMedia вернет обещание , которое можно использовать для выполнения любых необходимых операций для успешного результата. Если обещание отклонено, аргументом функции будет chrome.cast.ErrorCode .

Вы можете получить доступ к переменным состояния игрока в RemotePlayer . Все взаимодействия с RemotePlayer , включая обратные вызовы и команды медиа-событий, обрабатываются с помощью RemotePlayerController .

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController предоставляет приложению полный контроль над мультимедиа: ВОСПРОИЗВЕДЕНИЕ, ПАУЗА, СТОП и ПОИСК загруженного мультимедиа.

  • ВОСПРОИЗВЕДЕНИЕ/ПАУЗА: playerController.playOrPause();
  • СТОП: playerController.stop();
  • ПОИСК: playerController.seek();

RemotePlayer и RemotePlayerController можно использовать с платформами привязки данных, такими как Polymer или Angular, для реализации удаленного проигрывателя.

Вот фрагмент кода для Angular: 

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Статус СМИ

Во время воспроизведения мультимедиа происходят различные события, которые можно перехватить, установив прослушиватели для различных событий cast.framework.RemotePlayerEventType в объекте RemotePlayerController .

Чтобы получить информацию о состоянии мультимедиа, используйте событие cast.framework.RemotePlayerEventType .MEDIA_INFO_CHANGED , которое срабатывает при изменении воспроизведения и при изменении CastSession.getMediaSession().media .

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Когда происходят такие события, как пауза, воспроизведение, возобновление или поиск, приложению необходимо будет отреагировать на них и синхронизироваться между собой и приложением веб-приемника на устройстве Cast. Дополнительную информацию см. в разделе Обновления статуса .

Как работает управление сеансами

Cast SDK представляет концепцию сеанса Cast, создание которого объединяет этапы подключения к устройству, запуска (или присоединения) приложения веб-приемника, подключения к этому приложению и инициализации канала управления мультимедиа. Дополнительные сведения о сеансах Cast и жизненном цикле веб-приемника см. в руководстве по жизненному циклу приложения веб-приемника.

Сессии управляются классом CastContext , который ваше приложение может получить с помощью cast.framework.CastContext.getInstance() . Отдельные сеансы представлены подклассами класса Session . Например, CastSession представляет сеансы с устройствами Cast. Ваше приложение может получить доступ к текущему активному сеансу Cast через CastContext.getCurrentSession() .

Чтобы отслеживать состояние сеанса, добавьте в CastContext прослушиватель для типа событий CastContextEventType .SESSION_STATE_CHANGED .

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Для отключения, например, когда пользователь нажимает кнопку «Остановить трансляцию» в диалоговом окне трансляции, вы можете добавить в свой прослушиватель прослушиватель для типа событий RemotePlayerEventType .IS_CONNECTED_CHANGED . В вашем прослушивателе проверьте, отключен ли RemotePlayer . Если да, при необходимости обновите состояние локального проигрывателя. Например:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Хотя пользователь может напрямую управлять завершением трансляции с помощью кнопки Cast платформы, отправитель сам может остановить трансляцию, используя текущий объект CastSession . 

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Потоковая передача

Сохранение состояния сеанса является основой передачи потока, при которой пользователи могут перемещать существующие аудио- и видеопотоки между устройствами с помощью голосовых команд, приложения Google Home или интеллектуальных дисплеев. Воспроизведение мультимедиа прекращается на одном устройстве (источнике) и продолжается на другом (назначении). Любое устройство Cast с последней версией прошивки может служить источником или пунктом назначения при потоковой передаче.

Чтобы получить новое целевое устройство во время передачи потока, вызовите CastSession#getCastDevice() при вызове события cast.framework.SessionState .SESSION_RESUMED .

Дополнительную информацию см. в разделе Передача потока в веб-приемнике .

Назад
Настройка
Далее
Добавить расширенные функции