Добавьте живую поддержку в Cast Receiver

1. Обзор

логотип Google Cast

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

Что такое Google Cast?

Google Cast позволяет пользователям транслировать контент с мобильного устройства на телевизор. Затем пользователи могут использовать свое мобильное устройство в качестве пульта дистанционного управления для воспроизведения мультимедиа на телевизоре.

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

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

Что мы будем строить?

По завершении этого практического занятия вы создадите приемник Cast Receiver, использующий преимущества API Live.

Что вы узнаете

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

Что вам понадобится

  • Последняя версия браузера Google Chrome .
  • HTTPS-хостинг, например, Firebase Hosting или ngrok .
  • Устройство Google Cast, такое как Chromecast или Android TV, с подключением к интернету.
  • Телевизор или монитор с HDMI-входом, или Google Home Hub.

Опыт

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

Как вы будете использовать этот учебный материал?

Прочитайте только от начала до конца. Прочитайте текст и выполните упражнения.

Как бы вы оценили свой опыт в разработке веб-приложений?

Новичок Средний Профессионал

2. Получите пример кода.

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

и распакуйте загруженный zip-файл.

3. Локальное развертывание приемника

Для использования веб-ресивера с устройством Cast необходимо, чтобы он размещался в месте, доступном для вашего устройства Cast. Если у вас уже есть сервер, поддерживающий HTTPS, пропустите следующие инструкции и запишите URL-адрес , так как он понадобится вам в следующем разделе.

Если у вас нет доступного сервера, вы можете использовать Firebase Hosting или ngrok .

Запустите сервер

После того, как вы настроили выбранную вами службу, перейдите в app-start и запустите сервер.

Запишите URL-адрес вашего размещенного ресивера. Он понадобится вам в следующем разделе.

4. Зарегистрируйте приложение в консоли разработчика Cast.

Для запуска пользовательского приемника, как это реализовано в данном практическом задании, на устройствах Chromecast необходимо зарегистрировать ваше приложение . После регистрации приложения вы получите идентификатор приложения, который ваше приложение-отправитель должно использовать для выполнения вызовов API, например, для запуска приложения-приемника.

Изображение консоли разработчика Google Cast SDK с выделенной кнопкой «Добавить новое приложение».

Нажмите «Добавить новое приложение».

Изображение экрана «Новое приложение для приемника» с выделенной опцией «Пользовательский приемник».

Выберите "Пользовательский приемник", именно его мы и создаем.

Изображение экрана «Создать новый пользовательский приемник», показывающее URL-адрес, который пользователь вводит в поле «URL-адрес приложения-приемника».

Введите данные вашего нового приемника, обязательно используйте полученный вами URL-адрес.

в последнем разделе. Запишите идентификатор приложения, присвоенный вашему новому приемнику.

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

Изображение консоли разработчика Google Cast SDK с выделенной кнопкой «Добавить новое устройство».

Нажмите «Добавить новое устройство»

Изображение диалогового окна «Добавить устройство приема Cast».

Введите серийный номер, напечатанный на задней панели вашего устройства Cast, и присвойте ему описательное имя. Вы также можете найти свой серийный номер, транслируя экран в Chrome через консоль разработчика Google Cast SDK.

Для подготовки ресивера и устройства к тестированию потребуется от 5 до 15 минут. После ожидания в течение 5-15 минут необходимо перезагрузить устройство Cast.

5. Простая трансляция в прямом эфире.

Изображение телефона Android, воспроизводящего видео; внизу, чуть выше элементов управления видеоплеером, появляется сообщение «Трансляция в гостиную».Изображение полноразмерного экрана, на котором воспроизводится то же видео.

Перед началом работы над этим практическим заданием полезно ознакомиться с руководством для разработчиков , содержащим обзор работающих API.

Для отправки мы будем использовать Cactool l для запуска сеанса Cast. Приемник же предназначен для автоматического начала воспроизведения прямой трансляции.

Приёмник состоит из трёх файлов. Первый — это базовый HTML-файл receiver.html , содержащий основную структуру приложения. Вам не потребуется его изменять. Второй — receiver.js , в котором содержится вся логика работы приёмника. И, наконец, третий — metadata_service.js , который будет использоваться позже в практическом задании для имитации получения данных из программы передач.

Для начала откройте Cactool в Chrome. Введите идентификатор приложения-приемника, который вам был предоставлен в консоли разработчика Cast SDK, и нажмите «Установить» .

Для работы веб-приложения Web Receiver Cast Application Framework (CAF) необходимо указать, что воспроизводимый контент представляет собой прямую трансляцию. Для этого внесите в приложение следующую строку кода. Добавьте её в основной блок перехватчика загрузки в receiver.js :

request.media.streamType = cast.framework.messages.StreamType.LIVE;

Установка типа потока на LIVE активирует пользовательский интерфейс CAF в режиме реального времени. SDK веб-приемника автоматически переключится на край потока в режиме реального времени. Данные программы передач в режиме реального времени пока не добавлены, поэтому полоса прокрутки будет отображать всю длину диапазона перемотки потока.

Сохраните изменения в receiver.js и запустите сеанс трансляции в Cactool , нажав на кнопку трансляции и выбрав целевое устройство трансляции. Прямая трансляция должна начаться немедленно.

6. Добавление данных программы передач

Поддержка CAF для потоковой передачи контента в прямом эфире теперь включает отображение данных телепрограммы в приложениях приемника и отправителя. Поставщикам контента настоятельно рекомендуется включать метаданные программ в свои приложения приемника для улучшения пользовательского опыта, особенно для длительных потоков в прямом эфире, таких как телеканалы.

CAF поддерживает установку метаданных для нескольких программ в одном потоке. Установив метки времени начала и длительность в объектах MediaMetadata , приемник автоматически обновляет метаданные, отображаемые отправителями и наложением, в зависимости от текущего местоположения проигрывателя в потоке. Ниже приведен пример API и их общего использования.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

Для этой практической работы мы будем использовать пример службы метаданных для предоставления метаданных для нашей прямой трансляции. Чтобы создать список метаданных программы, создайте контейнер . ContainerMetadata содержит список объектов MediaMetadata для одного медиапотока. Каждый объект MediaMetadata представляет собой отдельный раздел в контейнере. Когда ползунок воспроизведения находится в пределах заданного раздела, его метаданные автоматически копируются в статус медиапотока. Добавьте следующий код в файл receiver.js , чтобы загрузить пример метаданных из нашей службы и предоставить контейнер в CAF.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

Кроме того, добавьте вызов функции для загрузки данных руководства в перехватчик нагрузки:

loadGuideData();

Сохраните файл receiver.js и запустите сессию Cast. На экране должно отобразиться время начала и окончания программы, а также её название.

При переходе курсора воспроизведения к новому разделу в контейнере получатель отправляет всем отправителям новое сообщение о состоянии медиафайлов, чтобы приложения отправителей могли обновить свой пользовательский интерфейс. Рекомендуется, чтобы приложения получателя обновляли метаданные контейнера в перехватчике состояния медиафайлов, чтобы продолжать передавать информацию о программе приложениям отправителей. В нашем примере сервиса мы возвращаем метаданные текущей программы, а также метаданные для следующих двух программ. Чтобы обновить метаданные для потока, создайте новый контейнер и вызовите setContainerMetadata как в предыдущем примере.

7. Отключение поиска

Большинство видеопотоков состоят из сегментов, содержащих диапазон видеокадров. Если не указано иное, CAF позволяет пользователям осуществлять перемотку внутри этих сегментов. Веб-приемник может указать это, вызвав несколько доступных API.

В перехватчике загрузки удалите команду SEEK supported media. Это отключит перемотку на всех мобильных интерфейсах отправителя и сенсорных экранах. Добавьте следующий код после определений переменных экземпляра SDK в receiver.js .

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Чтобы отключить голосовые команды поиска, работающие на основе голосового помощника, такие как «Окей, Google, перемотка назад на 60 секунд» , следует использовать перехватчик поиска. Этот перехватчик вызывается каждый раз, когда поступает запрос на поиск. Если команда поиска медиафайлов, поддерживаемая функцией SEEK, отключена, перехватчик отклонит запрос на поиск. Добавьте следующий фрагмент кода в файл receiver.js :

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

Сохраните файл receiver.js и запустите сессию Cast. После этого вы больше не сможете перематывать видео в прямом эфире.

8. Поздравляем!

Теперь вы знаете, как создать пользовательское приложение-приемник, используя последнюю версию SDK Cast Receiver.

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