Cela fait quelques temps que je devait écrire un billet sur le sujet du développement d’applications Web pour les TV. Je vais donc vous raconter l’aventure de ce mois de mai 2011 durant lequel avec quelques collègues et en collaboration avec IBM nous avont réussi à développer une application en 1 mois pour le compte de France Télévision.

Le développement Web sur TV

Chez Wiztivi, nous sommes des pionniers de la télé connectée et forcément ça aide. Nous sommes en contact permanent avec les constructeurs et les différents acteurs de l’IPTV, y compris (bien sûr) notre principal actionnaire : SFR. L’environnement de développement classique d’un développeur d’applications TV, c’est un PC et pleins de TV : différentes marques, différents modèles, différents firmwares mais aussi quelques box ADSL et consoles de jeux

Du point de vue des technologies, ça reste du standard : HTML, CSS, Javascript. La plupart des TV intègre aujourd’hui WebKit ce qui nous facilite le travaille mais il reste malgré tout de nombreuses différences entre TV ce qui nécessite un effort particulier d’intégration et de tests. Il y a aussi les spécificités de chaque marque : API propriétaire et lecteurs vidéo différents. Finalement, l’environnement n’est pas plus contraignant que de réaliser une application Web classique qui soit fonctionnelle sur la majorité des navigateurs du marché (Firefox, Chrome/Safari, Internet Explorer, Opera).

En terme d’usage des applications, tout se pilote depuis la télécommande ce qui a notamment des impacts sur la gestion de la navigation et du focus. Il nous arrive également de devoir gérer des widgets spécifiques à la TV comme un clavier virtuel ou des players video.

La technologie HbbTV

Jusqu’à présent la solution la plus utilisée pour déployer des applications Web sur TV et box étaient d’héberger celles ci sur un serveur. Le constructeur intégrait le lien vers l’applications via son firmware. De ce fait, les communications passent par la prise ethernet de la TV/Box. HbbTV est une nouvelle approche qui permet au contraire de diffuser l’application dans le flux TV. L’idée est d’ajouter des informations au niveau de la TNT. Ainsi ce sont les chaînes qui peuvent désormais diffuser des applications.

HbbTV propose deux modes de fonctionnement : broadband et broadcast. La première approche est assez classique : on va définir une URL dans le flux. Lorsque l’utilisateur arrive sur une chaîne, l’application est chargée depuis cette URL. La communication passe donc par la prise ethernet et fonctionne (presque) comme une application standard : on peut notamment faire des requêtes XHR. La seconde approche est différente. Elle permet de diffuser l’application dans son intégralité dans le flux. Les performances sont donc tributaire du débit TNT et nous oblige à restreindre la taille des images et la quantité d’informations à envoyer à la TV. L’application peut malgré tout se mettre à jour par des informations qui sont mise à jour au niveau du flux (le carousel et les stream events). Développer une application broadcast est donc très contraignante pour le développeur et ça on s’en rend compte quand on développe, pas en lisant les spécifications du standards qui de toute façon ne sont pas respectées à la lettre.

Les TV qui supportent cette technologie ont commencé à apparaître sur le marché français en début d’année. Elles devraient se démocratiser en 2012. On peut dors et déjà acheter, par exemple, cet TV Toshiba de 42 pouces (800€).

France Télévision et HbbTV

France Télévision avait déjà effectué une démonstration à l’IFA. Cette application sera prochainement diffusée au niveau national mais pour la chaîne public le vrai grand test se déroulait en ce printemps 2011. L’idée du projet Roland Garros était de montrer que l’usage de l’HbbTV permet un usage enrichie de la TV. On parle d’ailleurs souvent de « télétexte HD ». France Télévision fait partie du consortium qui développe HbbTV et souhaite réellement devenir leader sur ce thème sur le plan national.

L’application Roland Garros

Les internationaux de Tennis intéressent énormément de monde et chaque jour France 2 et France 3 diffusaient de nombreux matchs. Le but de l’application est d’apportée le maximum d’information aux utilisateurs : résultats en direct (y compris pour les matchs qui ne sont pas en cours de diffusion), les fiches des joueurs et un album photo. Il y a différents modes d’affichages et on peut basculer à volonté entre le live et l’application grâce à la télécommande. L’application était disponible uniquement en broadband. Une popup « Veuillez connecter votre TV » apparaissait si nécessaire. Voici une vidéo de démonstration :

Architecture nosql

Les données nous ont été mise à disposition par IBM. De notre coté nous avons donc développé une application HTML/CSS full javascript. Pour les besoins de mise en forme des informations et de performances, nous avons mis en place un serveur d’application avec une application Spring connectée à la fois au backend IBM et à une instance MongoDB hébergée localement. Ainsi nous avons mis en place un batch qui régulièrement importait et mettait en forme les données (XML) dans notre base. Il faut savoir que nous recevions énormément d’information pour tout les matchs en cours. En fin de tournois, nous avions plusieurs giga de base de donnée. Mongo nous a permis de construire un modèle de donnée prêt à l’emploi notamment pour le résultat des matchs et la construction du tableau de classement. Nous avons utilisé Morphia afin de conserver une approche objet au niveau de notre code Java. Nous utilisions Spring ensuite pour sérialiser ces données en JSON au travers de webservices directement exploitable par les frontend par requêtes Ajax.

Nos outils

Personnellement, je travaille sous Ubuntu. Nous avons utiliser Eclipse et essentiellement Chrome couplé à ses outils de développement pour le développement des interfaces Web. J’ai apprécié l’iPad et l’application France Télévision qui permet d’avoir le live sur mon bureau. C’est appréciable de voir que l’interface de notre application se rafraîchis plus vite que la plupart des sites Web en ligne publiant les résultats de Roland Garros.

Conclusion

Au final, développer une application HbbTV demande surtout d’être en contact avec les constructeurs et d’être alaise techniquement en dehors des technologies Web. En interne, nous utilisions une carte de diffusion (Dektec) ainsi que la solution bien connu dans le milieu : OpenCaster. Heureusement que Karl s’y connait bien Sans lui ça aurait été difficile !

A noté que Wiztivi a également développé l’application HbbTV pour NRJ12. De mon coté, le prochain article sur la thématique TV parlera de Google TV mais je suis de près aussi Apple TV.