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 necesita acceder a ésta para emitir vídeo, lo podremos realizar fácilmente.

Método getUserMedia() de la API MediaDevices

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 <video>

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 <canvas>

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, tendremos que escribir el código Javascript que gestione la transmisión de la cámara 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.