Navigator.getUserMedia()

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 méthode obsolète Navigator.getUserMedia() demande à la personne la permission d'utiliser une entrée vidéo (par exemple une caméra ou un écran partagé) et une entrée audio (par exemple un microphone) comme source pour un flux média (MediaStream).

Si la permission est accordée, un objet MediaStream dont les pistes proviennent de ces appareils est transmis à la fonction de rappel. Si la permission est refusée, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, c'est la fonction de rappel d'erreur qui est exécutée, avec comme paramètre un objet MediaStreamError qui décrit l'erreur qui vient de se produire. Si l'utilisatrice ou l'utilisateur ne fait aucun choix, aucune des deux fonctions de rappel n'est exécutée.

Note : Il s'agit d'une méthode historique, veuillez utiliser la méthode navigator.mediaDevices.getUserMedia() à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de fonctions de rappels pour celle-ci est indiqué comme obsolète dans la spécification qui encourage l'utilisation de la nouvelle version utilisant les promesses.

Syntaxe

js
navigator.getUserMedia(constraints, successCallback, errorCallback);

Paramètres

constraints

Un objet spécifiant les types de médias à récupérer, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section contraintes 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 appelée avec un paramètre : l'objet MediaStream qui contient les flux de médias. La fonction de rappel peut alors affecter le flux à l'objet souhaité (par exemple un élément <audio> ou <video>), comme dans l'exemple suivant :

js
function(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Faire quelque chose avec la vidéo.
   };
}
errorCallback

Lorsque l'appel échoue, la fonction indiquée par cet argument est appelée, avec comme seul paramètre l'objet MediaStreamError. Cet objet ressemble à DOMException.

Valeur de retour

Exemples

Largeur et hauteur

Voici un exemple d'utilisation de getUserMedia() qui contient notamment les techniques pour gérer la compatibilité avec les différents préfixes des navigateurs. On notera bien que ce qui suit correspond à la façon déconseillée de procéder. Consultez ces exemples de la page MediaDevices.getUserMedia() pour de meilleures pratiques.

js
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("L'erreur suivante s'est produite : " + err.name);
    },
  );
} else {
  console.log("getUserMedia n'est pas pris en charge");
}

Permissions

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

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

Voir permission: audio-capture et permission: video-capture pour plus d'informations.

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
getUserMedia
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Attention : Du nouveau code devrait utiliser MediaDevices.getUserMedia() à la place.

Voir aussi