Guide de dépannage · Test du micro
Comment corriger « SecurityError » et « navigator.mediaDevices is undefined »
Les navigateurs n'autorisent l'accès au micro et à la caméra que sur des pages sécurisées. Si l'adresse commence par http:// au lieu de https://, ou si la page est dans un cadre sans autorisation, le navigateur renvoie SecurityError ou masque entièrement navigator.mediaDevices, ce qui produit « TypeError: Cannot read properties of undefined (reading getUserMedia) ». La solution consiste à utiliser une adresse sécurisée.
Liste de dépannage rapide
- 1Regardez la barre d'adresse. La page doit commencer par https:// ou être localhost.
- 2Remplacez http:// par https:// dans l'adresse, ou rouvrez le site depuis un lien sécurisé.
- 3Si vous êtes dans une application ou une vue intégrée, ouvrez la page dans un onglet normal du navigateur.
- 4Autorisez le micro et la caméra pour le site, rechargez, puis appuyez de nouveau sur Tester.
- 5Si vous gérez le site, installez un certificat et redirigez tout le trafic http vers https.
Pourquoi les navigateurs exigent un contexte sécurisé
Le micro et la caméra sont sensibles. Les navigateurs ne les exposent que dans un contexte sécurisé, pour qu'un pirate sur un réseau partagé ne puisse pas remplacer la page et vous espionner. Les pages http simples, les adresses de réseau local comme 192.168.x.x et de nombreuses vues intégrées aux applications ne remplissent pas cette condition, contrairement à localhost.
Une politique d'autorisations peut aussi bloquer l'appareil pour une page située dans un cadre. La page hôte doit autoriser le micro et la caméra pour ce cadre.
Liste de contrôle pour les développeurs
Servez le site en HTTPS avec un certificat valide, testez le travail local sur localhost et vérifiez window.isSecureContext avant d'appeler getUserMedia. Pour les intégrations, définissez allow="microphone; camera" sur l'iframe et évitez les sandbox qui retirent l'autorisation. Le test du micro est servi en HTTPS pour que vous puissiez comparer.
FAQ
Questions fréquentes
Pourquoi navigator.mediaDevices est-il undefined ?
La page n'est pas dans un contexte sécurisé, donc le navigateur masque l'API multimédia. Ouvrez-la en HTTPS ou sur localhost.
Localhost est-il considéré comme sécurisé ?
Oui. Les navigateurs traitent localhost comme sécurisé : vous pouvez développer sans certificat. Les autres adresses locales nécessitent HTTPS.
Qu'est-ce qu'un SecurityError dans getUserMedia ?
Le navigateur a refusé parce que la page n'est pas sécurisée, a été chargée dans un cadre restreint ou qu'une politique interdit l'appareil.
Mes données sont-elles en sécurité sur une page http ?
Évitez d'utiliser le micro et la caméra sur des pages http. Utilisez https pour que la page ne puisse pas être modifiée en transit.