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 o SDK do Cast, é possível adicionar os componentes de interface 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á criado um Cast Receiver que usa as APIs Live.
O que você vai aprender
- Como gerenciar conteúdo de vídeo ao vivo no Google Cast.
- Como configurar os diversos cenários de transmissão ao vivo compatíveis com o Google Cast.
- Como adicionar dados do 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 do remetente do Google Cast e aplicativos receptores.
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 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
É necessário registrar seu app para executar um receptor personalizado, conforme integrado 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 usando o URL que você acabou de receber
na ú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. Como transmitir uma transmissão ao vivo simples
Antes de iniciar este codelab, consulte o guia do desenvolvedor ativo, que fornece uma visão geral das APIs ativas.
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, também há um metadata_service.js que será usado posteriormente no codelab para simular o recebimento de dados do guia de programação.
Para começar, abra o Cactool no Chrome. Digite 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 linha de código a seguir. Adicione-o ao corpo principal do interceptador 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 receptor da Web vai automaticamente para a borda ao vivo do stream. Os dados do guia de programação ao vivo ainda não foram adicionados, por isso a barra de reprodução representará toda a extensão do intervalo pesquisável do stream.
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 começará a ser reproduzida imediatamente.
6. Adicionando dados do guia da programação
O suporte do CAF para conteúdo ao vivo agora inclui suporte à exibição de dados do guia do programa em aplicativos receptor e remetente. Recomendamos que os provedores de conteúdo incluam metadados de programação em seus aplicativos receptores para uma melhor experiência do usuário final, especialmente para transmissões ao vivo de longa duração, como canais de TV.
O CAF é compatível com a configuração de metadados de vários programas em um único stream. Ao definir os carimbos de data/hora e durações de início em objetos MediaMetadata, o receptor atualiza automaticamente os metadados mostrados nos remetentes e na sobreposição com base na localização atual do player no stream. Confira abaixo um exemplo das APIs e o 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, usaremos um serviço de metadados de exemplo para fornecer os metadados da nossa transmissão ao vivo. Para criar uma listagem dos metadados do programa, crie um container. O ContainerMetadata contém uma lista de objetos MediaMetadata para um único stream de mídia. Cada objeto MediaMetadata representa uma única seção no contêiner. Quando o marcador está dentro dos limites de uma determinada seção, os metadados são automaticamente copiados para o status da mídia. Adicione o código a seguir 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 interceptador de carregamento:
loadGuideData();
Salve o arquivo receiver.js e inicie uma sessão de transmissão. 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 destinatário para todos os remetentes quando o marcador faz a transição para uma nova seção no contêiner. Assim, os aplicativos do remetente podem atualizar a interface. É recomendável que os aplicativos receptores atualizem os metadados do contêiner em um interceptador de status de mídia para continuar fornecendo informações do programa aos aplicativos remetente. No nosso serviço de exemplo, retornamos os metadados atuais do programa, bem como os metadados dos dois programas seguintes. Para atualizar os metadados de um stream, crie um novo contêiner e chame setContainerMetadata, como no exemplo anterior.
7. 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, o CAF permitirá que os usuários busquem 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. Esta opção desativa a busca em todas as interfaces de toque e remetente de celular. Adicione o código abaixo 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 os comandos de busca por voz do assistente, como Ok Google, pule 60 segundos, use o interceptador de busca. Esse interceptador é chamado sempre que uma solicitação de busca é feita. Se o comando de mídia com suporte à busca estiver desativado, o interceptador 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 fazer buscas 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 de transmissão ao vivo.