Como depurar apps receptores de transmissão

1. Visão geral

Este codelab ensinará você a adicionar o logger de depuração do Cast ao seu app de receptor da Web personalizado já existente.

O que é o Google Cast?

O SDK do Google Cast permite que seu app reproduza conteúdo e controle a reprodução em dispositivos compatíveis com Google Cast. Ele fornece os componentes de IU necessários de acordo com a Lista de verificação de design do Google Cast.

Essa lista é fornecida para facilitar a experiência do usuário do Google Cast e deixá-la mais previsível em todas as plataformas compatíveis.

O que vamos criar?

Ao concluir este codelab, você terá um Receptor da Web personalizado integrado ao logger de depuração do Cast.

Consulte o guia sobre o registrador de depuração do Cast para mais detalhes e informações.

O que você vai aprender

• Como configurar seu ambiente para desenvolvimento de receptores da Web.
• Como integrar o Debug Logger ao seu Cast Receiver.

O que é necessário

• A versão mais recente do navegador Google Chrome.
• Serviço de hospedagem HTTPS, como o Firebase Hosting ou o ngrok.
• Um dispositivo com Google Cast, como um Chromecast ou Android TV, configurado com acesso à Internet.
• Uma TV ou um monitor com entrada HDMI.

Experiência

• Ter experiência anterior com o Google Cast e entender como funciona um receptor da Web do Google Cast.
• É necessário ter conhecimento prévio em desenvolvimento da Web.
• Também é necessário ter conhecimento prévio de como assistir TV :)

Problemas com a rede?

Se você estiver em um local em que a rede Wi-Fi não seja confiável, é possível conectar o dispositivo Chromecast usando um adaptador Ethernet para o Chromecast ou para o Chromecast com Google TV.

Como você usará este tutorial?

Apenas leitura Leitura e exercícios

Como você classificaria sua experiência com a criação de apps da Web?

Iniciante Intermediário Proficiente

Como você classificaria sua experiência com o ato de assistir TV?

Iniciante Intermediário Proficiente

2. Fazer o download do exemplo de código

Você pode fazer download de todo o exemplo de código para seu computador…

Fazer o download do código-fonte

e descompactar o arquivo ZIP salvo.

O repositório do codelab do Cast Debug Logger contém dois projetos de exemplo:

• app-start: o código inicial que você usará neste codelab.
• app-done: o código completo do app de vídeo de amostra finalizado.

3. Como implantar o receptor localmente

Para usar seu receptor da Web com um dispositivo de transmissão, ele precisa estar hospedado em um lugar onde o dispositivo de transmissão possa acessá-lo. Se você já tiver um servidor disponível compatível com https, ignore as instruções a seguir e anote o URL, porque você precisará dele na próxima seção.

Se você não tiver um servidor disponível, poderá usar o Firebase Hosting ou o ngrok.

Executar o servidor

Depois de configurar o serviço de sua preferência, navegue até app-start e inicie seu servidor.

Anote o URL do seu receptor hospedado. Você vai usá-lo na próxima seção.

4. Registrar um aplicativo no Play Console do Google Cast

Não tem uma conta de desenvolvedor do Google Cast?

Inscreva-se em uma conta no Play Console do SDK do Google Cast e pague a taxa de registro.

Você precisa registrar seu aplicativo para poder executar um receptor da Web personalizado, conforme criado neste codelab, em dispositivos Chromecast. Depois de registrar seu aplicativo, você receberá um ID de aplicativo que o aplicativo remetente deve usar para realizar chamadas de API, por exemplo, para iniciar um aplicativo receptor.

Clique em "Adicionar novo aplicativo"

Selecione "Custom Receiver", que é o que estamos criando.

Insira os detalhes do novo destinatário e use o URL da última seção. Anote o ID do aplicativo atribuído ao novo destinatário.

Também é necessário registrar seu dispositivo com Google Cast para que ele possa acessar o aplicativo receptor antes da publicação. Após a publicação do app receptor, ele vai ficar disponível para todos os dispositivos com Google Cast. Para os fins deste codelab, é recomendável trabalhar com um aplicativo receptor não publicado.

Clique em "Adicionar novo dispositivo"

Insira o número de série impresso na parte de trás do seu dispositivo de transmissão e dê um nome descritivo a ele. Também é possível encontrar o número de série ao transmitir a tela do Chrome ao acessar o Play Console do SDK do Google Cast.

Levará de 5 a 15 minutos para o receptor e o dispositivo ficarem prontos para o teste. Após esse período, reinicie o dispositivo de transmissão.

5. Executar o app de amostra

Enquanto aguardamos o novo Web Receiver ficar pronto para testes, vamos conferir um exemplo de app concluído. O receptor que criaremos será capaz de reproduzir mídia usando streaming de taxa de bits adaptável.

1. No navegador, abra a ferramenta CaC (link em inglês).

2. Use o ID do receptor CC1AD845 padrão e clique no botão SET APP ID.
3. Clique no botão "Transmitir" no canto superior esquerdo e selecione seu dispositivo compatível com Google Cast.

4. Navegue até a guia LOAD MEDIA na parte de cima.

5. Altere o botão de opção de tipo de solicitação para LOAD.
6. Clique no botão SEND REQUEST para reproduzir um vídeo de amostra.
7. O vídeo será reproduzido no seu dispositivo compatível com Google Cast para mostrar a aparência da funcionalidade básica usando o receptor padrão.

6. Preparar o projeto inicial

Precisamos adicionar compatibilidade com o Google Cast ao app inicial que você transferiu por download. Veja alguns termos do Google Cast que usaremos neste codelab:

• Um app remetente é executado em um dispositivo móvel ou laptop.
• Um app receptor é executado no dispositivo com Google Cast ou Android TV.

Agora está tudo pronto para você começar a criar com base no projeto inicial usando seu editor de texto favorito:

1. Selecione o diretório app-start no download do exemplo de código.
2. Abra js/receiver.js e index.html.

Durante este codelab, o http-server precisa detectar as mudanças feitas. Se isso não acontecer, tente parar e reiniciar o http-server.

Design do app

O app receptor inicializa a sessão do Google Cast e fica em espera até que uma solicitação LOAD (como o comando para abrir uma mídia) de um remetente chegue.

O app consiste em uma visualização principal, definida em index.html, e um arquivo JavaScript chamado js/receiver.js, que contém toda a lógica necessária para que o receptor funcione.

index.html

Esse arquivo HTML contém toda a interface do app receptor.

receiver.js

Esse script gerencia toda a lógica do app receptor.

E quanto à documentação do Google Cast?

Temos uma documentação extensa para remetentes de receptores, iOS, Android e Chrome.

Perguntas frequentes

• O que é o Google Cast?
• Como posso me tornar um desenvolvedor do Google Cast?

7. Integrar com a API CastDebugLogger

O SDK do receptor do Cast oferece outra opção para que os desenvolvedores depurem facilmente seu app receptor usando a API CastDebugLogger.

Consulte o guia sobre o registrador de depuração do Cast para mais detalhes e informações.

★ Observação:

Para usar a API CastDebugLogger, é preciso registrar seu dispositivo de transmissão no Play Console do SDK do Google Cast e usar a versão 1.44 ou mais recente de firmware do dispositivo.

Inicialização

Inclua o script a seguir na tag <head> do app receptor logo após o script do SDK do receptor da Web em 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>

Em js/receiver.js, na parte de cima do arquivo e abaixo de playerManager, acesse a instância CastDebugLogger e ative o logger em um listener de eventos 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);
  }
});

Aviso: mude setEnabled como falso para um receptor de produção.

Quando o logger de depuração está ativado, uma sobreposição de DEBUG MODE é exibida no receptor.

Registrar eventos do player

Com o CastDebugLogger, você pode registrar facilmente os eventos do player que são disparados pelo SDK do receptor da Web do Google Cast e usar diferentes níveis de logger para registrar os dados de eventos. A configuração loggerLevelByEvents usa cast.framework.events.EventType e cast.framework.events.category para especificar os eventos que serão registrados.

Adicione o seguinte código abaixo do listener de eventos READY para registrar quando os eventos CORE do player são acionados ou uma mudança de mediaStatus é transmitida:

...

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

Mensagens de registro e tags personalizadas

A API CastDebugLogger permite criar mensagens de registro que aparecem na sobreposição de depuração do receptor com cores diferentes. Use os seguintes métodos de registro, listados em ordem decrescente de prioridade:

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

Para cada método de registro, o primeiro parâmetro precisa ser uma tag personalizada e o segundo é a mensagem de registro. A tag pode ser qualquer string que você ache útil.

Para mostrar os registros em ação, adicione-os ao interceptador 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;
  }
);

É possível controlar quais mensagens aparecem na sobreposição de depuração definindo o nível de registro em loggerLevelByTags para cada tag personalizada. Por exemplo, ativar uma tag personalizada com o nível de registro cast.framework.LoggerLevel.DEBUG mostraria todas as mensagens adicionadas com erro, aviso, informações e mensagens de registro de depuração. Outro exemplo é que ativar uma tag personalizada com o nível WARNING exibiria apenas mensagens de registro de erro e de aviso.

A configuração loggerLevelByTags é opcional. Se uma tag personalizada não estiver configurada para o nível de logger, todas as mensagens de registro serão exibidas na sobreposição de depuração.

Adicione o código abaixo à chamada de loggerLevelByEvents:

...

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

...

8. Como usar a sobreposição de depuração

O logger de depuração do Cast fornece uma sobreposição de depuração no receptor para mostrar suas mensagens de registro personalizadas. Use showDebugLogs para alternar a sobreposição de depuração e clearDebugLogs para limpar as mensagens de registro nela.

Adicione o seguinte ao listener de eventos READY para visualizar a sobreposição de depuração no receptor:

// 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. Como usar a ferramenta de Comando e Controle (CaC)

Visão geral

A ferramenta CaC (link em inglês) captura os registros e controla a sobreposição de depuração.

Há duas maneiras de conectar o receptor à ferramenta CaC:

Inicie uma nova conexão do Google Cast:

1. Abra a ferramenta CaC, defina o ID do app receptor e clique no botão "Transmitir" para transmitir.
2. Transmita um app remetente separado para o mesmo dispositivo com o mesmo ID do app receptor.
3. Carregue mídia do app remetente e as mensagens de registro vão aparecer na ferramenta.

Participar de uma sessão do Google Cast existente:

1. Consiga o ID da sessão do Google Cast em execução usando o SDK do receptor ou do remetente. No lado do destinatário, digite o seguinte para acessar o ID da sessão no console do Chrome Remote Debugger:

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

Ou você pode obter o ID da sessão de um remetente da Web conectado, use o seguinte método:

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

2. Insira o ID da sessão na ferramenta CaC e clique no botão RESUME.
3. O botão Transmitir será conectado e começará a mostrar mensagens de registro na ferramenta.

O que você pode tentar fazer

Em seguida, usaremos a ferramenta CaC para ver os registros no receptor de amostra.

1. Abra a ferramenta CaC.

2. Digite o ID do app receptor do seu app de exemplo e clique no botão SET APP ID.
3. Clique no botão "Transmitir" no canto superior esquerdo e selecione seu dispositivo compatível com Google Cast para abrir o receptor.

4. Navegue até a guia LOAD MEDIA na parte de cima.

5. Altere o botão de opção de tipo de solicitação para LOAD.
6. Clique no botão SEND REQUEST para reproduzir um vídeo de amostra.

7. Um vídeo de amostra será reproduzido em seu dispositivo. Os registros das etapas anteriores vão começar a aparecer na seção "Mensagens de registro" na parte inferior da ferramenta.

Tente usar os seguintes recursos para investigar registros e controlar o receptor:

• Clique na guia MEDIA INFO ou MEDIA STATUS para ver as informações e o status da mídia.
• Clique no botão SHOW OVERLAY para conferir uma sobreposição de depuração no receptor.
• Use o botão CLEAR CACHE AND STOP para recarregar o app receptor e transmitir novamente.

10. Parabéns

Agora você sabe como adicionar o registrador de depuração do Cast ao seu app receptor da Web compatível com Cast usando o SDK mais recente do receptor do Google Cast.

Para ver mais detalhes, consulte os guias para desenvolvedores Cast Debug Logger e Command and Control (CaC).

Quer mais conteúdo do Google Cast?

Confira os outros codelabs do Google Cast e nossos apps de exemplo no GitHub (links em inglês).