Programando para Chromecast

Em 2013 o Google lançou um produto totalmente novo e inovador no mercado, o Chromecast, que é um dispositivo HDMI que quando conectado a sua TV, a transforma em uma super Smart Tv. Muitos programadores assim como eu estão querendo saber “como programar para chromecast”, “se é difícil programar para o Chromecast”, “o que é preciso para programar para o Chromecast”, “como o Chromecast executará minha aplicação” e assim por diante.

Todas estas respostas estão disponíveis na web e principalmente na documentação do Google, porém, apenas em inglês. Então decidi fazer este post para introduzir o assunto em português, incluindo o código completo do exemplo para download.

O Chromecast permite que você desfrute de aplicações multi-screen, utilizando sua TV como tela principal (Receiver) e outros dispositivos como controladores (Sender). Estes podem ser celulares (android e IOS) ou seu computador.  No vídeo a seguir vemos bem nitidamente isso, porém para a transmissão de vídeos.

Da forma como foi concebido, o Chromecast permite facilmente realizar stream de videos, ou seja, se sua aplicação irá apenas exibir um ou vários videos online, você não precisará fazer quase nada. Também existe a possibilidade de desenvolver aplicações mais elaboradas, totalmente customizadas.

Em todos os casos você terá que implementar dois aplicativos, o Sender e o Receiver, que apresento agora.

Sender

O Sender é o aplicativo onde o usuário controla (celular, tablet, notebook), que “envia” os comandos para a “tela”. que pode ser desenvolvido para Android, iOS e Chrome. Será necessário então ter o conhecimento em um destes três ambientes para desenvolver seu app. Neste exemplo utilizarei o Chrome como controlador, pois HTML e JavaScript são mais populares que Java e Objective-C.

Receiver

É quem está exibindo o conteúdo do Chromecast, será sua TV ou um datashow. É ele quem “recebe” e é para onde as pessoas irão olhar. Existem três tipos de receivers:

Default Media Receiver – Este modo funciona basicamente como um player para algum video online. Você não tem nada o que configurar nem melhorar, seu Sender precisa apenas dizer onde está o video que o Chromecast irá se encarregar de exibi-lo.

Styled Media Receiver – É bem parecido com o anterior, porém neste você pode customizar a exibição, mudando as cores dos componentes e incluindo uma marca-d’água na tela.

Custom Receiver – Neste modelo você faz o que quiser! E o mais importante… utilizando HTML5, CSS e JavaScript. Desta forma você pode implementar o que quiser, seja um jogo, um sistema de consulta a dados ou o que mais vier a sua cabeça, e que esteja dentro das limitações do HTML5.

Metendo a mão na massa

Importante ressaltar que é preciso ter o Chromecast para poder realizar os testes… se ainda não tem, veja onde comprar.

Para começar a desenvolver agora mesmo para o Chromecast é preciso seguir estes passos:

1. Configure seu Chromecast para desenvolvimento
   1. Instale seu Chromecast e siga as instruções do Setup do Chromecast
   2. Execute o aplicativo do Chromecast no seu dispositivo controlador (Sender)
   3. Nas configurações procure e marque a opção “Send this Chromecast’s serial number when checking for updates“. Esta opção deve estar marcada para o desenvolvedor.
2. Leia o Guia de Experiência do Usuário que irá lhe mostrar como implementar uma interface consistente
3. Baixe as bibliotecas e aplicativos de exemplos
4. Registre seu aplicativo. Você receberá um app ID para incluir em suas chamadas da API (veja detalhes no próximo tópico)
5. Desenvolva seu aplicativo
   1. Siga as instruções para para Senders Android, iOS, Chrome e acerca do Receiver
   2. Consulte a Referência da API quando necessário

Registrando seu aplicativo

No Google Cast SDK Developer Console você terá a opção de incluir aplicativos e dispositivos. Registrae seu dispositivo para que seja possível utiliza-lo como desenvolvedor. Você pagará U$5,00 por isso. O Serial está escrito atrás do Chromecast.

Em seguida registre seu aplicativo, será necessário neste momento informar a URL, que deve ser o endereço web do Receiver. Portanto, envie para um local publico e aponte. Durante seus testes será necessário enviar o arquivo repetidas vezes para este mesmo local.

Desenvolvendo o aplicativo

Através do GitHub GoogleCast você poderá baixar alguns códigos fonte de exemplo. Para meu exemplo irei partir do CastHelloText-chrome, desta forma tanto no sender quanto no receiver irei trabalhar com HTML5 e Javascript. Meu aplicativo será um pouco mais elaborado que o exemplo original; irá permitir ao usuário escrever palavras ou frases no browser (sender) e cada frase será exibida no na TV (receiver) com uma fonte, cor e posição aleatória.

Baixe os fontes do meu aplicativo no meu GitHub. Como o objetivo deste post é dar acesso ao publico que não lê inglês ainda, traduzi os comentários dos códigos também.

Você precisará enviar o receiver.html para um caminho público para indicar na Aplicação criada no console. O arquivo chromeDigaAlgo.html pode ser aberto em seu browser local, não é preciso ter um apache rodando nem nada equivalente, uma vez que as requisições serão feitas por javascript. Para que o exemplo funcione você terá que informar o seu applicationID em chromeDigaAlgo.html.

O resultado deverá ser algo como apresentado na foto.

Como funciona?

Creio que além desta estrutura de dois aplicativos distintos, o mais importante a entender é que o Sender envia mensagens para o Receiver. A mensagem é definida por você. Portanto o Receiver irá receber instruções podendo ser inteiros, strings e outros tipos de dados, que basicamente dizem o que deve ser feito. A implementação de interface deve ser totalmente feita no Receiver, enquanto o Sender será apenas que diz “faça isso”, “faça aquilo”.

No Receiver

O CastReceiverManager é “o cara” e irá se encarregar de toda a comunicação entre os dispositivos pra nós, entregará tudo de bandeja. Após inicializado ele aguarda conexões do Sender e só precisamos trabalhar os callbacks que serão chamados de acordo com a situação. Observe no código que a partir do momento que a instância do CastReceiverManager é obtida, toda a configuração de comportamento é feita no objeto.

Outros dois pontos importantes são na chamada por getCastMessageBus(), onde é criado o canal de comunicação entre o sender e o receiver, e em messageBus.onMessage, que onde a mensagem propriamente chega.

No exemplo, caso queira altera-lo, certifique-se que o namespace passado como parâmetro em getCastMessageBus seja o mesmo declarado no sender.

No Sender

Quero apenas ressaltar três pontos aqui. O primeiro, chrome.cast.SessionRequest() é quem pede que o aplicativo seja iniciado com uma sessão para troca de dados entre os dispositivos. Será através da sessão que as mensagens serão enviadas.

Na chamada de chrome.cast.ApiConfig() o script informa os parâmetros principais para que tudo funcione.

E por fim o método sendMessage() que é o responsável por enviar a mensagem de texto para o Receiver através da sessão.

Algo mais

Espero que este post tenha lhe dado informação suficiente para começar com o Chromecast. Fique a vontade para partir do exemplo para sua aplicação utilizando deste código, mas não deixe de buscar sempre mais informações. É um código reduzido e focado apenas nesta implementação.

Apensar de lidar com duas aplicações, tenho certeza que seu maior desafio será com a implementação do aplicativo receiver em sí, na sua finalidade, uma vez que a conexão e troca de mensagens é muito simples.

Algumas observações finais:

• Uma vez aberto o Receiver no Chromecast, me parece, ele faz cache e por várias vezes precisei reinicia-lo (tirar a usb e voltar) para que a nova versão fosse carregada;
• Abra o console de seu Chrome para acompanhar os logs;
• Para debugar diretamente do aplicativo rodando na TV, existe uma forma de apontar o debugger para o developer console do chrome de sua máquina. Veja aqui como fazer no item Debugging.

Comece agora! Comente aqui suas duvidas e sugestões para ajudar os demais!