NavigatorUserMedia.getUserMedia()

Cette traduction est en cours.

La fonction Navigator.getUserMedia() demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou une entrée audio (ex: un microphone). Si l'utilisateur 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, si le flux d'entrée n'existe pas, ou si n'importe quelle autre erreur se produit, le callback d'erreur sera alors exécuté avec comme paramètre un objet MediaStreamError qui décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.

Si cette méthode est toujours présente, et toujours basée sur des callbacks, toute autre méthode de l'API Media Capture and Streams utilise les promises. Même si techniquement cette méthode n'est pas dépréciée, nous la traitons comme telle car la spécification préviens que des discussions sont en cours à propos de si oui ou non cela devrait être supprimé. De ce fait, vous devriez éviter d'utiliser cette méthode et devriez utiliser navigator.mediaDevices.getUserMedia() à la place.

Syntax

navigator.getUserMedia(constraints, successCallback, errorCallback);

Paramètres

constrains
Un objet MediaStreamConstraints spécifiant les types de médias que vous souhaitez recevoir avec les contraintes pour chaque type de média.
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

Rejections of the returned promise are made by passing a DOMException error object to the promise's failure handler. Possible errors are:

AbortError
Although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a NotReadableError, some problem occurred which prevented the device from being used.
NotAllowedError
The user has specified that the current browsing instance is not permitted access to the device; or the user has denied access for the current session; or the user has denied all access to user media devices globally.
Older versions of the specification used SecurityError for this instead; SecurityError has taken on a new meaning.
NotFoundError
No media tracks of the type specified were found that satisfy the given constraints.
NotReadableError
Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.
OverConstrainedError
The specified constraints resulted in no candidate devices which met the criteria requested. The error is an object of type OverconstrainedError, and has a constraint property whose string value is the name of a constraint which was impossible to meet, and a message property containing a human-readable string explaining the problem.
Because this error can occur even when the user has not yet granted permission to use the underlying device, it can potentially be used as a fingerprinting surface.
SecurityError
User media support is disabled on the Document on which getUserMedia() was called. The mechanism by which user media support is enabled and disabled is left up to the individual user agent.
TypeError
The list of constraints specified is empty, or has all constraints set to false.

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.
Brouillon de l'éditeur Définition initiale.

Compatibilité des navigateurs

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

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 : Nek-, Eric013, SuperStrong
 Dernière mise à jour par : Nek-,