IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Hinault Romaric
6 commentaires

28PARTAGES

5  0 
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.




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 : Sélectionner tout 
1
2
myPhotobooth = newPhotobooth( document.getElementById( "container") );
Télécharger le code source, une démo ou la documentation

Source : Présentation du projet

Et vous ?

Qu'en pensez-vous ?

Une erreur dans cette actualité ? Signalez-nous-la !

6 commentaires
Commenter Signaler un problème
alex_vino
Avatar de alex_vino
Membre émérite https://www.developpez.com
Le 07/12/2012 à 14:07
Vraiment du bon boulot
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.
0  0 
SylvainPV
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 07/12/2012 à 14:48

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 !
0  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 07/12/2012 à 15:00
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...
0  0 
SylvainPV
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 07/12/2012 à 16:02
@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
0  0 
alex_vino
Avatar de alex_vino
Membre émérite https://www.developpez.com
Le 07/12/2012 à 17:21
Citation Envoyé par SylvainPV Voir le message
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
0  0 
camus3
Avatar de camus3
Membre éprouvé https://www.developpez.com
Le 08/12/2012 à 2:15
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.

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.
0  0 
Commenter Signaler un problème