Acceder a la webcam y capturar imagen utilizando HTML5 y Javascript

Solemos utilizar las webcam para retransmitir vídeo en tiempo real a través de nuestro ordenador. Esta retransmisión puede verse, guardarse e incluso compartirse mediante Internet. Por regla general, necesitamos un software para acceder a la webcam y retransmitir vídeo. Pero también puedes retransmitir vídeo en sitios web sin necesidad de utilizar software de terceros.

El método getUserMedia() de HTML5, nos ayudará a mostrar una previsualización del vídeo de la webcam mediante Javascript. Si tu aplicación necesita acceder a la webcam para retransmitir vídeo, puedes hacerlo de forma sencilla con HTML5 y Javascript con este tutorial. En definitiva, te enseñaremos a acceder a la webcam y capturar imagen del vídeo utilizando HTML5 y Javascript.

getUserMedia() API

El método getUserMedia() de la API MediaDevices te ayuda a producir un MediaStream que contenga los tipos multimedia solicitados. Puedes utilizar getUserMedia para abrir una ventana de dialogo que solicite permisos al usaurio para poder utilizar su webcam y así capturar una imagen mediante HTML5 y Javascript.

Código HTML

El siguiente código HTML embebe un elemento vídeo y dibuja una imagen en la página.

• Utilizaremos el elemento <video> de HTML5 para embeber un vídeo en la página
• Utilizaremos el elemento <canvas> para dibujar la captura del vídeo de la webcam en la página
• El boton (snap) ejecutará la generación de la captura de imagen sobre el vídeo

<!-- Stream video via webcam -->
<div class="video-wrap">
    <video id="video" playsinline autoplay></video>
</div>

<!-- Trigger canvas web API -->
<div class="controller">
    <button id="snap">Capture</button>
</div>

<!-- Webcam video snapshot -->
<canvas id="canvas" width="640" height="480"></canvas>

Código Javascript

El siguiente Javascript gestiona el proceso de transmisión de video a través de la cámara web en la página web.

• Las constantes definen el ancho y alto del vídeo
• La función init() inicializa la API getUserMedia()
• La función handleSuccess() transmite el vídeo de la webcam en el elemento HTML
• Utilizamos la API del canvas para dibujar la captura de la webcam

'use strict';

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
  audio: true,
  video: {
    width: 1280, height: 720
  }
};

// Access webcam
async function init() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
}

// Success
function handleSuccess(stream) {
  window.stream = stream;
  video.srcObject = stream;
}

// Load init
init();

// Draw image
var context = canvas.getContext('2d');
snap.addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});