Posts Profissionais

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.

Chromecast-como-programar

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!

Tiago Gouvêa

Full-stack Developer, fazendo códigos desde o século passado. Criador da metodologia "Aprender programação em 20 horas" e diretor da startup App Masters, voltada para o desenvolvimento de aplicativos. Apaixonado por tecnologia e viciado em café.

Conteúdo relacionado

Respostas (14)

Escreva uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

  1. Lucian

    Boa tarde Tiago, gostaria de tirar uma duvida!! Estou desenvolvendo um aplicativo de streaming para chromecast, tudo já esta funcionando perfeitamente, porem gostaria de saber como faço para fazer cast de uma imagem em PHP para as Tv’s.

    Descompilando alguns APK’s, descobri que existe esse tal código hexadecimal (Ex:F136BBBC), mudando esse código de outros APK’s descobri que muda a imagem a ser transmitida pela TV.

    Minha duvida é como crio e converto uma imagem de PHP para Hex (8 caracteres) para que o chromecast reconheça e seja possível transmitir uma imagem que eu próprio fiz de meu Apk?

  2. Lorenzo Henrique

    Muito bom o conteúdo amigo, também esotu começando a desenvolver algumas aplicações para Chromecast, as dicas foram muito boas.

  3. Alexandre Santos

    Saudações Tiago. Pesquisando sobre o Chromecast encontrei o seu post e achei muito interessante. Recentemente desenvolvi um painel de senha em html é um executável onde o operador digita a senha e clica num botão para enviar ao navegado Chrome. O inconveniente é que tenho que clicar no ícone da extensão do chromecast para enviar esta tela ao televisor. Realmente não consegui documentação que me permitisse usar o delphi xe6 ou o xe8 para fazer o envio direto para o televisor. Tentei inclusive o chromium e nada. Por acaso é possível fazer isto, ou teria como enviar direto de outra forma?

    Desde já agradeço pelo post e por uma possível resposta. Caso queira posso te enviar o pequeno projeto que fiz…

    Abraços

  4. Cristiano

    Há a possibilidade de criar um software que faça streaming de vídeo de um dispositivo (tipo PC) para vários Chromecasts???
    Abraço.

    1. Tiago Gouvêa

      Consultei meu amigo Victor Hugo que disse já ter pesquisado a respeito, mas não tem como ser feito. Também acredito que não tenha como..
      Uma forma alterativa, seria fazer streaming para um local online, e de todos estes chromecast consumirem deste local. Ai daria. Ok?

  5. Rose

    Olá Tiago, estou começando a desenvolver algumas aplicações para Chromecast. Consegui desenvolver uma aplicação web funcional usando as API’s da Google. Agora queria integrar uma aplicação Android a ela. Você sabe me dizer se poderei usar a mesma aplicação Receiver? Tendo em conta que a aplicação Sender do Android terá as mesmas funcionalidades que o Sender que utilizei na aplicação na web. Desde já, obrigado e parabéns pelo site!

    1. Tiago Gouvêa

      Oi Rose,
      Você poderá sim utilizar o mesmo Receiver. Você terá um sender chrome e um Android.
      A ideia do Chromecast é justamente essa, permitir um aplicativo para a TV ser controlado por qualquer dispositivo.
      Basta implementar usando o mesmo application ID e namespace.
      Abraços

  6. Germano

    Olá Thiago. Queria saber você publicou sua aplicação sem usar SSL. Quando tento publicar usando o arquivo receiver do seu servidor aparece a seguinte mensagem “Your receiver must be hosted on secure servers supporting https”. Alguma sugestão para contornar isso?

    1. Tiago Gouvêa

      Alô Germano,
      Enquanto você está desenvolvendo o receiver pode estar em servidores sem SSL, mas, quando for publicado precisará estar em https.
      Você realmente precisará de um servidor com SSL configurado. Uma sugestão é utilizar o app engine do Google para hospedar seus arquivos.

      1. Germano

        Apenas para critério de curiosidade, descobri que é possível utilizar o próprio Google Drive hospedar as apps receivers para realização de testes, pois são apenas html, css e Js. Não é difícil de utilizar e é uma forma de contornar essa questão do https. Não lembrava do Google App Engine. Foi uma ótima sugestão. Obrigado!

  7. Fábio

    Amigo, é preciso colocar em um local público a aplicação receiver, você poderia citar um ou alguns locais públicos, grátis, que possam servir como armazenamento da aplicação? Se não tiver grátis, poderia dizer onde você publicou o exemplo quando fez os testes?

    1. Tiago Gouvêa

      Eu enviei para o servidor do meu site mesmo. Olha ele aqui ó: http://tiagogouvea.com.br/cast/receiver.html
      Confesso que não estou muito ligado em servidores gratuitos ultimamente, não conheço mais. Pesquisando no google encontrei http://www.5gbfree.com/ que me parece uma boa opção free.
      Crie sua conta lá, envie seu receiver e depois me diga se conseguiu botar pra funcionar!

  8. Fábio

    Amigo, no código consta este namespace “var namespace = “urn:x-cast:com.tiagogouvea.cast.digaalgo”; a dúvida é a seguinte você que dá este nome, ou você pega de algum lugar?

    1. Tiago Gouvêa

      Olá Fábio, no caso deste namespace só é preciso manter o trecho “urn:x-cast:” para que funcione, qualquer coisa após isso fica por sua conta. Ninguém nem nada irá conferir isso, ou seja, não é preciso cadastrar em nenhum lugar. A conversão costuma ser algo como seu dominio web, a plataforma e o aplicativo.. Ok?
      Lembre-se de alterar o namespace nos dois arquivos hein!