JavaScript: tomando una foto de la cámara en una web

2020-04-13 - Categorías: General / JavaScript
Logo de Javascript

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é.

18 respuestas a “JavaScript: tomando una foto de la cámara en una web”

  1. frankespiedra dice:

    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

    • Jnj dice:

      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!

  2. jose dice:

    gracias me funcion bien

  3. Amanda dice:

    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

    • Jnj dice:

      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.

  4. Josué Gómez dice:

    Hay manera de colocar unas líneas guia, me refiero que siempre aparezcan unas lineas para que el usuario pueda centrar el objetivo.

    • Jnj dice:

      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.

  5. Enrique dice:

    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

    • Jnj dice:

      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.

  6. Max dice:

    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

  7. Aguedo Alberto dice:

    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 🙂

  8. mariana dice:

    woooo te agradezco,realmente funciono,mil gracias!!

  9. Oscar dice:

    Genial, al grano y funcionando..
    Muchas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.