Navigator.getUserMedia

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.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:

Especificaciones

Compatibilidad con navegadores

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()