Photobooth.js : le framework JavaScript permet d’ajouter un système de webcam

Version imprimable

06/12/2012, 21h36
Hinault Romaric

Photobooth.js : le framework JavaScript permet d’ajouter un système de webcam
Photobooth.js : le framework JavaScript permet d’ajouter un système de webcam
à un site Web en utilisant HTML5

Le HTML5, le futur standard du Web vient de révéler une fois de plus l’une de ses nombreuses facettes.

Un développeur indépendant a exploité les nouveautés du langage pour mettre au point Photobooth.js, une bibliothèque open source en JavaScript qui permet d’intégrer dans un site Web assez aisément un système de prise de photo par webcam.

Photobooth s’appuie sur la méthode getUserMedia du framework audio et vidéo open source WebRTC, qui est actuellement en cours de standardisation par le W3C comme une partie du HTML5.

Photobooth.js permet de prendre directement des photos depuis un site Web. L’utilisateur a même la possibilité de contrôler la webcam, ainsi que l’image en y apportant des correctifs en direct comme la saturation, la luminosité, la teinte, etc.

http://rdonfack.developpez.com/photobooth.jpg

Photobooth.js peut être utilisé avec les versions récentes de Chrome, Firefox, Opera ou tout autre navigateur supportant getUserMedia.

Photobooth.js est téléchargeable ainsi que son code source en open source sur GitHub. La bibliothèque peut être utilisée avec jQuery ou JavaScript. Le système d’appareil photo peut être ajouté à un site Web en utilisant juste la ligne de code suivante :
Code:

1 2 myPhotobooth = newPhotobooth( document.getElementById( "container") );
:fleche: Télécharger le code source, une démo ou la documentation

Source : Présentation du projet

Et vous ?

:fleche: Qu'en pensez-vous ?
07/12/2012, 14h07
alex_vino

Vraiment du bon boulot :ccool:
Le rendu final est vraiment bon et c'est simple d'utilisation.

Par contre niveau compatibilité c'est dommage (meme pas IE10).
Depuis le temps qu'on nous radote avec le HTML5 comme le standard qui harmonise tout les navigateurs, je remarque plutot que le Web est a plusieurs vitesse et résulte de l'implication des navigateurs (ou agent utilisateur).

J'imagine tres bien utiliser ce plugin sur les navigateurs compatibles et proposer la version Flash dans le cas contraire.
07/12/2012, 14h48
SylvainPV

Citation:

Par contre niveau compatibilité c'est dommage (meme pas IE10).
Depuis le temps qu'on nous radote avec le HTML5 comme le standard qui harmonise tout les navigateurs, je remarque plutot que le Web est a plusieurs vitesse et résulte de l'implication des navigateurs (ou agent utilisateur).

En même temps les API getUserMedia sont à peine sorties ! (Chrome 21 et Firefox 17). Chaque navigateur viendra à les supporter en son temps. Ne pas oublier que le HTML5 est un standard en cours de spécification prévu d'être finalisé en 2014 !
07/12/2012, 15h00
Bovino

Sans être (et de loin) un fanboy de IE, je suis toujours surpris de voir que personne ne se félicite jamais que IE ait introduit avant tout le monde des choses telles que le Drag'ndrop ou innerHTML, en revanche, quand IE n'implémente pas une spécification qui est toujours à l'état de brouillon (et donc pas supposé être implémenté)... D'ailleurs, Safari est-il aussi un navigateur "fléau du Web" puisqu'il n'est pas compatible non plus ?

Enfin, signalons que le script est obligé de passer par des préfixes vendeurs, alors qu'il est recommandé de ne pas les utiliser en production puisque les fonctionnalités disponibles par ce biais ne le sont qu'à titre expérimental et leurs spécifications susceptibles d'être modifiées...
07/12/2012, 16h02
SylvainPV

@Bovino: ou encore le box model de IE qui est bien plus pertinent que le standard du W3C : http://en.wikipedia.org/wiki/Interne..._box_model_bug

Mais tout comme toi et un paquet d'autres devs web, je déteste IE :p Responsable de trop d'heures sups et crises de rage par le passé. Certes ça va de mieux en mieux avec IE9 et IE10, mais les plaies saignent encore :aie:
07/12/2012, 17h21
alex_vino

Citation:

Envoyé par SylvainPV

Ne pas oublier que le HTML5 est un standard en cours de spécification prévu d'être finalisé en 2014 !

Je ne crois plus vraiment les dates annoncées, surout quand on entend de plus en plus parlé de HTML6 + CSS4, je me demande si HTML5 sera un jour figé.
Mais bon cela n'est plus le sujet de l'article ;)

@Bovino: Je suis aussi d'accord avec toi, mais Microsoft ne fait pas grand chose pour enlever sa mauvaise réputation en le domaine, leurs nouveaux navigateurs n'étant pas compatibles avec les anciens systemes qui représentent pourtant une grande partie des utilisateurs. Le projet que je viens de commencer cible IE6 :?
08/12/2012, 02h15
camus3

Citation:

Enfin, signalons que le script est obligé de passer par des préfixes vendeurs, alors qu'il est recommandé de ne pas les utiliser en production puisque les fonctionnalités disponibles par ce biais ne le sont qu'à titre expérimental et leurs spécifications susceptibles d'être modifiées...

Sauf qu'on ne développe plus pour un standard mais une / plusieurs plateformes. C'est d'ailleurs pour cela que certain navigateurs commencent à support les préfixes d'autres navigateurs. il n'y a jamais eut de standard HTML5 et HTML5 ne sera jamais un standard fixe, un papier fini à un instant T.

Prenons requestAnimationFrame qui est supporté sans préfixe dans Chrome. Depuis quand requestAnimationFrame est standardisé ? il n'a jamais été standardisé puisque la spec HTML5 n'est même pas publiée. Chrome support aussi webkitRequestAnimationFrame.

La grande erreur des supporters des standards est de ne pas comprendre que la plupart des développeurs web n'ont jamais codés pour des standards, mais pour une ou plusieurs plateformes. C'est encore plus vrai avec le développement mobile. Ou alors on code pour le plus petit dénominateur commun sans tirer parti des possibilités de telle ou telle plateforme , ce qui est justifié pour n'importe quel site orienté document , mais pas pour une webApp complexe qui fait autre chose que d'afficher des pages principe-détail.

Citation:

Sans être (et de loin) un fanboy de IE, je suis toujours surpris de voir que personne ne se félicite jamais que IE ait introduit avant tout le monde des choses telles que le Drag'ndrop ou innerHTML, en revanche, quand IE n'implémente pas une spécification qui est toujours à l'état de brouillon (et donc pas supposé être implémenté)... D'ailleurs, Safari est-il aussi un navigateur "fléau du Web" puisqu'il n'est pas compatible non plus ?

Internet Explorer était un bon navigateur en son temps , bien meilleurs que Netscape. Le problème est la politique de Microsoft qui oblige l'utilisateur à acheter une nouvelle version de windows pour upgrader IE , le second problème ,les entreprises dont les applications web internes tournent avec des technos non-standard , comme activeX , les "behaviors" , vb , ou autres particularités de IE qui ne fonctionneront plus si l'entreprise décide de changer de navigateur tout en gardant XP. Beaucoup de boites sont donc coincées et ne sont pas prêtes de mettre à jour leurs navigateurs ou d'en changer. Voila l'héritage technique d'Internet Explorer, et MS n'a pas prouvé qu'il souhaitait réellement régler ce problème.

Quand à Safari ,contrairement à IE , il utilise un moteur , webkit , qui est totalement open source. Les entreprises ne sont pas non plus "prisonnières" de Safari et de technos "non standard" qui pullulent sur IE.