1. Visão geral
Este codelab vai ensinar você a criar um app receptor da Web personalizado que usa a API Cast Live Breaks.
O que é o Google Cast?
O Google Cast permite que os usuários transmitam conteúdo de um dispositivo móvel para uma TV. O dispositivo poderá ser usado como controle remoto para a reprodução de mídia na TV.
O SDK do Google Cast amplia seu app para controlar uma TV ou um sistema de som. Com ele, você pode adicionar os componentes de IU 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ê vai ter criado um receptor do Cast que aproveita as APIs Live.
O que você vai aprender
- Como lidar com conteúdo de vídeo ao vivo no Google Cast.
- Como configurar os vários cenários de transmissão ao vivo compatíveis com o Google Cast.
- Como adicionar dados de programa à sua transmissão ao vivo
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 ou um Google Home Hub
Experiência
- É necessário ter conhecimento prévio em desenvolvimento da Web.
- Experiência anterior na criação de aplicativos de envio e recebimento do Google Cast.
Como você usará este tutorial?
Como você classificaria sua experiência com a criação de apps da Web?
2. Fazer o download do 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 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á tem um servidor compatível com HTTPS disponível, pule as instruções a seguir e anote o URL, porque ele será necessário 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 escolhido, acesse app-start e inicie o servidor.
Anote o URL do receptor hospedado. Ele será usado na próxima seção.
4. Registrar um aplicativo no Play Console do Google Cast
É necessário registrar seu aplicativo para poder executar um receptor personalizado nos dispositivos Chromecast, como o que criaremos neste codelab. Após o registro, você vai receber um ID de aplicativo que precisa ser usado pelo app remetente para realizar chamadas de API, como para inicializar um app receptor.
Clique em "Adicionar novo aplicativo".
Selecione "Custom Receiver", que é o que estamos criando.
Insira os detalhes do novo destinatário usando o URL que você acabou de receber
na ú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.
Leva de 5 a 15 minutos para que o receptor e o dispositivo estejam prontos para o teste. Após esse período, reinicie o dispositivo de transmissão.
5. Transmitir uma transmissão ao vivo simples
Antes de iniciar este codelab, é recomendável consultar o guia para desenvolvedores, que oferece uma visão geral das APIs em tempo real.
Para o remetente, usaremos o Cactool para iniciar uma sessão de transmissão. O receptor foi projetado para começar a reproduzir uma transmissão ao vivo automaticamente.
O receptor é composto por três arquivos. Um arquivo HTML básico chamado receiver.html, que contém a estrutura principal do app. Não é necessário modificar esse arquivo. Há também um arquivo chamado receiver.js, que contém toda a lógica do receptor. Por fim, há também um metadata_service.js que será usado mais tarde no codelab para simular a obtenção de dados do guia de programas.
Para começar, abra o Cactool no Chrome. Insira o ID do aplicativo do receptor que você recebeu no Play Console do SDK do Google Cast e clique em Definir.
O framework do aplicativo de transmissão do receptor da Web (CAF, na sigla em inglês) precisa ser instruído de que o conteúdo a ser reproduzido é uma transmissão ao vivo. Para fazer isso, modifique o aplicativo com a seguinte linha de código. Adicione-o ao corpo principal do interceptor de carregamento em receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Definir o tipo de stream como LIVE ativa a interface ao vivo do CAF. O SDK do Web Receiver vai pular automaticamente para o limite ao vivo da transmissão. Os dados do guia de programação ao vivo ainda não foram adicionados. Por isso, a barra de reprodução vai representar o comprimento total do intervalo de busca da transmissão.
Salve suas mudanças em receiver.js e inicie uma sessão de transmissão no Cactool clicando no botão Transmitir e selecionando um dispositivo de transmissão de destino. A transmissão ao vivo deve começar a ser reproduzida imediatamente.
6. Como adicionar dados do guia de programas
O suporte do CAF para conteúdo ao vivo agora inclui suporte para a exibição de dados do guia de programas em aplicativos de envio e de recebimento. Recomendamos que os provedores de conteúdo incluam metadados de programação nos aplicativos de recebimento para melhorar a experiência do usuário final, especialmente para transmissões ao vivo de longa duração, como canais de TV.
O CAF oferece suporte à configuração de metadados para vários programas em um único fluxo. Ao definir os carimbos de data/hora de início e as durações nos objetos MediaMetadata, o receptor atualiza automaticamente os metadados mostrados nos remetentes e a sobreposição com base na localização atual do player no stream. Confira abaixo um exemplo das APIs e do uso geral delas.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
Neste codelab, vamos usar um exemplo de serviço de metadados para fornecer os metadados da nossa transmissão ao vivo. Para criar uma lista de metadados do programa, crie um contêiner. O ContainerMetadata contém uma lista de objetos MediaMetadata para um único fluxo de mídia. Cada objeto MediaMetadata representa uma única seção no contêiner. Quando o indicador de reprodução está dentro dos limites de uma determinada seção, os metadados dela são copiados automaticamente para o status da mídia. Adicione o código abaixo ao arquivo receiver.js para fazer o download dos metadados de amostra do nosso serviço e fornecer o contêiner ao CAF.
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
Além disso, adicione uma chamada à função para carregar os dados do guia no interceptor de carregamento:
loadGuideData();
Salve o arquivo receiver.js e inicie uma sessão do Google Cast. O horário de início e de término e o título do programa vão aparecer na tela.
Uma nova mensagem de status de mídia é enviada do receptor para todos os remetentes quando o indicador de reprodução transita para uma nova seção no contêiner para que os aplicativos de envio possam atualizar a interface. Recomendamos que os aplicativos receptores atualizem os metadados do contêiner em um interceptador de status de mídia para continuar alimentando informações do programa aos aplicativos de envio. No nosso exemplo de serviço, retornamos os metadados do programa atual, bem como os metadados dos dois próximos programas. Para atualizar os metadados de uma transmissão, crie um novo contêiner e chame setContainerMetadata, como no exemplo anterior.
7. Como desativar a busca
A maioria dos streams de vídeo é composta por segmentos que contêm uma série de frames de vídeo. A menos que especificado de outra forma, a CAF permite que os usuários pesquisem nesses segmentos. O receptor da Web pode especificar isso chamando algumas APIs disponíveis.
No interceptador de carregamento, remova o comando de mídia compatível com SEEK. Isso desativa a busca em todas as interfaces de envio e de toque para dispositivos móveis. Adicione o seguinte código após as definições das variáveis de instância do SDK em receiver.js.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Para desativar comandos de busca por voz com o Google Assistente, como Ok Google, voltar 60 segundos, use o interceptor de busca. Esse interceptor é chamado toda vez que uma solicitação de busca é feita. Se o comando de mídia compatível com SEEK estiver desativado, o interceptor vai rejeitar a solicitação de busca. Adicione o seguinte snippet de código ao arquivo receiver.js:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
Salve o arquivo receiver.js e inicie uma sessão de transmissão. Não será mais possível buscar na transmissão ao vivo.
8. Parabéns
Agora você já sabe como criar um app receptor personalizado usando o SDK do receptor do Google Cast mais recente.
Para mais detalhes, consulte o guia do desenvolvedor sobre transmissão ao vivo.