Como depurar apps receptores de transmissão

1. Informações gerais

Este codelab ensinará você a adicionar o Cast Debug Logger ao seu app de receptor da Web personalizado.

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. Ela fornece os componentes de IU necessários com base na 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 Registrador de depuração do Cast.

Consulte o guia da API Cast Debug Logger para ver mais detalhes e mais informações.

Conteúdo

• Como configurar seu ambiente para desenvolvimento de receptor da Web.
• Como integrar o Debug Logger ao receptor do Google Cast.

Pré-requisitos

• 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 de transmissão
• Você precisa 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, o dispositivo Chromecast pode ser conectado com fio usando um adaptador Ethernet para o Chromecast ou 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. Acessar o exemplo de código

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

Fazer o download da origem

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 será usado como base 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 alcançá-lo. Se você já tem um servidor compatível com HTTPS disponível, pule 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, acesse app-start e inicie o servidor.

Anote o URL do seu receptor hospedado. Ele será usado na próxima seção.

4. Registrar um aplicativo no Console para desenvolvedores 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 executar um receptor da Web personalizado, conforme criado neste codelab, em dispositivos Chromecast. Depois de registrar seu aplicativo, você receberá um ID que o aplicativo remetente deve usar para realizar chamadas de API, como iniciar um aplicativo receptor.

Clique em "Adicionar novo aplicativo"

Selecione "Custom Receiver". É isso 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. Assim que você publicar o aplicativo receptor, ele 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. Você também pode encontrar o número de série transmitindo a tela no Chrome ao acessar o Console para desenvolvedores do SDK do Google Cast.

O receptor e o dispositivo vão levar de 5 a 15 minutos para 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 receptor da Web ficar pronto para os testes, vamos ver um exemplo de app receptor completo. 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.

2. Use o ID de 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. 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. O vídeo será reproduzido no dispositivo compatível com Google Cast para mostrar a aparência da funcionalidade básica do receptor 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 a terminologia 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 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 detecta as mudanças feitas. Caso contrário, tente parar e reiniciar o http-server.

Design de apps

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

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 para fazer o receptor funcionar.

index.html

Esse arquivo html contém toda a interface do nosso 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 abrangente para remetentes de destinatários, 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 Cast Receiver oferece outra opção para que os desenvolvedores depurem facilmente seu app receptor usando a API CastDebugLogger.

Consulte o guia da API Cast Debug Logger para ver mais detalhes e mais 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 uma versão de firmware do dispositivo 1.44 ou mais recente.

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 do 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: defina 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, é fácil registrar eventos do player que são disparados pelo SDK do receptor da Web do Google Cast e usar diferentes níveis do logger para registrar os dados do evento. 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 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 é a mensagem de registro. A tag pode ser qualquer string que você ache útil.

Para mostrar os registros em ação, adicione registros ao seu 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 a ativação de uma tag personalizada com o nível WARNING só mostraria 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 do logger, todas as mensagens de registro serão mostradas na sobreposição de depuração.

Adicione o código 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 Cast Debug Logger oferece 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 Command and Control (CaC)

Informações gerais

A ferramenta CaC (Command and Control) 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 de transmissão:

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 receptor.
3. Carregar mídia do app remetente, e as mensagens de registro vão aparecer na ferramenta.

Participe de uma sessão de transmissão existente:

1. Receba o ID da sessão de transmissão em execução usando o SDK do receptor ou o SDK do remetente. No lado do receptor, digite o código a seguir para acessar o ID da sessão no console do depurador remoto do Chrome:

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

Também é possível saber o ID da sessão de um remetente da Web conectado usando 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 seu 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 estar em reprodução no dispositivo. Os registros das etapas anteriores vão começar a aparecer na guia "Mensagens de registro" na parte de baixo da ferramenta.

Use os seguintes recursos para investigar os 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 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 Cast Debug Logger ao seu app receptor da Web compatível com Cast usando o mais recente SDK do receptor do Google Cast.

Para ver mais detalhes, consulte os guias para desenvolvedores nos guias para desenvolvedores Cast Debug Logger e Ferramenta de comando e controle (CaC).

Quer mais do Google Cast?

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