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 :)
Como você usará este tutorial?
Como você classificaria sua experiência com a criação de apps da Web?
Como você classificaria sua experiência com o ato de assistir TV?
2. Acessar o exemplo de código
Você pode fazer download de todo o exemplo de código para seu computador…
e descompactar o arquivo ZIP salvo.
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
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.
- No navegador, abra a ferramenta CaC.
- Use o ID de receptor
CC1AD845
padrão e clique no botãoSET APP ID
. - Clique no botão "Transmitir" no canto superior esquerdo e selecione seu dispositivo compatível com Google Cast.
- Navegue até a guia
LOAD MEDIA
na parte de cima.
- Mude o botão de opção do tipo de solicitação para
LOAD
. - Clique no botão
SEND REQUEST
para reproduzir um vídeo de amostra. - 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:
- Selecione o diretório
app-start
no download do exemplo de código. - Abra
js/receiver.js
eindex.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.
Perguntas frequentes
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.
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);
}
});
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:
- Abra a ferramenta CaC, defina o ID do app receptor e clique no botão Transmitir para transmitir para o receptor.
- Transmita um app remetente separado para o mesmo dispositivo com o mesmo ID do app receptor.
- 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:
- 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();
- Insira o ID da sessão na ferramenta CaC e clique no botão
RESUME
. - 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.
- Abra a ferramenta CaC.
- Digite o ID do app receptor do seu app de exemplo e clique no botão
SET APP ID
. - Clique no botão "Transmitir" no canto superior esquerdo e selecione seu dispositivo compatível com Google Cast para abrir seu receptor.
- Navegue até a guia
LOAD MEDIA
na parte de cima.
- Mude o botão de opção do tipo de solicitação para
LOAD
. - Clique no botão
SEND REQUEST
para reproduzir um vídeo de amostra.
- 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
ouMEDIA 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).