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

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

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

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

Web Sender SDK состоит из двух частей: Framework API ( cast.framework ) и Base API ( chrome.cast ). Базовый 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>

Рамки

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

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

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

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

Полное описание пространства имен см. в Справочнике по API Google Cast Web Sender .

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

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

<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 веб-отправителя, как показано ниже, вместо 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;
  });

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

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

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

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

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