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 tipoLocalMediaStream
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:
Error | Descripción |
---|---|
PERMISSION_DENIED | El usuario denegó el permiso para usar el dispositivo multimedia requerido para esta operación. |
NOT_SUPPORTED_ERROR | Un constraint especificado no es soportado por el navegador. |
MANDATORY_UNSATISFIED_ERROR | No se encontraron fuentes multimedia del tipo especificado en el constraints. |
NO_DEVICES_FOUND | No se encontró ninguna webcam. |
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter