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

Отладка приложений Cast Receiver

1. Обзор

логотип Google Cast

В этом практическом занятии вы узнаете, как добавить компонент Cast Debug Logger в ваше существующее приложение Custom Web Receiver.

Что такое Google Cast?

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

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

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

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

Подробную информацию и дополнительные сведения см. в руководстве по Cast Debug Logger .

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

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

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

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

Опыт

У вас должен быть предыдущий опыт работы с Cast, и вы должны понимать, как работает Cast Web Receiver.
Вам потребуются предварительные знания в области веб-разработки.
Вам также понадобятся предварительные знания о просмотре телевизора :)

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

Прочитайте только от начала до конца.

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

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

Новичок

Средний

Профессионал

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

Новичок

Средний

Профессионал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Запустите демонстрационное приложение.

логотип Google Chrome

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

Откройте в браузере инструмент управления и контроля (CaC) .

Изображение вкладки «Управление подключением и регистрацией данных» инструмента управления и контроля (CaC).

Используйте идентификатор приемника CC1AD845 по умолчанию и нажмите кнопку SET APP ID .
Нажмите кнопку «Трансляция» в левом верхнем углу и выберите устройство, поддерживающее Google Cast.

Изображение вкладки «Управление подключением и регистрацией данных» инструмента управления и контроля (CaC), указывающее на подключение к приложению приемника.

Перейдите во вкладку LOAD MEDIA вверху страницы.

Изображение вкладки «Загрузка носителя» инструмента управления и контроля (CaC).

Измените тип запроса с помощью переключателя на LOAD .
Нажмите кнопку SEND REQUEST , чтобы посмотреть ознакомительное видео.
Видео начнет воспроизводиться на вашем устройстве с поддержкой Google Cast, демонстрируя основные функции приемника при использовании стандартного приемника.

6. Подготовьте стартовый проект.

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

Приложение отправителя работает на мобильном устройстве или ноутбуке.
Приложение- приемник работает на устройстве Google Cast или Android TV.

Теперь вы готовы продолжить работу над стартовым проектом, используя свой любимый текстовый редактор:

Выберите Каталог app-start из загруженного вами примера кода.
Откройте js/receiver.js и index.html

Обратите внимание, что во время выполнения этого практического задания http-server должен отслеживать внесенные вами изменения. Если этого не происходит, попробуйте остановить и перезапустить http-server .

Дизайн приложений

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

Приложение состоит из одного основного представления, определенного в index.html , и одного файла JavaScript под названием js/receiver.js , содержащего всю логику, необходимую для работы нашего приемника.

index.html

Этот HTML-файл содержит весь пользовательский интерфейс нашего приложения-приемника.

receiver.js

Этот скрипт управляет всей логикой нашего приложения-приемника.

Часто задаваемые вопросы

7. Интеграция с API CastDebugLogger

Cast Receiver SDK предоставляет разработчикам еще один способ упростить отладку приложения-приемника с помощью API CastDebugLogger .

Подробную информацию и дополнительные сведения см. в руководстве по Cast Debug Logger .

Инициализация

Вставьте следующий скрипт в тег <head> вашего приложения-приемника сразу после скрипта Web Receiver SDK в index.html :

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

В файле js/receiver.js в самом начале и ниже playerManager , получите экземпляр CastDebugLogger и включите логгер в обработчике события READY :

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

Когда включен отладочный логгер, на экране приемника отображается надпись DEBUG MODE Режим отладки).

Изображение воспроизводимого видео с сообщением «РЕЖИМ ОТЛАДКИ», отображаемым на красном фоне в верхнем левом углу кадра.

Запись событий игрока в журнал

Используя CastDebugLogger вы можете легко регистрировать события проигрывателя, генерируемые SDK Cast Web Receiver, и использовать разные уровни логирования для записи данных событий. Конфигурация loggerLevelByEvents принимает значения cast.framework.events.EventType и cast.framework.events.category для указания событий, которые необходимо регистрировать.

Добавьте следующий код ниже обработчика события READY , чтобы регистрировать события CORE проигрывателя или передачу изменения mediaStatus :

...

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};

Сообщения журнала и пользовательские теги

API CastDebugLogger позволяет создавать сообщения журнала, которые отображаются на отладочном экране приемника разными цветами. Используйте следующие методы логирования, перечисленные в порядке от наивысшего к наинизшему приоритету:

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

Для каждого метода логирования первым параметром должен быть пользовательский тег , а вторым — сообщение журнала . Тег может представлять собой любую строку, которую вы сочтете полезной.

Чтобы продемонстрировать работу логов, добавьте логи в ваш перехватчик LOAD .

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

Вы можете управлять тем, какие сообщения отображаются в отладочном окне, устанавливая уровень логирования в параметре loggerLevelByTags для каждого пользовательского тега. Например, включение пользовательского тега с уровнем логирования cast.framework.LoggerLevel.DEBUG отобразит все сообщения, добавленные с уровнями логирования error, warn, info и debug. Другой пример: включение пользовательского тега с уровнем WARNING отобразит только сообщения error и warn.

Параметр loggerLevelByTags является необязательным. Если для уровня логирования не указан пользовательский тег, все сообщения журнала будут отображаться в отладочном окне.

Добавьте следующий код ниже вызова функции loggerLevelByEvents :

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. Использование отладочного наложения

Отладочный логгер Cast Debug Logger предоставляет на приемнике отладочное наложение для отображения ваших пользовательских сообщений журнала. Используйте showDebugLogs для переключения отладочного наложения и clearDebugLogs для очистки сообщений журнала на наложении.

Добавьте следующее в обработчик события READY , чтобы просмотреть отладочное наложение на вашем приемнике:

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);

      // Show debug overlay.
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay.
      castDebugLogger.clearDebugLogs();
  }
});

Изображение, демонстрирующее отладочное наложение: список отладочных сообщений журнала на полупрозрачном фоне поверх видеокадра.

9. Использование инструмента управления и контроля (CaC).

Обзор

Инструмент управления и контроля (CaC) собирает ваши журналы и управляет отладочным наложением.

Существует два способа подключения приемника к инструменту CaC Tool:

Начать новое подключение Cast:

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

Присоединиться к существующей сессии Cast:

Получите идентификатор текущей сессии Cast, используя SDK приемника или SDK отправителя. На стороне приемника введите следующее, чтобы получить идентификатор сессии в консоли удаленного отладчика Chrome :

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Или же вы можете получить идентификатор сессии от подключенного веб-отправителя, используя следующий метод:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

Изображение вкладки «Управление подключением и регистрацией Cast» инструмента управления и контроля (CaC) для возобновления сессии.

Введите идентификатор сессии в инструменте CaC и нажмите кнопку RESUME .
Кнопка Cast должна быть подключена и начать отображать сообщения в журнале на устройстве.

Что стоит попробовать

Далее мы воспользуемся инструментом CaC, чтобы просмотреть журналы работы вашего тестового приемника.

Откройте инструмент CaC .

Изображение вкладки «Управление подключением и регистрацией данных» инструмента управления и контроля (CaC).

Введите идентификатор приложения-приемника для вашего тестового приложения и нажмите кнопку SET APP ID .
Нажмите кнопку Cast в левом верхнем углу и выберите устройство с поддержкой Google Cast, чтобы открыть ресивер.

Перейдите во вкладку LOAD MEDIA вверху страницы.

Изображение вкладки «Загрузка носителя» инструмента управления и контроля (CaC).

Измените тип запроса с помощью переключателя на LOAD .
Нажмите кнопку SEND REQUEST , чтобы посмотреть ознакомительное видео.

Изображение вкладки «Управление подключением и регистрацией Cast» инструмента управления и контроля (CaC) с сообщениями журнала, заполняющими нижнюю панель.

На вашем устройстве должно начать воспроизводиться тестовое видео. В нижней части приложения во вкладке «Сообщения журнала» должны начать отображаться записи из предыдущих шагов.

Попробуйте изучить следующие функции для анализа журналов и управления приемником:

Чтобы просмотреть информацию о СМИ и их статусе, нажмите вкладку MEDIA INFO или MEDIA STATUS .
Нажмите кнопку SHOW OVERLAY , чтобы увидеть отладочное наложение на приемнике.
Используйте кнопку CLEAR CACHE AND STOP , чтобы перезагрузить приложение приемника и возобновить трансляцию.

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

Теперь вы знаете, как добавить отладочный логгер Cast в ваше приложение Web Receiver с поддержкой Cast, используя последнюю версию SDK Cast Receiver.

Для получения более подробной информации см. руководства разработчика Cast Debug Logger и Command and Control (CaC) Tool .

Отладка приложений Cast Receiver Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

1. Обзор

Что такое Google Cast?

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

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

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

Опыт

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

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

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

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

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

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

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

5. Запустите демонстрационное приложение.

6. Подготовьте стартовый проект.

Дизайн приложений

index.html

receiver.js

Часто задаваемые вопросы

7. Интеграция с API CastDebugLogger

Инициализация

Запись событий игрока в журнал

Сообщения журнала и пользовательские теги

8. Использование отладочного наложения

9. Использование инструмента управления и контроля (CaC).

Обзор

Что стоит попробовать

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

Отладка приложений Cast Receiver