1. Visão geral
Este codelab vai ensinar você a criar um app Custom Web Receiver 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 UI 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á criado um receptor do Cast que aproveita as APIs Live.
O que você vai aprender
- Como processar conteúdo de vídeo ao vivo no Cast.
- Como configurar os vários cenários de transmissão ao vivo compatíveis com o Google Cast.
- Como adicionar dados de programação à 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 de transmissão, 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
- Você precisa ter conhecimento prévio em desenvolvimento para a Web.
- Experiência anterior na criação de aplicativos remetentes e receptores do Cast.
Como você usará este tutorial?
Como você classificaria sua experiência com a criação de apps da Web?
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. Implantar o receptor localmente
Para poder usar seu 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 para uso, use o Firebase Hosting ou o ngrok.
Executar o servidor
Depois de configurar o serviço escolhido, navegue até app-start e inicie o 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 aplicativo para poder executar um receptor personalizado nos dispositivos Chromecast, como o que criaremos neste codelab. Depois de registrar o aplicativo, você vai receber um ID do aplicativo que precisa ser usado pelo app remetente para fazer chamadas de API, como para iniciar um app receptor.
Clique em "Adicionar novo aplicativo".
Selecione "Custom Receiver", que é o que estamos criando.
Insira os detalhes do novo receptor usando o URL recebido
na última seção. Anote o ID do aplicativo atribuído ao seu novo receptor.
Você também precisa registrar seu dispositivo de transmissão 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 "Add new Device".
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 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 live simples
Antes de começar este codelab, pode ser útil consultar o guia para desenvolvedores de transmissões ao vivo, que oferece uma visão geral das APIs Live.
Para o remetente, vamos usar a Cactool para iniciar uma sessão do Cast. O receptor foi projetado para iniciar automaticamente a reprodução de uma transmissão ao vivo.
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 da programação.
Para começar, abra a Cactool no Chrome. Insira o ID do aplicativo receptor fornecido no Play Console do SDK do Cast e clique em Definir.
A estrutura de aplicativos Cast do Web Receiver (CAF, na sigla em inglês) precisa ser instruída 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 carga 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 Web Receiver vai pular automaticamente para a borda da transmissão ao vivo. Os dados do guia da programação ao vivo ainda não foram adicionados. Por isso, a barra de navegação representa toda a duração do intervalo pesquisável da transmissão.
Salve as mudanças em receiver.js e inicie uma sessão de Cast na Cactool clicando no botão Transmitir e selecionando um dispositivo de transmissão de destino. A transmissão ao vivo vai começar a ser reproduzida imediatamente.
6. Como adicionar dados do guia da programação
O suporte do CAF para conteúdo ao vivo agora inclui a exibição de dados do guia da programação em aplicativos de receptor e remetente. Recomendamos que os provedores de conteúdo incluam metadados de programação nos aplicativos receptores para melhorar a experiência do usuário final, principalmente em transmissões ao vivo de longa duração, como canais de TV.
O CAF permite definir metadados para vários programas em um único fluxo. Ao definir carimbos de data/hora de início e durações em 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 serviço de metadados de amostra 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 marcador 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 seguinte código 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 Cast. O horário de início, o horário 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 transmissores quando o marcador de reprodução faz a transição para uma nova seção no contêiner. Assim, os aplicativos transmissores podem atualizar a interface. Recomendamos que os aplicativos receptores atualizem os metadados do contêiner em um interceptador de status de mídia para continuar enviando informações do programa aos aplicativos de transmissão. No nosso serviço de exemplo, 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 variedade de frames de vídeo. Salvo especificação em contrário, a CAF permite que os usuários busquem nesses segmentos. O Web Receiver pode especificar isso chamando algumas APIs disponíveis.
No interceptador de carga, remova o comando de mídia compatível com SEEK. Isso desativa a busca em todas as interfaces de toque e remetentes móveis. Adicione o seguinte código depois das 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 tecnologia do Google Assistente, como Ok Google, volte 60 segundos, use o interceptador de busca. Esse interceptor é chamado sempre que uma solicitação de busca é feita. Se o comando de mídia compatível com SEEK estiver desativado, o interceptador 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 do Cast. Não será mais possível buscar dentro da transmissão ao vivo.
8. Parabéns
Agora você sabe 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ões ao vivo.