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

1. Обзор

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

Что такое Google Cast?

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

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

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

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

Когда вы закончите эту лабораторную работу, вы создадите Cast Receiver, использующий преимущества новой функциональности Live.

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

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

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

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

Опыт

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

Возникли проблемы с сетью?

Если вы находитесь в месте, где сеть Wi-Fi ненадежна, устройство Chromecast можно подключить с помощью адаптера Ethernet для Chromecast или для Chromecast с Google TV .

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

Прочитайте только это Прочтите его и выполните упражнения

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

Новичок Средний Опытный

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

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

Скачать исходный код

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

Репозиторий codelab cast-videos-cast содержит два примера проектов:

• app-start — начальный код, который вы будете использовать в этой лаборатории кода.
• app-done — полный код готового примера видеоприложения.

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

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

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

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

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

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

4. Зарегистрируйте приложение в Cast Developer Console.

У вас нет учетной записи Cast Developer?

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

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

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

Выберите «Пользовательский приемник», это то, что мы создаем.

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

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

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

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

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

Подготовка приемника и устройства к тестированию займет 5-15 минут. Подождав 5-15 минут, вы должны перезагрузить устройство Cast.

5. Трансляция простой прямой трансляции

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

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

Приемник состоит из двух файлов. Базовый HTML-файл с именем receiver.html , который инициализирует контекст Cast, и заполнитель для медиаплеера Cast. Вам не нужно будет изменять этот файл. Также есть файл с именем receiver.js , который будет содержать всю нашу логику для приемника.

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

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

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

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

Сохраните изменения в receiver.js и инициируйте сеанс Cast в веб-отправителе , щелкнув правой кнопкой мыши в любом месте страницы и выбрав «Cast». Прямая трансляция должна начать воспроизводиться немедленно.

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

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

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

// 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;

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

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

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

Дополнительно добавим вызов функции загрузки данных направляющей в перехватчик загрузки:

loadGuideData();

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

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

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

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

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

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

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

/**
 * Seek 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.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // 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 seekData;
    }
);

Сохраните файл receiver.js и инициируйте сеанс Cast. Вы больше не сможете искать в прямом эфире.

8. Поздравления

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

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

Хотите больше актеров?

Взгляните на другие лаборатории кода Cast и наши примеры приложений на GitHub .