1. Обзор
Эта лабораторная работа научит вас, как добавить Cast Debug Logger в существующее приложение Custom Web Receiver.
Что такое Google Cast?
Google Cast SDK позволяет вашему приложению воспроизводить контент и управлять воспроизведением на устройствах с поддержкой Google Cast. Он предоставляет вам необходимые компоненты пользовательского интерфейса на основе контрольного списка Google Cast Design .
Контрольный список Google Cast Design предназначен для того, чтобы сделать работу с Cast простой и предсказуемой на всех поддерживаемых платформах.
Что мы будем строить?
Когда вы завершите эту лабораторную работу, у вас будет собственный веб-приемник , интегрированный с Cast Debug Logger.
Дополнительные сведения см. в руководстве Cast Debug Logger .
Что вы узнаете
- Как настроить среду для разработки Web Receiver.
- Как интегрировать 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 Developer Console.
Вы должны зарегистрировать свое приложение , чтобы иметь возможность запускать собственный веб-приемник, созданный в этой лаборатории кода, на устройствах Chromecast. После регистрации приложения вы получите идентификатор приложения, который ваше приложение-отправитель должно использовать для выполнения вызовов API, например для запуска приложения-получателя.
Нажмите «Добавить новое приложение»
Выберите «Пользовательский приемник», это то, что мы создаем.
Введите данные вашего нового приемника, обязательно используйте URL-адрес из последнего раздела. Запишите идентификатор приложения , присвоенный вашему новому приемнику.
Вы также должны зарегистрировать свое устройство Google Cast , чтобы оно могло получить доступ к вашему приложению-приемнику, прежде чем вы его опубликуете. Как только вы опубликуете свое приложение-приемник, оно будет доступно для всех устройств Google Cast. Для целей этой кодовой лаборатории рекомендуется работать с неопубликованным приложением-приемником.
Нажмите «Добавить новое устройство».
Введите серийный номер, напечатанный на задней панели вашего устройства Cast, и дайте ему описательное имя. Вы также можете найти свой серийный номер, транслируя свой экран в Chrome при доступе к консоли разработчика Google Cast SDK.
Подготовка приемника и устройства к тестированию займет 5-15 минут. Подождав 5-15 минут, вы должны перезагрузить устройство Cast.
5. Запустите пример приложения
Пока мы ждем, пока наш новый Web Receiver будет готов к тестированию, давайте посмотрим, как выглядит образец завершенного приложения Web Receiver. Ресивер, который мы собираемся построить, будет способен воспроизводить мультимедиа с использованием потоковой передачи с адаптивным битрейтом.
- В браузере откройте инструмент управления и контроля (CaC) .
- Используйте идентификатор приемника
CC1AD845по умолчанию и нажмите кнопкуSET APP ID. - Нажмите кнопку Cast в левом верхнем углу и выберите свое устройство с поддержкой Google Cast.
- Перейдите на вкладку
LOAD MEDIAвверху.
- Измените переключатель типа запроса на
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 и будет находиться в режиме ожидания, пока не поступит запрос LOAD (например, команда на воспроизведение фрагмента мультимедиа) от отправителя.
Приложение состоит из одного основного представления, определенного в index.html , и одного файла JavaScript с именем js/receiver.js , содержащего всю логику для работы нашего приемника.
index.html
Этот html-файл содержит весь пользовательский интерфейс для нашего приложения-приемника.
приемник.js
Этот скрипт управляет всей логикой нашего приложения-приемника.
Часто задаваемые вопросы
7. Интеграция с CastDebugLogger API
Cast Receiver SDK предоставляет разработчикам еще один вариант простой отладки приложения-приемника с помощью CastDebugLogger API .
Дополнительные сведения см. в руководстве 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
};
Сообщения журнала и пользовательские теги
CastDebugLogger API позволяет создавать сообщения журнала, которые отображаются в наложении отладки приемника разными цветами. Используйте следующие методы ведения журнала, перечисленные в порядке от самого высокого до самого низкого приоритета:
-
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 будет отображать все сообщения, добавленные с ошибками, предупреждениями, информацией и сообщениями журнала отладки. Другим примером является то, что включение пользовательского тега с уровнем WARNING будет отображать только сообщения об ошибках и предупреждениях.
Конфигурация 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)
Обзор
Инструмент Command and Control (CaC) записывает ваши журналы и управляет наложением отладки.
Существует два способа подключения приемника к CaC Tool:
Запустите новое соединение Cast:
- Откройте CaC Tool, установите идентификатор приложения получателя и нажмите кнопку Cast, чтобы выполнить трансляцию на получатель.
- Транслируйте отдельное приложение- отправитель на то же устройство с тем же идентификатором приложения-получателя.
- Загрузите медиафайл из приложения-отправителя, и в инструменте появятся сообщения журнала.
Присоединитесь к существующему сеансу Cast:
- Получите идентификатор запущенного сеанса Cast с помощью SDK получателя или SDK отправителя. Со стороны получателя введите следующее, чтобы получить идентификатор сеанса в консоли удаленного отладчика Chrome :
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
Или вы можете получить идентификатор сеанса от подключенного веб-отправителя, используя следующий метод:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- Введите идентификатор сеанса в CaC Tool и нажмите кнопку
RESUME. - Кнопка Cast должна быть подключена и начать показывать сообщения журнала в инструменте.
Что попробовать
Далее мы воспользуемся CaC Tool для просмотра журналов на вашем пробном приемнике.
- Откройте инструмент CaC .
- Введите идентификатор приложения-получателя вашего примера приложения и нажмите кнопку
SET APP ID. - Нажмите кнопку Cast в левом верхнем углу и выберите свое устройство с поддержкой Google Cast, чтобы открыть приемник.
- Перейдите на вкладку
LOAD MEDIAвверху.
- Измените переключатель типа запроса на
LOAD. - Нажмите кнопку
SEND REQUEST, чтобы воспроизвести образец видео.
- Образец видео теперь должен воспроизводиться на вашем устройстве. Вы должны начать видеть, что ваши журналы с предыдущих шагов начинают отображаться на вкладке «Сообщения журнала» в нижней части инструмента.
Попробуйте изучить следующие функции для изучения журналов и управления приемником:
- Щелкните вкладку
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) .