The GIF Booth: créer des GIFs animés en HTML5

The GIF Booth: créer des GIFs animés en HTML5

The GIF Booth est une expérimentation HTML5 que j’ai imaginée après avoir découvert photobooth.js. Cette simple page web permet de se prendre en photo avec la webcam de son ordinateur, et d’assembler ces images pour former un GIF animé. Il est ensuite possible d’uploader le GIF pour le partager sur les réseaux sociaux.

Si vous voulez jouer avec c’est par ici! Et si vous voulez des détails techniques sur ce petit projet, vous pouvez continuer votre lecture 🙂

L’idée était de créer un GIF animé avec une simple page web, sans faire appel à autre chose que du JavaScript. Les images proviennent de la webcam via navigator.getUserMedia et à l’heure actuelle le support est limité (ce n’est qu’un draft après tout). Aucun navigateur mobile ne le gère aujourd’hui à ma connaissance, et Firefox 18 ne le supporte pas non plus par défaut (c’est cependant possible en allant bricoler dans about:config mais les performances sont assez désastreuses). Je ne parlerai pas d’IE… Bref sur cette page web, le support de getUserMedia est le facteur limitant, le reste étant plus conventionnel.

Une fois le stream acquis et dirigé vers une balise vidéo cachée, on copie l’image toutes les quelques ms dans un canvas qui nous sert de contrôle. Ce canvas est lui-même dupliqué quand l’utilisateur prend une « photo ». Pour générer le GIF, je fais appel à une librairie toute prête: jsgif. jsgif accepte directement les contextes de canvas mais la génération (synchrone) du GIF est un processus assez lourd (notamment la quantification des couleurs) ce qui avait pour conséquence de geler le navigateur. Heureusement, les web workers sont là! J’ai donc deplacé jsgif dans un worker. Pour lui envoyer les images il faut passer par postMessage qui ne supporte pas les contextes de canvas, on extrait donc les ImageData pour les envoyer dans un objet JS. Le worker est asynchrone et utilise son propre thread système: plus de gel du navigateur, et on peut même afficher la progression via les messages!

On rajoute un peu de Twitter Bootstrap, et autres ressources utiles pour faire joli, un petit bout de PHP pour gérer l’upload sur le serveur afin de fournir l’inévitable lien de partage, et c’est prêt. L’upload final est évidemment optionnel et avant ce dernier, il n’y a aucune transmission d’information vers le serveur puisque tout est fait côté client en JS grâce à la magie d’HTML5 🙂

A noter qu’une fois n’est pas coutume, j’ai décidé de ne pas du tout utiliser jQuery. Comme ça, pour voir. Et bah ça a été.

Leave a Reply