Il était temps ! Il y a quelques semaines a eu lieu un évènement à Paris autour de la TV Connectée sous la forme d’un hackathon. Le principe ? Réunir des développeurs, des graphistes, des hackers, des acteurs de la TV connectée ou non pour un seul objectif : mettre en oeuvre en un week-end un projet innovant faisant usage de la TV Connectée au sens large. A l’initiative de cet évènement : France Télévision et Joshfire. Pour l’occasion, nous avions à notre disposition un certain nombre d’API et d’outils, dont certains créateurs étaient avec nous (Mesagraph, Stupeflix, Moodstocks, Movies.io).

Gamific.TV était représenté par William (CEO) et moi même (Lead TV). Celui ci à d’ailleurs écrit un article (beaucoup) plus rapidement que moi. Franck (Lead Mobile) est également passé nous voir, c’était bien sympa !

Les projets

Rapidement des équipes se sont montées tandis que d’autres personnes ont abandonné l’aventure. Finalement, pas mal de projets intéressants. Toutes les infos sont ici. Bien que nous avions à disposition des Google TV, personne n’est parti dans cette direction ! Au final il y avait beaucoup d’applications Web et mobiles (second screen). Techniquement c’était intéressant de voir beaucoup de projets Node.js et utilisant MongoDB, certains se sont appuyés sur les Websockets !

Mon coup de cœur va au projet Hyper-titles dont l’idée simple est d’amener une touche d’interactivité entre la télévision et votre smartphone. Des évènements peuvent être planifié afin de se déclencher sur le téléphone : lancer une application, vibrer, prendre une photo, allumer le flash… Je suis certain qu’à l’avenir ce type d’usage s’intégrera dans les programmes TV dès leur conception.

Le gagnant du hackathon est une gagnante, qui a développé une application mobile permettant de naviguer facilement sur le programme TV : LinkedTV. Elle a utilisé des technos innovantes pour la manipulation de données (RDF, SPARQL, Android Mobile, BorderCloud).

Notre projet : QRPub

Nous sommes partis sur une idée simple : rendre la publicité ludique. Pour y arriver, nous avons imaginé un système de jeu basé sur la rapidité. Sur les publicités apparaissent des QRCode durant le passage du spot, et chaque scan permet de gagner des points qui seront cumulés sur son compte ! Plus on scanne rapidement, plus on a de points ! Nous aurions eu plus de temps, nous aurions utilisé du watermarking audio ou vidéo, cela aurait été moins intrusif. Quoi qu’il en soit, nous avons développé pour arriver à une démo fonctionnelle :

un backoffice pour éditer les jeux et avoir le tableau des gagnants un écran TV pour simuler un mode de fonctionnement HbbTV une application mobile pour créer son compte et voir les points gagnés Nous avons utilisé node.js et mongodb pour développer notre projet. Finalement, nous sommes restés dans le classique au niveau des modules utilisés :

  • Express.js (web application framework)
  • Jade (templating)
  • cron (tâches de fond)
  • socket.io (websockets)
  • async (traitements asynchrones / parallèles)
  • qrcode (génération de QRCode coté serveur à la volée)
  • mobile-agent (détection de navigateurs mobiles : android, ios, windows phone…)
  • forever (gestion de processus node.js)

Le choix a été fait dès le départ de créer une seule application pour le mini backoffice, l’écran TV et l’application Web Mobile. L’avantage c’est qu’on évite de perdre du temps à bootstraper son application, moins de code à écrire, pas de cross-domain... C’est parfait pour un hackathon.

L’architecture est assez simple : on crée les jeux dans le backoffice en attribuant un certain nombre de sponsors avec pour chacun un timestamp de synchronisation avec la vidéo et une phrase à afficher. Une tâche de fond va parcourir l’ensemble des jeux chaque seconde. Dès qu’un sponsor doit être affiché un QRCode est généré et envoyé par WebSocket aux TV Connectées. De là l’application TV affiche ce QRCode qui peut ensuite être scanné. Les utilisateurs qui disposent d’un smartphone équipé d’un logiciel de scan de QRCode (comme Digit Eyes sur iPhone) peuvent scanner. Ils obtiendront une URL unique qui leur permettra de gagner des points. La reconnaissance du smartphone se fait par son adresse IP dans un premier temps. Celui ci à la possibilité à ce moment là de créer un compte et de se connecter. Les événements sont remontés en temps réel au niveau du tableau de bord du backoffice (points gagnés, création de compte…).

Conclusion

Au final, il y a un peu moins de 200 lignes de codes dans le backend et quelques pages HTML (enfin… Jade). Je n’ai pas utilisé Map/Reduce mais j’aurais pu, notamment pour traiter les résultats des jeux avec une grosse volumétrie de joueurs. De même le coût CPU pour la génération d’un QRCode à la volée est loin d’être négligeable... dans la vraie vie il faut prévoir de les précalculer ou de mettre en place un cache intelligent. Une erreur aussi, j’avais mis en dur l’IP du serveur pour la génération du QRCode… ce qui m’a valu une sueur froide durant la démo et une perte de temps inutile. Au final, la réflexion qui en ressort c’est que le moyen de synchro utilisé n’est pas forcément adapté ! On l’a vu récemment avec SFR et sa pub sur la 4G qui proposent aux utilisateurs de synchroniser avec Shazam (via l’audio donc). Je pense que c’est vraiment l’avenir car mine de rien pour scaner un QRCode il faut que celui ci soit de la bonne taille et avec les tailles de TV hétérogènes c’est un vrai problème. De plus, la distance avec la TV et le type de smartphone influence aussi la rapidité de synchronisation... L’expérience ludique peut rapidement devenir frustrante.

Bien sûr un hackathon ce n’est pas uniquement du développement et des démos. Nous avons pu voir pas mal de projets variés et échanger notamment avec les développeurs, graphistes, etc. des autres projets. Merci notamment à Serge Versille qui a eu la gentillesse de m’héberger et avec qui on a pu discuter Web, TV Connectée et business.