1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Solucionado Crear una aplicacione web que user la webcam y envie la foto tomada a la base de datos. Por favor.

Tema en 'Temas Solucionados' comenzado por gyrutech, 12 de Junio de 2015.

Estado del tema:
No está abierto para más respuestas.
  1. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    Hola muchachos y muchachas, cómo están?.
    Hoy vengo a perdir una ayuda es para un proyecto de la universidad y pues solo me ha de falta aprender a hacer esto:

    Quiero crear una aplicación web que me permita usar la webcam para tomar una fotografía y poder enviarla a la base de datos mySQL y dicha fotografía es para cada uno de los productos que se registren. He buscado por la red y encontre la manera de tomar la fotografía, pero no de subirla al servidor. Sí saben cómo, por favor les pido ayuda. Espero sus respuestas, saludos.

    Aquí les dejo el código completo para tomar la fotografia. Lo vi como ejemplo en un sitio web :) y me ha quedado algo así.

    Código (Text):
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Prueba de cámara Web</title>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <style type="text/css">
            .contenedor{ width: 350px; float: left;}
            .titulo{ font-size: 12pt; font-weight: bold;}
            #camara, #foto{
                width: 320px;
                min-height: 240px;
                border: 1px solid #008000;
            }
        </style>
        <script type="text/javascript">
            //Nos aseguramos que estén definidas
    //algunas funciones básicas
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || function(){alert('Su navegador no soporta navigator.getUserMedia().');};
    jQuery(document).ready(function(){
        //Este objeto guardará algunos datos sobre la cámara
        window.datosVideo = {
            'StreamVideo': null,
            'url' : null
        };
       
        jQuery('#botonIniciar').on('click', function(e){
            //Pedimos al navegador que nos de acceso a
            //algún dispositivo de video (la webcam)
            navigator.getUserMedia({'audio':false, 'video':true}, function(streamVideo){
                datosVideo.StreamVideo = streamVideo;
                datosVideo.url = window.URL.createObjectURL(streamVideo);
                jQuery('#camara').attr('src', datosVideo.url);
            }, function(){
                alert('No fue posible obtener acceso a la cámara.');
            });
        });
        jQuery('#botonDetener').on('click', function(e){
            if(datosVideo.StreamVideo){
                datosVideo.StreamVideo.stop();
                window.URL.revokeObjectURL(datosVideo.url);
            };
        });

        jQuery('#botonFoto').on('click', function(e){
            var oCamara,
                oFoto,
                oContexto,
                w, h;
               
            oCamara = jQuery('#camara');
            oFoto = jQuery('#foto');
            w = oCamara.width();
            h = oCamara.height();
            oFoto.attr({'width': w, 'height': h});
            oContexto = oFoto[0].getContext('2d');
            oContexto.drawImage(oCamara[0], 0, 0, w, h);
       
        });
    });
        </script>
    </head>
    <body>
        <div id='botonera'>
            <input id='botonIniciar' type='button' value = 'Iniciar'></input>
            <input id='botonDetener' type='button' value = 'Detener'></input>
            <input id='botonFoto' type='button' value = 'Foto'></input>
        </div>
        <div class="contenedor">
            <div class="titulo">Cámara</div>
            <video id="camara" autoplay controls></video>
        </div>
        <div class="contenedor">
            <div class="titulo">Foto</div>
            <canvas id="foto" ></canvas>
        </div>  
    </body>
    </html>
     
  2. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    762
    Me gusta recibidos:
    312
    Puntos de trofeos:
    63
    Género:
    Hombre
    Hola, te he modificado el código que tienes un poco para poder obtener la base64 de la imagen generada por canvas, luego esta la envió por medio de ajax a un archivo en php que luego procesa la imagen y la sube al servidor, en el php los nombres de los archivos se ponen automáticamente por medio de un random y esto lo puedes aprovechar para usarlo como referencia a la hora de subir a la base de datos los archivos. Tiene que crear las tablas tu y luego hacerle el insert con el random como nombre de referencia del archivo, espero que hayas entendido, acá te adjunto los archivos hechos y estos lo metes en la raíz de tu servidor. Saludos.
    Para muestra un botón, acá puedes ver el funcionamiento de la modificación:
    http://gyazo.com/005540d8b1bbf0edbf853ad7fc72b993
     

    Archivos adjuntos:

  3. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    762
    Me gusta recibidos:
    312
    Puntos de trofeos:
    63
    Género:
    Hombre
    PTT: Esto tendría que estar entre JavaScript y PHP XD
     
  4. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    Muchas gracias amigo, lo revisaré y lo veré. Saludos
     
  5. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    762
    Me gusta recibidos:
    312
    Puntos de trofeos:
    63
    Género:
    Hombre
    De nada, recuerda que te he subido el archivo y está en archivos adjuntos del cual puedes descargar el ejemplo con la respuesta.
     
Estado del tema:
No está abierto para más respuestas.

Comparte esta página