Pequeño howto o codekata para tomar una foto desde la webcam en una web. Con este script incrustado en una web, se le preguntará al usuario por el permiso para acceder a los dispositivos de vídeo y audio disponibles en el dispositivo. Entonces si el usuario da permiso para su uso, se mostrará una caja con el vídeo y audio que se reciben en tiempo real. Sólo se usa HTML y Javascript.
Simplemente se pinta en la caja de video el stream de vídeo con audio en tiempo real. Y tenemos también un canvas en donde podemos pintar una captura de un fotograma del vídeo que estamos viendo. La captura del fotograma que se pinta en el canvas se hace con el botón disponible.
Al grano, el código fuente
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>JnjSite.com: taking photo from camera</title>
</head>
<body>
<h1>JnjSite.com: taking photo from camera</h1>
<p id="errorTxt"></p>
<div>
<video id="theVideo" controls autoplay></video>
<canvas id="theCanvas"></canvas>
</div>
<button id="btnCapture">Capture</button>
<button id="btnDownloadImage">Download captured image</button>
<script type="text/javascript">
var videoWidth = 320;
var videoHeight = 240;
var videoTag = document.getElementById('theVideo');
var canvasTag = document.getElementById('theCanvas');
var btnCapture = document.getElementById("btnCapture");
var btnDownloadImage = document.getElementById("btnDownloadImage");
videoTag.setAttribute('width', videoWidth);
videoTag.setAttribute('height', videoHeight);
canvasTag.setAttribute('width', videoWidth);
canvasTag.setAttribute('height', videoHeight);
window.onload = () => {
navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: videoWidth,
height: videoHeight
}
}).then(stream => {
videoTag.srcObject = stream;
}).catch(e => {
document.getElementById('errorTxt').innerHTML = 'ERROR: ' + e.toString();
});
var canvasContext = canvasTag.getContext('2d');
btnCapture.addEventListener("click", () => {
canvasContext.drawImage(videoTag, 0, 0, videoWidth, videoHeight);
});
btnDownloadImage.addEventListener("click", () => {
var link = document.createElement('a');
link.download = 'capturedImage.png';
link.href = canvasTag.toDataURL();
link.click();
});
};
</script>
</body>
</html>Si el usuario no da permiso entonces mostramos el error en el párrafo con identificador errorTxt. Si ocurre cualquier otro error también mostrará el mensaje de porqué.
