Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

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

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

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

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

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

Если вы используете Default Media Receiver, который не требует регистрации, вы используете константу, предопределенную Web Sender 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 вернет Promise , который можно использовать для выполнения любых необходимых операций для успешного результата. Если Promise отклонен, аргументом функции будет 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, подключения к этому приложению и инициализации канала управления мультимедиа. См. руководство по жизненному циклу приложения Web Receiver для получения дополнительной информации о сеансах Cast и жизненном цикле Web Receiver.

Сеансы управляются классом 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 .

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

Настройка

Добавить расширенные функции

Интегрируйте Cast SDK в ваше приложение Web Sender Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.