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

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 .

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

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

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

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

Опыт

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

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

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

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

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

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

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

Как бы вы оценили свои впечатления от просмотра телевидения?

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

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

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

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

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

Репозиторий кодовой лаборатории Cast Debug Logger содержит два примера проекта:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Используйте идентификатор приемника CC1AD845 по умолчанию и нажмите кнопку SET APP ID .
3. Нажмите кнопку Cast в левом верхнем углу и выберите свое устройство с поддержкой Google Cast.

4. Перейдите на вкладку LOAD MEDIA вверху.

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

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

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

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

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

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

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

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

Приложение-получатель инициализирует сеанс Cast и будет находиться в режиме ожидания до тех пор, пока не поступит запрос ЗАГРУЗКИ (например, команда на воспроизведение фрагмента мультимедиа) от отправителя.

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

index.html

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

приемник.js

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

В ролях документация?

У нас есть обширная документация для получателей, отправителей iOS, Android и Chrome.

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

• Что такое Google Cast?
• Как мне стать разработчиком Google Cast?

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

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

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

★ Примечание:

Чтобы использовать API CastDebugLogger , необходимо зарегистрировать устройство Cast в консоли разработчика Google Cast SDK и использовать прошивку устройства версии 1.44 или выше.

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

Включите следующий скрипт в тег <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);
  }
});

Предупреждение. Обязательно измените setEnabled на false для производственного приемника.

Когда журнал отладки включен, на приемнике отображается надпись 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 будет отображать все сообщения, добавленные с сообщениями об ошибках, предупреждениями, информацией и отладкой. Другой пример: включение пользовательского тега с уровнем 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)

Обзор

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

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

Запустите новое соединение Cast:

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

Присоединитесь к существующему сеансу трансляции:

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

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

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

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

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

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

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

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

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

4. Перейдите на вкладку LOAD MEDIA вверху.

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

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

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

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

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

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

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

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

Ознакомьтесь с другими лабораториями по написанию кода Cast и нашими примерами приложений на GitHub .