Devoxx 2017 : Retour sur « Une aventure ultrasonique »

J'ai eu l'opportunité de me rendre à la Devoxx 2017, durant laquelle j'ai pu participer à la conférence "Une aventure ultrasonique" présentée par Hubert SABLONNIERE.

Hubert est développeur Web et passionné d’HTML, CSS et JavaScript. Il travaille depuis 7 ans chez INEAT Conseil et passe une bonne partie de sa semaine à développer sur des projets. Il intervient de temps en temps chez d'autres clients pour du conseil et de l'audit.

Il a travaillé avec du PHP, du Java et beaucoup de JavaScript pour des sites et webapp Intranet/Internet, mobile/tablette et desktop. Il a également une casquette CSS/intégration.

Sur son temps libre, il bidouille beaucoup avec les dernières technologies pour essayer de trouver des nouveaux usages pour ses utilisateurs et des facilités pour les développeurs.

Je dois avouer que je me suis présenté à cette conférence sans trop savoir à quoi m'attendre avec un titre aussi mystérieux et un résumé qui évoquait de la transmission d'information entre deux pages web sans connexion internet, en passant par l'émission d'ondes sonores. C'était donc empli d'une certaine curiosité que j'ai rejoint la salle de conférence pour écouter les dires de monsieur SABLONNIERE.

Après une petite mise en situation, le conférencier nous a rapidement fait comprendre qu'il parlerait de son expérience personnelle afin de mettre en avant l'importance de faire des projets personnels en dehors de ses heures de travail.
Pour illustrer ses dires, il a prit l'exemple d'un projet sur lequel il travaille dans son entreprise, qui permet de diffuser une présentation style Powerpoint/Keynote via une application web. Une page web va contrôler l'affichage des slides, et une autre page va afficher la slide en cours en plein écran. Pour se faire, il utilise des technologies éprouvées telles que les websockets. Cependant, si c'est une solution assez standard, elle manque d'intérêt pour le développeur cherchant sans cesse à trouver de nouvelles solutions. C'est ainsi qu'il s'est lancé dans l'idée de faire communiquer deux pages web sans websockets, et possiblement sans serveur, en tant que "projet perso".

Il a repéré trois phases d'évolution d'un projet perso au cours du temps, et je vais m'appuyer sur celles-ci pour expliquer la suite :

Recherches/Expérimentations

La première phase, c'est celle où l'on cherche. On regarde ce qui a été fait ailleurs, pour s'en inspirer et trouver la solution qui conviendrait le mieux, si elle existe.
En l’occurrence, pour faire une connexion entre deux pages web sans websocket, une solution existe : WebRTC. Cette librairie permet d'établir une connexion pair à pair entre deux pages web grâce à la transaction de paquets appelés des "ICE candidates". Cependant, elle possède plusieurs inconvénients :

  • Si cela fonctionne assez bien sur un réseau local, dès que l'on passe par internet, c'est beaucoup plus complexe, et il faut mettre en place des serveurs qui permettent d'établir le tunnel entre les deux ordinateurs (une fois la communication établie, plus besoin dudit serveur)
  • Il y a des problèmes de compatibilité avec certains navigateurs, notamment Safari.
  • Ce n'est pas du "vrai" *Serverless*

Ainsi, après avoir continué ses recherches, Hubert SABLONNIERE a trouvé d'autres moyens d'établir une communication entre deux PC sans serveur, des solutions d'ailleurs plus ou moins sérieuses :

  • Scan de QR Codes
  • Pigeon voyageur (oui oui)
  • La solution finalement retenue est inspirée de ce qui est fait sur le Chromecast : un mode "invité" permet d'identifier l'appareil voulant se connecter en émettant un message par ondes ultrasoniques, que le Chromecast va ensuite détecter. Il va donc tenter de reproduire ce comportement avec des technos web.

Pour se faire, il s'appuie sur la technologie WebAudio, qui est déjà implémentée dans certains navigateurs. Et c'est là que commence la deuxième phase du projet perso.

S'amuser

Comme il l'explique à ce moment de la conférence, un projet personnel c'est aussi fait pour s'amuser : en découvrant de nouvelles librairies, frameworks ou autres, on peut faire des essais plus ou moins aboutis pour tester le potentiel de ces technos, et je peux en témoigner, c'est possiblement la partie la plus "fun".

Il a dû se documenter pour comprendre non seulement comment fonctionne WebAudio, mais aussi comment l'exploiter.

Cette partie se divise en 3 sous parties : Générer des sons, détecter des sons, et encoder un signal.

Générer des sons

WebAudio permet de créer des oscillateurs sonores dont la configuration peut varier en fonction de :

  • La fréquence d'oscillation
  • La forme d'oscillation (sinus, triangle, carré...)
  • Le gain (= le volume)

En écoutant les pressions de touches clavier, et avec un mapping basé sur les fréquences des touches d'un piano, on peut recréer un "piano virtuel" avec WebAudio en appuyant sur différentes touches du clavier. C'est une première étape pour exploiter WebAudio, qui fait office de test de la librairie.

Détecter des sons

WebAudio permet tout aussi bien de détecter des sons, grâce à l'implémentation d'un analyseur de fréquences à partir d'un microphone connecté à l'ordinateur (et intrinsèquement au navigateur). Dès lors qu'il est configuré, il peut écouter les fréquences détectées par le micro, et si les fréquences correspondent au mapping créé auparavant, alors WebAudio peut faire la correspondance entre une fréquence et la touche correspondante.

Pour mettre cela en place par la pratique, il s'est aidé des codes DTMF, qui sont utilisés par les téléphones pour émettre les numéros. A chaque pression sur un numéro, deux fréquences sont émises en même temps, ce qui permet d'envoyer jusqu'à 16 signaux différents avec seulement 8 fréquences.

Encoder le signal

Grâce à cette expérience des codes DTMF, son objectif était désormais d'utiliser une gamme de fréquences plus grande, et qui varie en fonction du signal à émettre. Par exemple, s'il veut envoyer un message "Hello", il comporte 4 lettres différentes. Alors, sur sa gamme de fréquences, il va en prendre 4 suffisamment différentes pour que le signal soit facilement détectable par le récepteur. Cela nous amène à la 3e partie d'un projet perso.

Le challenge

Maintenant que nous avons tous les éléments en main, il est temps de faire ce qui était prévu initialement : faire communiquer deux pages web sur deux ordinateurs distincts via des ondes sonores.

Afin de pouvoir initier un tunnel entre les deux pages web, il va réutiliser les normes de WebRTC (les fameux ICE Candidates) en faisant un maximum de ménage afin que les signaux sonores prennent le moins de place possible. Cela est rendu possible grâce à la ressource WebRTCH4cks qui explique tout ce qu'on peut retirer pour que ça fonctionne encore.

Ensuite, il a fallu développer le système de conversion des différentes parties du paquet WebRTC (IPV4, IPV6, Données ascii...) en fréquences, et le mapping inverse.

Enfin, la dernière étape fut une prise de conscience : avec les fréquences sonores audibles, cela ne fonctionne pas bien, car il y a trop de bruit ambiant (surtout dans une salle de conférence, avec du matériel qu'on ne maîtrise pas forcément). Cependant, après une première démo ratée, la deuxième fut couronnée de succès une fois qu'il a passé sa gamme de fréquences en ultrasons.

Afin de voir le résultat en images, je vous invite à voir la conférence, disponible sur Youtube.

Conclusion

En conclusion, les projets personnels, si on a le temps d'en faire, sont une excellente façon de faire de la veille technologique : ils permettent de découvrir de nouvelles technologies, sur des sujets qui nous intéressent, et peuvent aussi amener à faire des révisions sur des sujets qu'on pensait maîtriser, mais pas forcément, ainsi que d'enrichir sa culture générale. Comme Hubert SABLONNIERE l'explique lui même, il a pu découvrir beaucoup de choses sur les réseaux , mais aussi les codes DTMF ainsi que beaucoup d'autres éléments.

L'autre avantage de ces projets, c'est qu'on peut ensuite le partager avec la communauté, ce qui peut avoir plusieurs effets :

  • D'autres personnes vont découvrir notre manière de faire, ce qui peut les aider à leur tour
  • On peut aussi recevoir des conseils des autres afin d'améliorer notre code

Moi même, j'essaie de faire des projets perso sur mon temps libre, et je ne peux que confirmer son point de vue exprimé lors de cette conférence.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *