New question

Question:

Date: 05-11-2019 19:21:43 (In Spanish)

WEBCAM[Unresolved]

Buenas noches a todos
Pregunta

¿Alguien que tenga un codigo PHP para sacar fotos WEBCAM y guardarlas en una carpeta?

desde ya muy agradecido
Tags: PHP Votes: -1 - Answers: 1 - Views: 6 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 06-11-2019 09:18:29 Buenas tardes
    Buscando en la WEB, he encontrado un script que es muy util para los fines que necesito.
    Seguramente, se le puede mejorar la estetica, pero en mi caso el tema era el funcionamiento.
    No solo tiene como capturar fotos, sino que tambien videos y audio.

    La fuente es: Parzibyte's blog
    Linck: https://parzibyte.me/blog/2017/11/22/tomar-foto-javascript-camara-guardarla-servidor-php/

    A continuacion, dejo los 3 script que dan el funcionamiento.
    a) index.html
    b) script.js
    c) guardar_foto.php

    ---------------------------------------------------------------------------------------------------------------------------------------

    a) index.html

    <!DOCTYPE html>
    <html lang="es">
    
    <head>
    
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<title>Tomar foto</title>
    	<style>
    		@media only screen and (max-width: 350px) {
    			video {
    				max-width: 100%;
    			}
    		}
    	</style>
    
    </head>
    
    		<body>
    			<h1>Estudio Fotografia WEBCAM</h1>
    			<p>
    				
    			</p>
    			<h1>Dispositivo</h1>
    
    			<div style="height: 180px; width: 100%;">
    				<select name="listaDeDispositivos" id="listaDeDispositivos"></select>
    				<button id="boton">Tomar foto</button>
    				<p id="estado"></p>
    			</div>
    			<br>
    			<video muted="muted" id="video" style="height: 350px; width: 100%;"></video>
    			<canvas id="canvas" style="display: none;"></canvas>
    		</body>
    
       <script src="script.js"></script>
    
    </html>


    -------------------------------------------------------------------------------------------------------------------

    b) script.js

    const tieneSoporteUserMedia = () =>
        !!(navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia)
    const _getUserMedia = (...arguments) =>
        (navigator.getUserMedia || (navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia) || navigator.webkitGetUserMedia || navigator.msGetUserMedia).apply(navigator, arguments);
    
    // Declaramos elementos del DOM
    const $video = document.querySelector("#video"),
        $canvas = document.querySelector("#canvas"),
        $estado = document.querySelector("#estado"),
        $boton = document.querySelector("#boton"),
        $listaDeDispositivos = document.querySelector("#listaDeDispositivos");
    
    const limpiarSelect = () => {
        for (let x = $listaDeDispositivos.options.length - 1; x >= 0; x--)
            $listaDeDispositivos.remove(x);
    };
    const obtenerDispositivos = () => navigator
        .mediaDevices
        .enumerateDevices();
    
    // La función que es llamada después de que ya se dieron los permisos
    // Lo que hace es llenar el select con los dispositivos obtenidos
    const llenarSelectConDispositivosDisponibles = () => {
    
        limpiarSelect();
        obtenerDispositivos()
            .then(dispositivos => {
                const dispositivosDeVideo = [];
                dispositivos.forEach(dispositivo => {
                    const tipo = dispositivo.kind;
                    if (tipo === "videoinput") {
                        dispositivosDeVideo.push(dispositivo);
                    }
                });
    
                // Vemos si encontramos algún dispositivo, y en caso de que si, entonces llamamos a la función
                if (dispositivosDeVideo.length > 0) {
                    // Llenar el select
                    dispositivosDeVideo.forEach(dispositivo => {
                        const option = document.createElement('option');
                        option.value = dispositivo.deviceId;
                        option.text = dispositivo.label;
                        $listaDeDispositivos.appendChild(option);
                    });
                }
            });
    }
    
    (function() {
        // Comenzamos viendo si tiene soporte, si no, nos detenemos
        if (!tieneSoporteUserMedia()) {
            alert("Lo siento. Tu navegador no soporta esta característica");
            $estado.innerHTML = "Parece que tu navegador no soporta esta característica. Intenta actualizarlo.";
            return;
        }
        //Aquí guardaremos el stream globalmente
        let stream;
    
    
        // Comenzamos pidiendo los dispositivos
        obtenerDispositivos()
            .then(dispositivos => {
                // Vamos a filtrarlos y guardar aquí los de vídeo
                const dispositivosDeVideo = [];
    
                // Recorrer y filtrar
                dispositivos.forEach(function(dispositivo) {
                    const tipo = dispositivo.kind;
                    if (tipo === "videoinput") {
                        dispositivosDeVideo.push(dispositivo);
                    }
                });
    
                // Vemos si encontramos algún dispositivo, y en caso de que si, entonces llamamos a la función
                // y le pasamos el id de dispositivo
                if (dispositivosDeVideo.length > 0) {
                    // Mostrar stream con el ID del primer dispositivo, luego el usuario puede cambiar
                    mostrarStream(dispositivosDeVideo[0].deviceId);
                }
            });
    
    
    
        const mostrarStream = idDeDispositivo => {
            _getUserMedia({
                    video: {
                        // Justo aquí indicamos cuál dispositivo usar
                        deviceId: idDeDispositivo,
                    }
                },
                (streamObtenido) => {
                    // Aquí ya tenemos permisos, ahora sí llenamos el select,
                    // pues si no, no nos daría el nombre de los dispositivos
                    llenarSelectConDispositivosDisponibles();
    
                    // Escuchar cuando seleccionen otra opción y entonces llamar a esta función
                    $listaDeDispositivos.onchange = () => {
                        // Detener el stream
                        if (stream) {
                            stream.getTracks().forEach(function(track) {
                                track.stop();
                            });
                        }
                        // Mostrar el nuevo stream con el dispositivo seleccionado
                        mostrarStream($listaDeDispositivos.value);
                    }
    
                    // Simple asignación
                    stream = streamObtenido;
    
                    // Mandamos el stream de la cámara al elemento de vídeo
                    $video.srcObject = stream;
                    $video.play();
    
                    //Escuchar el click del botón para tomar la foto
                    //Escuchar el click del botón para tomar la foto
                    $boton.addEventListener("click", function() {
    
                        //Pausar reproducción
                        $video.pause();
    
                        //Obtener contexto del canvas y dibujar sobre él
                        let contexto = $canvas.getContext("2d");
                        $canvas.width = $video.videoWidth;
                        $canvas.height = $video.videoHeight;
                        contexto.drawImage($video, 0, 0, $canvas.width, $canvas.height);
    
                        let foto = $canvas.toDataURL(); //Esta es la foto, en base 64
                        $estado.innerHTML = "Enviando foto. Por favor, espera...";
                        fetch("./guardar_foto.php", {
                                method: "POST",
                                body: encodeURIComponent(foto),
                                headers: {
                                    "Content-type": "application/x-www-form-urlencoded",
                                }
                            })
                            .then(resultado => {
                                // A los datos los decodificamos como texto plano
                                return resultado.text()
                            })
                            .then(nombreDeLaFoto => {
                                // nombreDeLaFoto trae el nombre de la imagen que le dio PHP
                                console.log("La foto fue enviada correctamente");
                                $estado.innerHTML = `Foto guardada con éxito. Puedes verla <a href='./${nombreDeLaFoto}'> aquí</a>`;
                            })
    
                        //Reanudar reproducción
                        $video.play();
                    });
                }, (error) => {
                    console.log("Permiso denegado o error: ", error);
                    $estado.innerHTML = "No se puede acceder a la cámara, o no diste permiso.";
                });
        }
    })();


    ---------------------------------------------------------------------------------------------------------------------------------------

    c) guardar_foto.php

    <?php
    
    //$página_inicio = file_get_contents('http://www.example.com/');
    $imagenCodificada = file_get_contents("php://input"); //Obtener la imagen
    if(strlen($imagenCodificada) <= 0) exit("No se recibió ninguna imagen");
    //La imagen traerá al inicio data:image/png;base64, cosa que debemos remover
    $imagenCodificadaLimpia = str_replace("data:image/png;base64,", "", urldecode($imagenCodificada));
    
    //Venía en base64 pero sólo la codificamos así para que viajara por la red, ahora la decodificamos y
    //todo el contenido lo guardamos en un archivo
    $imagenDecodificada = base64_decode($imagenCodificadaLimpia);
    
    //Calcular un nombre único
    $nombreImagenGuardada = "./foto_capturada/nombre_" ."aca pongo el nombre xxxx". uniqid() . ".png";
    
    //Escribir el archivo
    
    /*                    "./foto_capturada/foto_" . uniqid() . ".png";
    $fichero = 'gente.txt';
    // Abre el fichero para obtener el contenido existente
    $actual = file_get_contents($fichero);
    // Añade una nueva persona al fichero
    $actual .= "John Smith\n";
    // Escribe el contenido al fichero
    file_put_contents($fichero, $actual);
    
    */
    
    file_put_contents($nombreImagenGuardada, $imagenDecodificada);
    
    //Terminar y regresar el nombre de la foto
    exit($nombreImagenGuardada);
    ?>
      Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In