Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La fonction obsolète Navigator.getUserMedia() demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.

Si ce dernier l'autorise, un MediaStream est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet MediaStreamError, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.

Il s'agit d'une ancienne méthode, veuillez utiliser la méthode navigator.mediaDevices.getUserMedia() à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec promesses.

Syntaxe

navigator.getUserMedia(constraints, successCallback, errorCallback);

Paramètres

constraints
Un objet MediaStreamConstraints spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section constraints de la méthode MediaDevices.getUserMedia(), ainsi que l'article Capacités, constraintes, et configurations.
successCallback
Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet MediaStream qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément <audio> ou <video>), comme dans l'exemple suivant:
function(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}
errorCallback
Lorsque l'appel échoue, la fonction spécifiée dans errorCallback est appelée avec comme seul argument l'objet MediaStreamError. Cet objet ressemble à DOMException. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.

Valeur de retour

undefined.

Erreurs

Exemples

Largeur et hauteur

Voici un exemple de l'utilisation de getUserMedia(), avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les exemples sous la section MediaDevices.getUserMedia() pour les exemples modernes.

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

Permissions

Pour utiliser getUserMedia() dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}

See permission: audio-capture and permission: video-capture for more information.

Spécifications

Spécifications Statut Commentaire
Media Capture and Streams
La définition de 'navigator.getUserMedia' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

New code should use Navigator.mediaDevices.getUserMedia() instead.

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Feature Chrome Firefox (Gecko) Microsoft Edge Internet Explorer Opera Safari (WebKit)
Basic support 21webkit [1] 17moz [3] (Oui) Pas de support 12 [2]
18webkit
Pas de support
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic Support ? 40.0webkit [2] (Oui) 24moz [3] 1.2moz [4]
1.4moz
Pas de support

[1] Les versions suivantes de Chrome supportent MediaDevices.getUserMedia() sans préfixe qui remplace cette méthode dépréciée.

[2] Chrome et Opera utilisent toujours une ancienne syntaxe de contraintes mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

[3] La syntaxe de la contrainte décrite ici est disponible depuis Firefox 38. Les versions précédentes utilisent une ancienne syntaxe de contraintes, mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

[4] Dans Firefox OS 1.2 seul audio était supporté, 1.4 ajoute le support de video.

Pour le moment, utiliser WebRTC pour accéder à la caméra est supporté par Chrome, Opera, et Firefox 20.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : a-mt, Nek-, Eric013, SuperStrong
Dernière mise à jour par : a-mt,