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