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

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

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

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

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

Фреймворк отправителя – это 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();
  • ПОИСК: 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 через 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.

Подробнее о передаче потока на веб-приемнике…

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