Photo webcam, gratuit

Comment ça marche

1. Autorisez la caméra : cliquez sur « Démarrer la caméra » et accordez l'accès quand le navigateur vous le demande.
2. Réglez les options : choisissez un filtre, activez le mode miroir et définissez un minuteur si vous souhaitez vous positionner avant le déclenchement.
3. Capturez et téléchargez : cliquez sur « Prendre la photo ». Les clichés s'accumulent dans la galerie, prêts à être téléchargés individuellement ou en lot.

Questions fréquentes

Mes photos sont-elles envoyées en ligne ?

Non. Tout le traitement a lieu dans votre navigateur via l'API MediaDevices ; les images ne quittent jamais votre appareil. Aucun serveur ne voit ni ne stocke votre flux vidéo.

Pourquoi la caméra ne démarre-t-elle pas ?

Vérifiez que vous avez autorisé l'accès à la caméra dans les réglages du navigateur, que le site est servi via HTTPS (obligatoire pour l'accès caméra) et qu'aucune autre application ne l'utilise déjà.

Puis-je choisir entre plusieurs webcams ?

Oui. Si plusieurs caméras sont connectées, le sélecteur « Caméra » les liste toutes : webcam intégrée, webcam USB externe, caméras virtuelles, etc.

Comment fonctionnent réellement les webcams dans le navigateur

L'accès à la caméra dans le navigateur est régi par la spécification W3C Media Capture and Streams. Le point d'entrée est navigator.mediaDevices.getUserMedia() : une fonction que la page appelle avec un objet constraints décrivant le type de flux qu'elle souhaite. Le navigateur affiche la demande d'autorisation ; si vous l'acceptez, la fonction se résout avec un objet MediaStream contenant une ou plusieurs pistes vidéo. La page lie ce flux à un élément <video> via video.srcObject = stream, le flux en direct s'affiche à l'écran, et capturer une image devient alors une simple question de dessiner la vidéo sur un <canvas> HTML5 au moment où l'utilisateur clique sur Prendre la photo. Le canvas est exporté via canvas.toBlob('image/jpeg'), ce qui devient le JPG téléchargeable. Aucune image ne quitte jamais votre appareil : tout le pipeline se trouve dans le processus de votre navigateur.

Le getUserMedia basé sur les promesses est arrivé sans préfixe dans Chrome 53 (septembre 2016) et Firefox 36 (février 2015). Safari était le retardataire : l'accès à la webcam depuis les pages web n'est arrivé sur iOS qu'avec iOS 11 (septembre 2017), et la cible stable moderne est iOS 14.5 ou ultérieur. D'ici 2026, l'API est essentiellement universelle : caniuse situe la prise en charge mondiale au-dessus de 97 %.

Pourquoi HTTPS est obligatoire

getUserMedia est réservé aux « contextes sécurisés » : HTTPS, localhost sur ordinateur, ou file:// dans Firefox. Les pages servies en HTTP ne peuvent pas du tout accéder à la caméra ; l'appel échoue avec une NotAllowedError. C'est le bug de déploiement le plus courant pour les variantes auto-hébergées de ce type d'outil, et il est appliqué uniformément par tous les navigateurs modernes. Le mobile est encore plus strict : il n'y a pas d'exemption localhost sur un téléphone, de sorte que tester des outils de caméra sur un serveur de développement local nécessite un outil de tunnel comme ngrok ou un proxy inverse avec TLS.

Les contraintes, ou comment demander la bonne caméra

L'objet constraints est la partie la plus complexe de l'API. Les réglages courants :

• width / height : acceptent un nombre littéral ou un objet avec min, ideal, max, exact. ideal est la valeur par défaut pratique ; le navigateur s'en approche le plus possible sans rejeter les caméras qui ne peuvent pas correspondre exactement. exact rejette si le matériel ne peut pas fournir.
• facingMode : 'user' pour la caméra frontale (selfie) ou 'environment' pour la caméra arrière. Sur les ordinateurs portables avec une seule caméra, la contrainte est ignorée en silence ; sur les téléphones, c'est la façon la plus propre de choisir le bon objectif sans énumérer les appareils.
• frameRate : la plupart des webcams plafonnent à 30 fps ; certaines caméras USB externes atteignent 60.
• deviceId : pour choisir un appareil spécifique après énumération avec navigator.mediaDevices.enumerateDevices(). Nuance cruciale : label est une chaîne vide tant que l'utilisateur n'a pas accordé au moins une autorisation de caméra durant cette session, de sorte qu'une liste déroulante « choisir votre caméra » qui s'exécute avant tout octroi d'autorisation affichera des identifiants sans étiquette. Le sélecteur Caméra ci-dessus contourne cela en ne se remplissant qu'après le succès de Démarrer la caméra.

Le voyant de la caméra est votre signal de confiance

Sur un Mac doté d'une webcam de 2008 ou ultérieure, la LED verte à côté de la caméra est câblée sur le même rail d'alimentation que le capteur. macOS et le micrologiciel imposent que la LED soit allumée chaque fois que le capteur est alimenté : Apple a conçu cela de sorte que même un logiciel malveillant au niveau du noyau ne puisse pas éteindre la LED pendant que la caméra enregistre. iOS implémente l'indicateur en point orange en haut de l'écran depuis iOS 14 (publié en septembre 2020), dessiné par un processus système que l'application ne peut pas supprimer. Les webcams Windows utilisent une approche similaire sur la plupart des appareils modernes, bien que l'application en soit moins universelle : quelques anciennes webcams USB de 2010 avaient des LED contrôlées par logiciel. Sous Linux, cela varie selon le matériel.

À retenir : faites confiance à la LED, pas au site web. Un outil purement navigateur comme celui-ci peut sincèrement promettre que rien ne quitte votre appareil, et le voyant de la caméra vous donne une confirmation indépendante que la caméra est réellement éteinte quand la page le prétend. Le bug le plus courant des outils de webcam est d'oublier d'appeler stream.getTracks().forEach(t => t.stop()) à la fermeture, symptôme : le voyant de la caméra reste allumé après que l'utilisateur pense l'avoir éteint. Le bouton Arrêter la caméra de cette page l'appelle explicitement.

Quand recourir à un outil de webcam dans le navigateur

• Photos de profil rapides pour Slack, Discord, GitHub, les réseaux sociaux, sans installer d'application de webcam séparée.
• Photos de type passeport / pièce d'identité prises chez soi pour des formulaires en ligne (renouvellement de permis de conduire, demandes de visa). L'argument de confidentialité du navigateur compte ici précisément parce que téléverser une photo de visage vers un service tiers met mal à l'aise.
• Aperçus de visioconférence : vérifier l'éclairage, le cadrage et le rendu d'un arrière-plan virtuel avant de rejoindre un appel Zoom ou Teams.
• Présence à l'école et au télétravail : lorsqu'un enseignant ou un employeur demande un selfie rapide pour confirmer la présence.
• Photos de référence pour l'art et le design : une pose de main, une photo d'objet pour un modèle 3D, un croquis d'autoportrait.
• Photomaton léger lors d'événements : faire tourner un ordinateur portable avec une page captive pour que les invités puissent prendre des selfies sans installer d'application.
• Maquettes et prototypage : les designers qui construisent des parcours incluant une étape « prendre un selfie » veulent une page de test rapide.
• Démonstrations pédagogiques : des enseignants montrant aux élèves comment fonctionne l'API Camera web moderne.

Le facteur de différenciation par rapport à Photo Booth sur macOS ou à l'application Caméra sur Windows est que rien n'est installé ni téléversé : utile sur les ordinateurs de travail verrouillés et les bornes partagées où vous ne pouvez pas installer de logiciel.

Filtres : ce que la propriété CSS filter vous offre

Le canvas HTML5 peut appliquer la syntaxe des filtres CSS via la propriété ctx.filter. Les filtres disponibles ci-dessus utilisent les mêmes primitives que n'importe quelle règle CSS peut appliquer : grayscale(1) (désaturation complète, équivalente à une projection de luminance), sepia(1) (teinte brune chaude imitant les photographies anciennes), invert(1) (négatif de couleur), blur(5px) (flou gaussien), brightness(1.4) (multiplie l'intensité des pixels) et contrast(1.4) (pivote autour du gris moyen). Ils sont accélérés matériellement dans tous les navigateurs depuis Chrome 53 / Firefox 35 / Safari 9.1.

Un détail subtil mais important : les filtres CSS appliqués à l'élément <video> ne se propagent pas au canvas. Pour intégrer le filtre dans le JPG enregistré, le même filtre doit être défini sur ctx.filter avant drawImage. Cette page le fait, de sorte que l'aperçu à l'écran correspond au fichier enregistré pixel par pixel.

Erreurs courantes et leur signification

Si Démarrer la caméra échoue, le rejet revient sous la forme d'une DOMException avec l'un de ces noms :

• NotAllowedError : vous (ou une session précédente) avez refusé l'autorisation, ou la page n'est pas en HTTPS. Regardez le menu des autorisations du site dans la barre d'adresse et assurez-vous que Caméra est réglé sur Autoriser ou Demander.
• NotFoundError : aucun appareil correspondant. Se produit le plus souvent lors d'une demande de facingMode: 'environment' avec exact sur un ordinateur sans caméra arrière.
• NotReadableError : le matériel est utilisé par une autre application. Zoom, Teams, OBS ou un autre onglet de navigateur a la caméra ouverte. Fermez-les et réessayez.
• OverconstrainedError : les contraintes n'ont pas pu être satisfaites. Supprimez les exigences exact ou assouplissez la résolution.
• TypeError : l'objet constraints était vide. L'appel doit demander au moins l'audio ou la vidéo.

Autres questions

Pourquoi mon image est-elle à l'envers ou de travers ?

Certaines caméras Android signalent une rotation trompeuse dans leurs métadonnées EXIF. Le navigateur applique généralement la rotation automatiquement avant que l'image vidéo n'atteigne le canvas, mais les anciennes versions de Samsung Internet et certaines WebView intégrées sautent cette étape. Si les captures sortent de travers, essayez de faire pivoter votre appareil de 90° avant la capture, ou utilisez l'outil Pivoter une image ensuite.

Pourquoi la liste déroulante affiche-t-elle « Caméra 1, Caméra 2 » au lieu des noms ?

Parce que le navigateur n'a pas encore reçu l'autorisation d'accès à la caméra. enumerateDevices() ne renvoie les étiquettes (par ex. « FaceTime HD Camera ») qu'après que l'utilisateur a approuvé l'accès à la caméra au moins une fois dans la session en cours ; jusque-là, seuls des identifiants opaques sont renvoyés. Cliquez une fois sur Démarrer la caméra, autorisez l'accès, et la liste déroulante se rafraîchira avec les noms appropriés.

Le voyant de la caméra restera-t-il allumé après la fermeture de la page ?

Non. Le bouton Arrêter la caméra arrête explicitement chaque piste du flux, et les navigateurs modernes arrêtent aussi les pistes lorsque l'onglet est masqué ou que la page se décharge. Si vous voyez un jour la LED de la caméra rester allumée après la fermeture d'un onglet, c'est un bug qui mérite d'être signalé : le plus souvent, cela signifie que la page n'a pas appelé la fonction de nettoyage. Sur cet outil, cliquer sur Arrêter la caméra ou fermer l'onglet libère le matériel immédiatement.

Puis-je enregistrer une vidéo, et pas seulement des images fixes ?

Pas avec cet outil : il s'agit uniquement de capture de photos fixes. L'enregistrement vidéo nécessite l'API MediaRecorder et produit des fichiers en WebM, MP4 ou MKV selon le navigateur. L'enregistrement a aussi ses propres implications de confidentialité (vous stockez de plus grandes quantités de séquences identifiables), c'est donc un cas d'usage distinct qui mérite son propre outil dédié.

Des données sont-elles envoyées à un serveur ?

Non. Le flux vidéo est fourni directement du système d'exploitation au navigateur ; la capture du canvas et l'export JPG se font via JavaScript en local ; la galerie réside dans la mémoire du navigateur et est téléchargée directement sur votre appareil. Rien concernant votre caméra, votre visage ou vos photos ne quitte la page.

Outils associés