Chromecast : premiers pas avec le SDK

Le Chromecast est une petite clé multimédia qui se branche sur un port HDMI. Connecté au réseau wifi, il permet de diffuser n’importe quel contenu depuis un ordinateur avec Chrome, ou depuis un terminal mobile iOS, Android avec le SDK fourni.

Le Chromecast ne permet pas seulement de diffuser du contenu mais il peut se transformer en un serveur capable d’afficher une application complexe (HTML, CSS), de recevoir et de transmettre des messages à des clients. L’appareil est capable de gérer la communication avec plusieurs clients connectés.

À l’occasion d’un Tech Event organisé à Xebia, nous avions proposé de coder un labyrinthe multi-joueur (plusieurs connexions simultanées) et multi-OS (iOS, Android et Javascript) en quelques minutes (env. 30min). Cet article est l’occasion de revenir sur le sujet et de vous donner l’occasion de développer sur votre Chromecast chez vous!

Le Chromecast est un petit appareil se branchant sur n’importe prise HDMI permettant, à la base, de diffuser du contenu.

Workflow

1. un client (sender) se connecte à un Chromecast et demande l’affichage de l’application X
2. le Chromecast (receiver) demande aux serveurs de Google si l’application X est enregistrée et si c’est le cas, télécharge les sources (HTML, CSS) depuis un espace de stockage (http://github.io par exemple)
3. le Chromecast initialise l’application et affiche le résultat sur la télé
4. le sender peut maintenant envoyer, et recevoir des messages au receiver.

À l’origine, le receiver a été conçu pour diffuser des contenus vidéos (Default Media Receiver) et (Custom Media Receiver). Google permet également de construire son propre receiver (Custom Receiver).

Trois SDK sont proposées pour communiquer avec le Chromecast :

1. Un SDK pour iOS
2. Un SDK pour Android
3. Un SDK Javascript

Concurrence

Dans sa fonction première le Chromecast a beaucoup de concurrence :

• L’Asus Miracast Dongle
• Belkin Miracast
• Toutes les TV proposant une fonctionnalité de Miracast/Wi-Display

Cependant, à la différence du Chromecast, tous ces outils ne permettent que la recopie d’écran depuis un terminal (ordinateur, mobile) vers la TV.

D’autres produits comme :

• Amazon Fire TV
• Apple TV
• Roku

proposent également une bibliothèque d’applications, sans pour autant faciliter le développement d’applications par les développeurs (pas de SDK, SDK propriétaire, boutique payante, etc.)

Le meilleur support, à ce jour, pour développer une application facilement déployable et accessible sur les TV par tous, reste le Chromecast.

Principes de conception

• Le serveur (receiver) ne peut pas demander des interactions utilisateurs (pas d’input sur un TV ou un écran)
• L’expérience doit faire penser à un film ou une vidéo mais pas à une application et le point d’attention doit se situer au centre de la TV
• C’est le client (sender) qui fait office de contrôleur pour interagir avec l’application sur la TV
• Attention à respecter la présence de certains éléments comme, par exemple, le « cast button »

Limites

Aujourd’hui, n’importe quel client connecté au même réseau que le Chromecast peut interagir avec ce dispositif : il n’y a pas de sécurisation, de restriction d’accès, etc.

Le receiver n’est composé que d’HTML et de CSS :

• Pas de popup
• Pas de tabs
• Pas de WebGL
• Pas d’extension Chrome
• Pas beaucoup de codecs vidéos

Une présentation sous forme de slides (en RevealJS) de cet article est disponible à cette adresse : http://xebia-france.github.io/workshop-cast-maze/talk/#/

Coding party (mise en pratique) !

Pendant le Tech Event nous avons mis en place une application multi-joueur et multi-OS permettant de se déplacer à l’intérieur d’un labyrinthe (le code de ce dernier était fourni) :

Pour la partie sender (client) nous vous proposons une implémentation pour les 3 SDK :

• Android : http://xebia-france.github.io/workshop-cast-maze/workshop/sender/android.html
• iOS : http://xebia-france.github.io/workshop-cast-maze/workshop/sender/ios.html
• Javascript : http://xebia-france.github.io/workshop-cast-maze/workshop/sender/javascript.html

Pour la partie receiver (serveur), l’implémentation possible n’est qu’en Javascript :

• http://xebia-france.github.io/workshop-cast-maze/workshop/receiver/receiver.html

Merci d’avoir suivi l’article jusqu’au bout, n’hésitez à poser des questions dans les commentaires si une partie du sujet n’est pas clair.