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 equipo. 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 puro HTML y JavaScript sin librerías.
Simplemente se pinta en la caja 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.
Una continuación a este post, es este otro sobre cómo guardar una captura de cámara en el servidor.
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é.
esta perfecto el script, quisiera saber como descargar la imagen con la etiqueta (nombre) sea la fecha y hora para que sean nombres unicos , asi poder caalogarlas individuales
gracias
Muchas gracias Frank. En la línea:
link.download = ‘capturedImage.png’;
..le puedes poner el nombre que consideres. Quizá jugando con la función Date() o Date.now().
Un saludo Frank!
gracias me funcion bien
Gracias por dejar un comentario José!
Hola JnJ
Lo felicitoooo….
Funciona muy bien pero en el localhost….. cuando lo subo a la web…. no me funciona….
debo modificar algo en código?
Si puedes darme una manita….mil gracias
Hola Amanda!
Muchas gracias por el comentario! lo estoy probando subiendo el código fuente al server ahora mismo, y creo que funciona bien: https://jnjsite.com/test/
Quizá has denegado el acceso a la cámara, en el navegador, al site donde lo estas construyendo?¿
Saludos.
Hay manera de colocar unas líneas guia, me refiero que siempre aparezcan unas lineas para que el usuario pueda centrar el objetivo.
Hola Josué!
Sí, en teoría le podrías poner un div que flote encima del canvas con CSS. Y en ese div que flota encima, esa rejilla con una imagen o más estilo CSS.
Muy bueno el script pero tengo una duda, soy nuevo en esto de javascript y html y yo puse tu código sobre un modal en una pagina que estoy diseñando el script lo saque en un archivo JS y lo puse aparte hasta todo funciona muy bien, pero tengo un detalle cuando doy clic en el botón CAPTURE me toma la foto pero si ya tengo lleno mi modal con mis datos requeridos me cierra en automático el modal y me guarda mi formulario pero no me deja guardar la foto y no la guarda como puedo «separar» los botones de tu código de mi modal para que mi modal funcione como lo hace hasta que de clic en el botón correspondiente?, muchas gracias
Hola Enrique! De nada, muchas gracias por tu comentario.
Lo lamento pero no puedo ayudarte sin verlo, estaría bien si pudieras compartir tu código en alguna herramienta online como Codepen, Codepac o Github Gist.
Un saludo.
Buenas tardes, te agradezco mucho, funciona muy bien tu script, pero por favor me podrías apoyar con una duda, ¿Cómo puedo pasar la imagen de Javascript a PHP? Quisiera guardar la imagen en una carpeta predefinida. Muchas gracias. Saludos
Buenas tardes Max!
Tiene un poco de historia hacer eso. Hay aquí una continuación de este post con eso:
https://jnjsite.com/javascript-php-capturando-y-enviando-imagen-de-la-camara/
Muchas gracias por dejar un comentario!
Saludos.
Muy buena, en el trabajo me pidieron algo similar y esto como base y guía me va a ayudar mucho, muchas gracias, creo que le daré una visita mas extensa a esta pagina a ver si veo algo interesante 🙂
Perfect 👍
Gracias por dejar un comentario. Saludos Alberto!