Как интегрировать Cast SDK в веб-приложение отправителя

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

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

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

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

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

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

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

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

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

Framework

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

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

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

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

Полное описание пространства имен можно найти в документации по Google Cast Web Sender API.

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

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

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

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

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 вернет объект Promise, который можно использовать для выполнения любых операций, необходимых для получения успешного результата. Если объект Promise отклонен, аргументом функции будет chrome.cast.ErrorCode.

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

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

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

  • ВОСПРОИЗВЕСТИ/ПРИОСТАНОВИТЬ: playerController.playOrPause();
  • STOP: playerController.stop();
  • SEEK: 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;
  });

Когда происходят такие события, как пауза, воспроизведение, возобновление или поиск, приложению необходимо будет действовать. на них и синхронизировать себя с приложением Web Receiver на 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;
    }
  })

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

Подробную информацию можно найти в статье Перенос трансляции в веб-приемнике.

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