1. Informações gerais
Este codelab ensinará você a criar um app receptor personalizado da Web 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 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 receptor de transmissão que aproveita as APIs ao vivo.
Conteúdo
- 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 Cast.
- Como adicionar dados do programa à sua transmissão ao vivo
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 ou um Google Home Hub
Experiência
- Você precisa ter conhecimento prévio em desenvolvimento da Web.
- Experiência anterior com a criação de apps de transmissão 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. 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 personalizado, conforme integrado 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 que você recebeu
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. 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. Como transmitir uma transmissão ao vivo simples
Antes de iniciar este codelab, leia o guia para desenvolvedores em tempo real, que tem uma visão geral das APIs ativas.
Para nosso remetente, usaremos o Cactooll 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 para o receptor. Por fim, há também um metadata_service.js, que será usado mais tarde no codelab para simular o recebimento de dados do guia do programa.
Para começar, abra o Cactool no Chrome. Insira o ID do aplicativo receptor que você recebeu no Console para desenvolvedores do SDK do Cast e clique em Definir.
O framework de aplicativo de transmissão do receptor da Web (CAF, na sigla em inglês) precisa ser instruído 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 carga em receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Definir o tipo de transmissão como LIVE ativa a interface ao vivo do CAF. O SDK do receptor da Web pulará automaticamente para a borda ativa do stream. Os dados do guia de programação ao vivo ainda não foram adicionados, portanto a barra de deslizamento representará toda a extensão do intervalo pesquisável do stream.
Salve as alterações 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 imediatamente.
6. Como adicionar dados do guia de programação
O suporte do CAF para conteúdo ao vivo agora inclui suporte para a exibição de dados do guia de programação em aplicativos receptores e remetentes. Recomendamos que os provedores de conteúdo incluam metadados de programação nos aplicativos receptores para uma melhor experiência do usuário final, especialmente para transmissões ao vivo de longa duração, como os canais de TV.
O CAF é compatível com a configuração de metadados de vários programas em um único stream. 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 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 lista de metadados do programa, crie um contêiner. 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 copiados automaticamente 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 carga:
loadGuideData();
Salve o arquivo receiver.js e inicie uma sessão de transmissão. A hora de início e de término do programa e o título serão exibidos na tela.
Quando o marcador faz a transição para uma nova seção no contêiner, uma nova mensagem de status de mídia é enviada pelo destinatário para todos os remetentes. Assim, os apps 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 emissores. No serviço de exemplo, retornamos os metadados atuais do programa e dos dois programas seguintes. Para atualizar os metadados de um stream, crie um novo contêiner e chame setContainerMetadata, como no exemplo anterior.
7. Desativando a busca
A maioria dos streams de vídeo é composta por segmentos que contêm um intervalo de frames de vídeo. A menos que especificado de outra forma, o CAF permitirá que os usuários façam buscas nesses segmentos. O receptor da Web pode especificar isso chamando algumas APIs disponíveis.
No interceptador de carga, remova o comando de mídia com suporte SEEK. Isso desativa a busca em todas as interfaces de toque e de remetentes 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 os comandos de busca por voz do assistente, como Ok Google, voltar 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 para 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 de transmissão. Não será mais possível fazer buscas na 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 para desenvolvedores sobre transmissão ao vivo.