Navigator.getUserMedia

Pide al usuario permiso para usar un dispositivo multimedia como una cámara o micrófono. Si el usuario concede este permiso, el successCallback es invocado en la aplicación llamada con un objeto LocalMediaStream como argumento.

Sintaxis

navigator.getUserMedia ( constraints, successCallback, errorCallback );

Ejemplo

Aquí  hay un ejemplo usando getUserMedia() con los prefijos del navegador.

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

navigator.getMedia (

   // Restricciones (contraints) *Requerido
   {
      video: true,
      audio: true
   },

   // Funcion de finalizacion (Succes-Callback) *Requerido
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Haz algo con el video aquí.
      };
   },

   // errorCallback *Opcional
   function(err) {
    console.log("Ocurrió el siguiente error: " + err);
   }

);

Parámetros

constraints

El parámetro constraints es un objeto MediaStreamConstraints con dos miembros booleanos: video y audio. Estos describen el los tipos de multimedia soportados por el objeto LocalMediaStream. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, getUserMedia llama a la función errorCallback con el error NOT_SUPPORTED_ERROR. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, getUserMedia llama a la función errorCallback con el error MANDATORY_UNSATISFIED_ERR.

Si el valor o el miembro no es especificado en el objeto, el valor del miembro por defecto será falso. El siguiente ejemplo muestra como definir el constraints para audio y video:

{ video: true, audio: true }

successCallback

La función getUserMedia llamará a la función especificada en el successCallback con el objeto LocalMediaStream que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:

function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Haz algo aquí con el video.
   };
},

errorCallback

La función getUserMedia llama a la función indicada en el errorCallback con un código como argumento. Los códigos de error se describen a continuación:

Compatibilidad con los navegadores

Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.

Vease también

• WebRTC - la página introductoria a la API
• MediaStream API - la API para los objetos multimedia
• Taking webcam photos - un tutorial acerca del uso de getUserMedia()