logo-html5.jpg

Comme vous le savez peut-être déjà, l'une des fonctionnalités de l'HTML5 est l'accès aux "User Media" et la webcam fait partie de ces "User Media" ;-)

En tentant d'accéder à la Webcam, Chrome affiche un petit message très banal que l'utilisateur peut facilement accepter sans trop se poser de question.
Pour démontrer la faiblesse du message affiché par Chrome, je me suis amusé à développer une petite page Web qui capture le visage de la personne sans qu'elle ne s'en aperçoive :

http://labs.geeek.org/html5/

La page ouvre un flux vidéo et réalise une photo dans un canevas HTML5 en "display hidden". Un appel Ajax est ensuite réalisé au serveur pour transférer la photo dans le dos de l'utilisateur.

Techniquement, l'ouverture d'un flux vidéo en HTML5 est très simple à mettre en place. Pour cela, il est possible d'utiliser la fonctionnalité proposée par Webkit en passant deux fonctions de callback : une en cas de succès de la récupération du flux vidéo et l'autre en cas d'erreur.


navigator.webkitGetUserMedia({video:true}, gotStream, noStream);

Ensuite, pour réaliser une photo à partir du flux vidéo, il suffit d'utiliser un canevas HTML et d'utiliser la fonction "drawimage" pour copier une image du flux vidéo vers le canevas.


canvas.getContext('2d').drawImage(video, 0, 0);

Et le tour est joué ... il ne reste plus qu'à transformer le contenu en blob et de l'envoyer sur une URL du serveur.

Soyez très prudents si vous utilisez un navigateur partagé, une fois que l'utilisateur a autorisé le flux vidéo, il suffit que l'onglet reste ouvert pour que le navigateur puisse continuer à filmer et à envoyer des photos sur un serveur distant ...