Miroir webcam

Miroir webcam - Miroir virtuel pour retouche express

Outil complet pour transformer votre caméra en miroir interactif. Parfait pour vérifier maquillage, coiffure, tenue ou préparation d'appel vidéo. Inversion miroir, contrôle du zoom, ajustements lumineux, filtres créatifs et capture photo inclus.

Comment fonctionne le miroir webcam ?

Le miroir utilise la caméra de votre appareil et applique une transformation miroir :

1. Cliquez sur « Lancer le miroir »
2. Le flux vidéo s'affiche dans un canevas
3. Une transformation scale(-1,1) inverse l'image horizontalement
4. L'affichage se fait en temps réel (~60 fps)
5. Tout est traité localement, aucun flux n'est envoyé

Techniquement : getUserMedia pour la capture, Canvas 2D + requestAnimationFrame pour l'affichage et CSS filters pour les effets.

Pourquoi l'image est-elle inversée par défaut ?

Pour reproduire un miroir réel :
- Le mouvement reste intuitif (droite = droite)
- Plus simple pour se coiffer ou se maquiller

Fonctionnement :
- Canvas scale(-1,1) pour inverser
- Votre côté droit reste à droite

Vue non inversée :
- Cliquez sur « Inverser »
- Montre votre rendu côté caméra (comme les autres vous voient)
- Idéal avant une visioconférence
- Les textes/logos redeviennent lisibles

Vous pouvez basculer d'un mode à l'autre à tout moment.

À quoi sert le miroir webcam ?

Utilisations :

Maquillage :
- Contrôle du teint, rouge à lèvres, mascara
- Vérification des dégradés et symétrie

Coiffure :
- Vue globale ou détaillée
- Vérifier les mèches rebelles, les reflets

Tenue & accessoires :
- Harmoniser bijoux, lunettes, accessoires
- Vérifier l'ajustement de la tenue

Préparation d'appel vidéo :
- Ajuster posture, arrière-plan et lumière

Créatif :
- Répéter un tutoriel makeup
- Préparer un costume
- Référence photo pour artistes

Usage quotidien : retouche rapide, contrôle hygiène, sourire, etc.

Comment utiliser le zoom ?

Utilisez le curseur (100 à 300 %) :
- 100-150 % : visage + buste
- 150-200 % : focus visage/maquillage
- 200-300 % : précision yeux, lèvres, sourcils

Astuces :
- Combinez zoom et bonne lumière
- Restez centré dans le cadre
- Pour la meilleure qualité, rapprochez-vous physiquement plutôt que d'abuser du zoom numérique.

Que font luminosité, contraste et saturation ?

Ces réglages compensent votre éclairage :

Luminosité (50-200 %) : éclaircit ou assombrit.
Contraste (50-200 %) : accentue ou adoucit les différences.
Saturation (0-200 %) : intensité des couleurs (0 % = N&B).
Flou (0-10 px) : effet soft focus.

Ils n'altèrent pas votre apparence réelle, seulement l'affichage.

Quels filtres sont proposés ?

Filtres visuels :
- Aucun : rendu naturel
- Niveaux de gris : look noir & blanc
- Sépia : ambiance vintage chaleureuse
- Inverser : couleurs inversées pour repérer certains détails

Les photos capturées héritent du filtre actif au moment du cliché.

Comment prendre et sauvegarder une photo ?

Procédure :
1. Réglez zoom/filtre/lumière
2. Cliquez sur « Prendre une photo »
3. L'aperçu apparait sous le miroir
4. Cliquez sur « Télécharger » pour enregistrer (PNG)

Utile pour comparer des looks, partager avec un proche, documenter un avant/après ou préparer un tutoriel.

Mes vidéos restent-elles privées ?

Oui :
- Traitement 100 % local
- Aucun flux n'est envoyé ni stocké
- Rien n'est enregistré sans action de votre part
- Les photos ne sont sauvegardées que si vous cliquez sur Télécharger
- Permissions contrôlées par le navigateur (révocables à tout moment)
- L'outil fonctionne même hors ligne après chargement
- Nous ne demandons jamais la caméra avant que vous cliquiez sur « Lancer le miroir » (aucune demande d'autorisation au chargement de la page)

La confidentialité est totale.

Quels navigateurs et appareils prennent en charge ce test de webcam ?

L'outil utilise l'API standard getUserMedia (WebRTC), prise en charge par tous les navigateurs modernes :

Compatibles :
- Chrome / Edge / Brave (ordinateur et Android)
- Firefox (ordinateur et Android)
- Safari (macOS 11+ et iOS/iPadOS 14.3+)
- Opera et la plupart des navigateurs basés sur Chromium

Contexte sécurisé obligatoire :
- getUserMedia ne fonctionne que sur des pages HTTPS (ou localhost). Sur une page http://, le navigateur masque entièrement navigator.mediaDevices ; l'outil affiche alors un message « HTTPS requis » au lieu de la caméra.

Particularités iOS Safari :
- La caméra ne fonctionne que dans Safari ; certains navigateurs intégrés aux apps la bloquent
- L'élément vidéo doit être en ligne (nous utilisons playsinline), sinon iOS forcerait la lecture en plein écran
- iOS peut étiqueter la caméra avant « user » et la caméra arrière « environment »

Pourquoi les noms de caméra sont-ils masqués au début ?
- Pour des raisons de confidentialité, les navigateurs renvoient des libellés vides depuis enumerateDevices() tant que l'autorisation n'est pas accordée. C'est pourquoi le menu affiche « Caméra 1 / Caméra 2 » génériques avant le démarrage, et les vrais noms n'apparaissent qu'après avoir cliqué sur « Lancer le miroir » et accepté l'accès.

La caméra ne démarre pas - comment corriger les erreurs d'autorisation et « occupée » ?

Problèmes courants et solutions :

Autorisation refusée (NotAllowedError) :
- Vous (ou votre navigateur) avez bloqué l'accès à la caméra
- Cliquez sur l'icône caméra/cadenas dans la barre d'adresse → Paramètres du site → réglez Caméra sur « Autoriser », puis rechargez
- Sur macOS, vérifiez aussi Réglages Système → Confidentialité et sécurité → Caméra
- Sur Windows, vérifiez Paramètres → Confidentialité → Caméra

Caméra occupée / écran noir (NotReadableError) :
- Une autre app utilise déjà la caméra (Zoom, Teams, OBS, Skype, FaceTime)
- Fermez ces apps ou les autres onglets qui utilisent la caméra, puis réessayez
- Un redémarrage libère un pilote de caméra bloqué sous Windows

Aucune caméra détectée (NotFoundError) :
- Vérifiez le câble / la connexion USB des webcams externes
- Confirmez que l'appareil apparait dans le gestionnaire de périphériques du système
- Essayez un autre port USB

Réglages incompatibles (OverconstrainedError) :
- La résolution choisie n'est pas prise en charge par cette caméra ; sélectionnez un préréglage inférieur (ex. 720p)

Toujours bloqué :
- Essayez un autre navigateur pour distinguer un souci de navigateur d'un souci matériel
- Une caméra qui échoue dans toutes les apps nécessite probablement une réinstallation du pilote ou une réparation

Qu'est-ce que le panneau Infos caméra : résolution demandée vs réelle ?

Le panneau Infos caméra transforme cet outil d'un simple miroir en un véritable instrument de diagnostic. Après le démarrage de la caméra, il lit la piste MediaStreamTrack en direct via getSettings() et getCapabilities() :

Demandée vs fournie :
- Le menu de résolution envoie une « suggestion » idéale de largeur/hauteur au navigateur
- Le navigateur peut fournir quelque chose de proche mais différent (une demande 1080p renvoie souvent 1280×720 sur un capteur 720p)
- « Résolution réelle » indique ce que la caméra a réellement fourni via getSettings().width/height, pas ce que vous avez demandé

Signification de chaque champ :
- Résolution réelle : dimensions réelles en pixels du flux
- Images par seconde : le débit négocié (ex. 30 fps)
- Format d'image : largeur ÷ hauteur (1.778 = 16:9, 1.333 = 4:3)
- Appareil : le vrai libellé de la caméra (après autorisation)
- Orientation : « user » (avant) ou « environment » (arrière) sur mobile
- Capacités : la résolution, le débit, le zoom et la torche maximaux signalés par le matériel via getCapabilities()

Export pour dossiers QA :
- Cliquez sur « Exporter (JSON) » pour télécharger le rapport complet, ou « Copier » pour le copier
- Les techniciens de réparation peuvent joindre cet enregistrement vérifiable à un ticket pour prouver qu'une webcam remplacée ou réparée fournit bien sa résolution et son débit nominaux