Capturar una imagen mediante la webcam con Javascript
Con una webcam conectada a nuestro ordenador podemos enviar todo lo que en ella sucede en tiempo real y esa retransmisión, aparte de poder verse por el receptor, podemos guardarla o compartirla. Para que todo esto suceda, habitualmente vamos a necesitar un software específico que gestione la webcam y pueda realizar la retransmisión del vídeo capturado, aunque podríamos hacerlo sin ese software.
HTML5 y su método getUserMedia() nos permite mediante Javascript, el acceso a una previsualización del vídeo que muestra nuestra webcam, por lo que si la aplicación que estamos creando en nuestra web necesita acceder a ésta para emitir vídeo, lo podremos realizar fácilmente.
Método getUserMedia() de la API MediaDevices
Ates de aprender cómo manipular la cámara con Javascript, entremos un poco en materia con algunos conceptos básicos. Este método nos va a ayudar a crear MediaStream con los tipos multimedia solicitados. Lo primero que deberíamos hacer es usar getUserMedia para solicitar al usuario los permisos correspondientes al uso de la webcam y a partir de ahí podremos, mediante HTML5 y Javascript, capturar una imagen.
Código HTML a implementar
Vamos a crear un HTML que embeba el vídeo y muestre una imagen.
Elemento
Con él embebemos el vídeo en la página.
Botón de captura
Es el botón que ejecuta la acción de la captura.
Elemento
Dibuja la imagen que captura la webcam en ese momento. A continuación, el código con el orden que hemos explicado:
<!—Aquí el video embebido de la webcam --> <div class='video-wrap'> <video id='video' playsinline autoplay></video> </div> <!—El elemento canvas --> <div class='controller'> <button id='snap'>Capture</button> </div> <!—Botón de captura --> <canvas id='canvas' width='640' height='480'></canvas>
El Código Javascript a implementar
Por último, a la hora de manipular cámara con Javascript tendremos que escribir el código que gestione la transmisión a la página que hemos creado.
'use strict';
const video = document.getElementById('video');
const snap = document.getElementById('snap');
const canvas = document.getElementById('canvas');
const errorMsgElement = document.querySelector('span#errorMsg');
const constraints = {
audio: true,
video: {
width: 800, height: 600
}
};
// Acceso a la webcam
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
// Correcto!
function handleSuccess(stream) {
window.stream = stream;
video.srcObject = stream;
}
// Load init
init();
// Dibuja la imagen
var context = canvas.getContext('2d');
snap.addEventListener('click', function() {
context.drawImage(video, 0, 0, 640, 480);
});
Vamos a explicar algunas cosas del código anterior: utilizaremos constantes que definirán el ancho y alto del vídeo que queremos mostrar en pantalla.
- Con la función init() iniciaremos la API del método getUserMedia().
- La transmisión del vídeo de la webcam lo haremos con la función handleSuccess().
- Con la API del canvas podremos dibujar la captura de la webcam.
Conclusión
Como hemos visto, las APIs que tiene HTML5, en ocasiones, pueden ser suficientes para crear aplicaciones independientes del dispositivo y sencillas de desplegar.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.