Accediendo a la cámara y el micrófono de un dispositivo con JavaScript

Esta es una características fascinante que trae el API de HTML5 consigo y consiste en la posibilidad de acceder a la camara y microfono (con previa aprobación del usuario) de la computadora o dispositivo móvil sin la necesidad de utilizar ningún plugin; en este artículo aprenderemos cómo acceder a la cámara de un dispositivo y dirigir este flujo de datos (stream) dentro de un tag <video>; básicamente vamos a tomar una captura o imagen a través de la cámara del usuario.

El objeto navigator.getUserMedia de HTML5

Lo primero que debemos hacer es configurar el JavaScript; el código que accede a la cámara de la computadora o dispositivo empleando los prefijos correspondientes para mantener la compatibilidad entre los navegadores web más utilizados (Google Chrome, Mozilla Firefox e Internet Explorer):

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

Ya creado el objeto getUserMedia en el paso anterior, lo siguiente es inicializarlo con los siguientes parámetros:

• constraints: este objeto toma dos parámetros booleanos: video y audio, como podrás imaginar debemos especificar al menos uno de ellos para obtener el flujo de datos al que queremos acceder; casos posibles:
  • { video: true, audio: true }: Habilitamos ambas opciones; por lo tanto; el flujo de datos nos proporcionará video y audio.
  • { video: true, audio: false }: Habilitamos solo el video; por lo tanto; el flujo de datos nos proporcionará solo video.
  • { video: false, audio: true }: Habilitamos solo el audio; por lo tanto; el flujo de datos nos proporcionará solo audio.
  • { video: false, audio: false}: Esta opción NO es válida.
    • successCallback: Esta función es llamada si el usuario permite el acceso a su cámara y/o micrófono y cuando el flujo de datos fue cargado; por lo tanto, esta función nos proporcionará un objeto del tipo LocalMediaStream que contiene el flujo de datos para ser manipulado y asignado en el objeto apropiado o correspondiente, para este tutorial, será el tag <video>.
    • errorCallback (opcional): Esta función es la negación de la anterior; es decir; si el usuario denegó el acceso o el flujo de datos no pudo ser cargado por alguna razón, se ejecutará esta función, la cual provee alguno de los siguientes códigos de errores:

Disponible en Firefox Developer.

Accediendo a la cámara y el micrófono de un dispositivo con JavaScript: Ejemplo

El código JavaScript completo del ejemplo:

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

navigator.getUserMedia (

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

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector(video);
      video.src = window.URL.createObjectURL(localMediaStream);
   },
   
   // errorCallback
   function(err) {
    console.log("Ocurrió el siguiente error: " + err);
   }

);

para resumirlo, primero asignamos el constraints, indicando que solo nos interesa el video y no el audio:

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

Si no ocurrió ningún error, asignaremos el flujo de datos devuelto en el objeto LocalMediaStream en un tag video:

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector(video);
      video.src = window.URL.createObjectURL(localMediaStream);
   },

Por último, manejamos los errores (si lo hay):

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

• No podemos usar getUserMedia en páginas que usen en sus URLs file://.
• Esta API solicita permiso al usuario para acceder a la cámara y al micrófono.