NavigatorUserMedia.getUserMedia()

Demande à l'utlisateur la permission d'utiliser un dispositif media tels qu'un microphone ou un camera. Si l'utilisateur donne cette permission, la methode successCallback  est invoquée avec un objet LocalMediaStream comme argument.

Syntax

navigator.getUserMedia(constraints, successCallback, errorCallback);

Exemple

Voici un exemple de l'utilisation de getUserMedia(), avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs.

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

if (navigator.getUserMedia) {
   navigator.getUserMedia (

      // constraints
      {
         video: true,
         audio: true
      },

      // successCallback
      function(localMediaStream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(localMediaStream);
         // Do something with the video here, e.g. video.play()
      },

      // errorCallback
      function(err) {
         console.log("The following error occured: " + err);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

Parameters

Contraintes

Le paramètre de contrainte est un objet MediaStreamConstraints qui contient 2 boolean: video et audio. Celui-ci decrit le type de media supporté par l'objet LocalMediaStream. Au moins un de ces media doit être specifié pour valider le paramètre de contrainte. Si une des contraintes spécifiée n'est pas supportée pas le navigateur, getUserMedia() invoque la méthode errorCallback avec comme erreur NOT_SUPPORTED_ERROR. Si le navigateur ne peut trouver une piste media du type spécifié, getUserMedia() invoque la méthode errorCallback avec l'erreur MANDATORY_UNSATISFIED_ERR.

If the value or the member is not specified in the object, the value for the member defaults to false. The following demonstrates how to set the constraints for both audio and video:

{ video: true, audio: true }

successCallback

The getUserMedia() function will call the function specified in the successCallback with the LocalMediaStream object that contains the media stream. You may assign that object to the appropriate element and work with it, as shown in the following example:

function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
},

errorCallback

The getUserMedia() function will call the function specified in the errorCallback with a code argument. The error codes are described as follows:

Permissions

To use getUserMedia() in an installable app (for example, a Firefox OS app), you need to specify the following field inside your Manifest file:

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio via getUserMedia"
  }
}

See permission: audio-capture for more information.

Browser compatibility

Currently, using WebRTC to access the camera is supported in Chrome, Opera, and Firefox 20.

See also

• WebRTC - the introductory page to the API
• MediaStream API - the API for the media stream objects
• Taking webcam photos - a tutorial on using getUserMedia()