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 o Google Cast. Ele fornece os componentes de interface necessários de acordo com a Checklist 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 Registro de depuração do Cast.

Consulte o guia do Cast Debug Logger para mais detalhes e informações.

O que você vai aprender

• Como configurar seu ambiente para o desenvolvimento do Web Receiver.
• 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

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

Problemas com a rede?

Se você está em um local em que a rede Wi-Fi não é confiável, o dispositivo Chromecast pode ser conectado por fio usando um adaptador Ethernet para Chromecast ou 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á como base neste codelab.
• app-done: o código completo do app de vídeo de amostra finalizado.

3. Implantar o receptor localmente

Para usar o receptor da Web com um dispositivo de transmissão, ele precisa estar hospedado em algum lugar que o dispositivo possa acessar. 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, use 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 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 receptor usando o URL da última seção. Anote o ID do aplicativo atribuído ao novo receptor.

Você também precisa registrar seu dispositivo com Google Cast para que ele possa acessar o aplicativo receptor antes de você publicá-lo. Após a publicação, o aplicativo 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 para ele. Também é possível encontrar o número de série pela transmissão de tela no 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 vamos criar será capaz de reproduzir mídia por streaming com taxa de bits adaptável.

1. No navegador, abra a ferramenta de comando e controle (CaC).

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 o dispositivo com Google Cast.

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

5. Mude o botão de opção do tipo de solicitação para LOAD.
6. Clique no botão SEND REQUEST para assistir um vídeo de exemplo.
7. O vídeo será aberto no dispositivo com Google Cast para mostrar qual é 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. Aqui está parte da terminologia do Google Cast que será usada neste codelab:

• Um app remetente é executado em um dispositivo móvel ou laptop.
• Um app receptor é executado no dispositivo 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.

Enquanto você trabalha neste codelab, o http-server precisa detectar as mudanças feitas. Se não funcionar, tente interromper e reiniciar o http-server.

Design de apps

O app receptor inicializa a sessão de transmissão e fica em espera até receber uma solicitação LOAD de um remetente, como o comando para iniciar uma mídia.

O app consiste em uma visualização principal, definida em index.html, e um arquivo JavaScript chamado js/receiver.js, contendo toda a lógica necessária para fazer nosso receptor funcionar.

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 do Cast Debug Logger 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 do 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>

No js/receiver.js, na parte de cima do arquivo e abaixo do playerManager, extraia a instância da CastDebugLogger e ative o agente de registro 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 agente de registro de depuração está ativado, uma sobreposição de DEBUG MODE aparece no receptor.

Registrar eventos do player

Com a CastDebugLogger, é possível registrar facilmente os eventos do player que são acionados pelo SDK do receptor da Web do Cast e usar diferentes níveis do agente para registrar os dados do evento. A configuração loggerLevelByEvents usa cast.framework.events.EventType e cast.framework.events.category para especificar os eventos a serem registrados.

Adicione o seguinte abaixo do listener de eventos READY para registrar quando os eventos CORE do player forem acionados ou uma mudança de mediaStatus for 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, uma 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;
  }
);

Você pode 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 for configurada para o nível do agente de registro, todas as mensagens de registro serão exibidas na sobreposição de depuração.

Adicione o seguinte abaixo da chamada 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 CastDebugLogger fornece uma sobreposição de depuração no receptor para mostrar as 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 de comando e controle (CaC) captura seus registros e controla a sobreposição de depuração.

Há duas maneiras de conectar o receptor à ferramenta:

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 para o receptor.
2. Transmita um app remetente separado para o mesmo dispositivo com o mesmo ID do app do 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:

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

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

Ou você pode receber 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 de CaC e clique no botão RESUME.
3. O botão "Transmitir" vai ser conectado e começar a mostrar mensagens de registro na ferramenta.

Coisas para tentar

Em seguida, vamos usar a ferramenta CaC para conferir os registros no receptor de exemplo.

1. Abra a ferramenta CaC.

2. Insira 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 o dispositivo com Google Cast para abrir o receptor.

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

5. Mude o botão de opção do 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 exemplo vai ser reproduzido no seu dispositivo. Os registros das etapas anteriores vão começar a aparecer na guia "Mensagens de registro" na parte de baixo da ferramenta.

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

• Clique na guia MEDIA INFO ou MEDIA STATUS para conferir as informações e o status da mídia.
• Clique no botão SHOW OVERLAY para ver 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ê já 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 mais detalhes, consulte os guias para desenvolvedores Cast Debug Logger e Ferramenta de comando e controle (CaC).

Quer mais conteúdo do Google Cast?

Confira outros codelabs do Cast e nossos apps de exemplo no GitHub.