https://www.flickr.com/photos/takapprs_flickr/14373301444/
https://www.flickr.com/photos/takapprs_flickr/14373301444/

Et Google Cast en général


Cet article fait partie de ceux dont j’ai écrit l’original sur Medium.
Comme je l’expliquais plus tôt, l’idée est de rapatrier mon contenu chez « moi ».
Nonobstant (quel mot 💚), je vais le mettre à jour ici avec les dernières versions, le medium restera figé tel quel.

Dans cet article, je vais faire une brève histoire du produit Chromecast et après, j’expliquerai de manière simple (mais détaillée) comment rendre une application Android qui n’est pas une application « media » (player video, streaming musical, …) compatible avec Chromecast, et plus globalement Cast ready (TV Cast, Box Cast,…).


🕰 Un peu d’histoire

🔙 De retour en 2013

La première Chromecast est sortie en 2013 aux États-Unis (en 2014 en France).

C’était il y a 5 ans (au moment où j’écris ces lignes) et pourtant on dirait que ça en fait 10.

D’ailleurs, elle ressemblait à ça

https://www.flickr.com/photos/takapprs_flickr/14373301444/

Dès le départ, Google a développé la technologie de la Chromecast pour être ouverte aux apps externes.
Comme à leur habitude, ils fournissent même un SDK pour développer dessus. 👍

Et pourtant, depuis, je trouve que ça n’a pas beaucoup bougé, pas été très utilisé.

Sérieux ?! Je veux dire, on peut techniquement balancer n’importe quoi sur notre télé maintenant !
Et pourtant … relativement peu d’apps sont compatibles.😢

Ce n’est pas si déconnant pour une app de tous les jours, mais des jeux, des quizzs etc ? Et pourtant les rares apps compatibles sont beaucoup d’apps de streaming (logique !!) et quelques jeux.

Pour les curieux, une liste d’apps compatibles est disponible sur le site store de google et sur celui de présentation de Chromecast.

Bref, tout ça, Google l’a bien compris et les dernières versions du SDK sont très optimisées en ce sens (streaming multimédia: vidéo, musique , photo).

⚙️ Comment ça marche en fait tout ça ?

Le point important dans la technologie Google cast, c’est que, généralement, les données ne sont pas envoyées de votre smartphone ou navigateur vers la Chromecast (ou l’appareil Cast)
Elles passent par un site web. 🤯

Wait What !? Allez un petit schéma pour illustrer tout ça ⤵️

La technologie cast schématisée

Mais qu’est-ce que ça veut dire ?

Déjà, quand vous castez, vous le faites depuis ce qu’on va appeler une Sender app 📱(app mobile, player web,…).

Généralement, ça se passe en cliquant sur une icône.

Elle est d’ailleurs dispo sur https://developers.google.com/cast/docs/developers#icons

icone cast
l’icône cast

En réalité, en faisant ça, vous demandez à votre appareil Cast d’afficher un site web.
Enfin, une app web (on est so 2.0 t’as vu).

Cette app web c’est la Receiver app 📺.
Et ça, bah ça implique que cette receiver app, elle soit hébergée sur le net et accessible 🌐!
(Comme n’importe quel autre site en fait, sinon l’appareil peut pas l’afficher ).

Pour finir, une fois que tout ça est chargé des 2 côtés, les deux applications communiquent via… on va dire une sorte de sockets.

Si c’est plus clair tant mieux, sinon accrochez-vous parce qu’on va rentrer dans la pratique 🥳
(Perso, je comprends toujours mieux avec un exemple concret).


🗂 Notre application à nous !

Les différentes étapes pour créer une application compatible Cast sont les suivantes.

  1. 👨‍💻Créer un compte développeur Cast
  2. 🔗Associer votre Chromecast appareil Cast dans votre compte de dev

Les 2 premières étapes ne sont à faire qu’une fois (sauf pour le point 2 si vous voulez tester sur un autre appareil).

Ensuite, pour chaque nouvelle app il faudra:

  1. 📝Déclarer une application
  2. 📺Créer la receiver app
  3. 📱Créer la sender app

Allez, perdons pas d’temps, on y va (si vous avez déjà un compte développeur Cast, vous pouvez sauter ces 2 étapes).

👨‍💻 Créer un compte développeur Cast

Avant toute chose, vous aurez besoin:
– d’un compte Google 🅶
– d’une carte bancaire 💳

Pour pouvoir développer sur Chromecast, rendez-vous sur la console pour enregistrer votre compte.

Comme dans la vie rien n’est gratuit , au moment où j’écris ces lignes, on nous demande de payer un one-shot fee de $5 💸.

Je vous laisse être guidé par Google ici, rien de bien compliqué et revenez quand c’est fait.
Moi j’bouge pas d’ici.

Et TADA! Vous avez maintenant accès à cette superbe (et je pèse mes mots) console de dev Cast.

console google cast
Elle est pas belle notre console ?

Bon, on se moque un peu 🙄 mais de toute façon, pour être franc, cette console, elle sert pas à grand chose (à l’inverse de celle du Play Store pour ceux qui connaissent).

On voit rapidement qu’il n’y a que 2 catégories:
– Les applications qu’on déclare
– Les appareils dont on va se servir pour nos tests

Pas besoin d’un doctorat pour comprendre que tout ce qu’on va faire ici c’est associer des devices et déclarer des apps.
D’ailleurs…

🔗Associer votre Cast device dans votre compte de dev

En parlant de ça, associons notre premier appareil à la console.

Cliquez sur le bouton ADD NEW DEVICE.

Une modale va apparaître et vous demander des informations sur votre appareil (Chromecast dans notre cas).

Ajouter un cast receiver
Modale d’ajout de cast receiver

Le serial number se trouve sur votre Chromecast (ou si box/télé je ne sais où) ! Pratique.

Si comme moi, l’appareil est déjà branché, ou que votre télé/box est l’appareil… vous commencez à paniquer à l’idée de devoir tout débrancher 🥺

Mais ne soyons pas mauvaises langues, Google a prévu le coup 🧠(ils sont bons quad même)

Je vous le résume en 2 secondes:
1. Avec un navigateur compatible avec l’option Cast (genre Chrome, FireFox, etc)
2. Rendez-vous sur la console cast (si vous n’y êtes pas déjà)
3. Allumez votre appareil qui cast (télé, chromecast, etc)
4. Castez le site (oui, oui, castez la console! — pas le blog !)

Et hop, le numéro de série devrait apparaître (et être dicté).

Je vous laisse donc remplir le formulaire, ça peut prendre une 15aine de minutes pour s’activer.

La description c’est pour vous, ça se retient mieux qu’un numéro de série.

Le temps d’une pause⏳, d’un café ☕️, ce que vous voulez… avant la suite 😋

📝Déclarer une application

Bon, maintenant que l’appareil est prêt, on passe aux choses sérieuses.

Le première chose à savoir, c’est que, comme je l’expliquais plus tôt, vous aurez besoin ici d’un hébergement web (publique) !

Bah oui, votre receiver app, c’est une app web, donc faut l’héberger quelque part pour que le device y accède !
Donc commencez par obtenir une url accessible publiquement où vous allez servir votre receiver.

Cela étant fait, allons y, cliquez sur ADD NEW APPLICATION.

Première action, premier choix.

  • Custom Receiver — En gros, on fait tout soi-même.
  • Styled Media Receiver — Un media receiver pré-construit, on a juste à envoyer un pimp my CSS et c’est terminado.

Comme expliqué au début de l’article, on le fait pour une app qui ne fera pas de streaming (sous-entendu pas de media).

Ca donne une indication sur ce qu’on va choisir ici…
… 🥁🥁🥁🥁Custom Receiver yes !

Créer un custom receiver

Ha, je n’vous avez pas mytho ?!
On doit remplir un Name, bon, ok, rentrez ce que vous voulez
Mais Receiver Application URL c’est là qu’on rentre notre fameuse url.

Même si on n’a encore, ni écrit, ni déployé la receiver app, mettez le hosting web qui vous servira par la suite.
On SAVE tout ça et on note l’Application ID.
On va en avoir besoin.

Une fois de retour à la console, on va tout de suite Editer notre app (en fin de ligne)

On va retrouver 3 grandes parties BASICS, SENDER DETAILS et LISTING DETAILS

BASICS
C’est ce qu’on vient de faire, nom, url, type. That’s it (en même temps c’est basics quoi)

SENDER DETAILS
Ca commence à devenir intéressant.
Ici, on rentre les informations concernant la sender app.
Cette app peut être iOS, Android et/ou Web.
En fonction de ce que vous choisissez, vous ne devrez pas rentrer les mêmes infos.

LISTING DETAILS
Et enfin, les listing details, l’idée est de gérer la catégorisation de l’application si vous voulez la référencer sur chromecast.com/apps

Remplissons les SENDER DETAILS.

Comme on fait une app Android, on doit remplir le Package Name, classique.

A noter que par Package Name, Google entend applicationId.
Généralement, c’est le même, mais si chez vous il diffère, ne vous trompez pas.
(Ne mettez rien en Intent to Join URI)

Et on zappe la partie LISTING DETAILS. On sauvegarde ça et on peut quitter la console.

📺Créer la receiver app

A ce moment-là, vous vous dites que vous en avez marre de faire du clic clic.
C’est vrai qui! En cliquant sur l’article vous pensiez voir du code…

Naïfs 🙄 Patience petit scarabée, ça vient!

On va commencer simple, avec ce qu’on appelle le CAF SDK.

Comme expliqué par Google, voici ce que fait un receiver:

Fournit une interface pour afficher le contenu de l’application sur le téléviseur.
Gère les messages de la sender app pour contrôler le contenu distant.
Gère les messages personnalisés de la sender app qui sont spécifiques à l’application.

https://developers.google.com/cast/docs/caf_receiver_overview

En gros, ça gère l’affichage sur la télé, les updates d’affichages et les communications, envoyées par la sender app, qui demandent une update (par exemple en streaming musical: play, pause, etc).

Et pour faire ça, on a juste à créer un fichier index.html, voilà le nôtre (avec commentaires)

On déploie ce fichier sur notre hébergement web, à l’adresse qu’on a indiqué dans les BASICS de notre receiver app et on va pouvoir passer à la suite.

📱Créer la sender app

Tout ce qui est écrit ci-dessous vient de la doc officielle … ou pas !
Au moment où j’écris ces lignes c’est toujours du appcompat (pas androidX) et du java (alors que toutes les docs de maintenant sont en kotlin).

Mais si jamais vous voulez y jeter un oeil 👁 https://developers.google.com/cast/docs/android_sender/integrate

Bref, allons-y.
Ouvrez votre Android Studio 🛠 préféré, nouvelle app sans Activity, AndroidX, Kotlin, applicationID très important, mettez celui qu’on a déclaré plus haut.

Une fois les 30 minutes (☕️⌛️) de synchronisation Gradle terminées , on ouvre le build.gradle de notre application et on y ajoute les dépendances suivantes:

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.mediarouter:mediarouter:1.1.0'
implementation 'com.google.android.gms:play-services-cast-framework:17.1.0'

Et c’est tout, votre build.gradle devrait donc ressembler à ça

Et maintenant le code 👨‍💻

Une sender app sur Android, c’est principalement 2 choses
– un OptionsProvider qui contient les infos de notre app
– une Activity (POUR L’EXEMPLE) dans laquelle on aura la logique du cast

Commençons par l’OptionProvider, créons une classe CastOptionsProvider qui hérite d’OptionProvider

Dans la fonction getCastOptions on va renvoyer la « configuration » de l’app.
Pour nous rien de particulier, juste son ID (qui est dans la console).
Je l’ai mis dans le fichier strings.xml sous le nom receiver_id.

Pour ce qui est du getAdditionalSessionProviders, pas besoin ici, on renvoie null.

Une fois nos options faites, il faut préciser à notre application où les trouver.
C’est très simple et ça se passe dans le manifeste.

Et maintenant, on passe à l’étape finale. L’Activity !! 👏
(Avouez, vous n’en pouvez plus. Vous le savez, je le sais. Moi même, je craque en écrivant tout ça)

L’Activity va faire 3 choses:
– Afficher le bouton cast
– Gérer la connexion au cast
– Envoyer des messages

Accrochez-vous, c’est le dernier et plus gros morceau. 🍰
L’avantage, c’est que c’est très linéaire à lire 📖

Lancez l’application, allumez votre télé, le bouton devrait apparaître !
Cliquez dessus, connectez-vous ! Et hop.

Sur mobile 📱
Sur Cast (TV) 📺

Voilà, j’espère que cette introduction / tuto sur la Cast technologie de Google vous a permis d’y voir plus clair et été utile. 😸
Perso je continue d’y croire et de me dire qu’elle est largement sous-exploitée aujourd’hui … Affaire à suivre donc ! 🚀

👻 Bonus

Il est possible de débuguer une application receiver.
Si vous avez Chrome, rendez-vous sur chrome://inspect et vous y verrez votre chromecast, que vous pourrez débuguer !🎉


💚Liens utiles

Bon, ça peut surprendre, mais je n’ai pas découvert tout ça en explorant le SDK.
Alors voici la liste des liens que j’ai utilisé pour mon article !

Et enfin, au cas où ça vous intéresse, le dépôt est disponible sur Github

https://github.com/quentin7b/android-estimateit

Dernière modification: 30 octobre 2019