Pedir presupuesto

Excelente Galería de imágenes con jQuery, Php y CSS y captura de webcam

Excelente tutorial realizado por tutorialzine en el que nos enseñan a crear una galería de imágenes con jQuery, Php y CSS al estilo de la aplicación Mac Photobooth.

Photobooth en PHP

Se trata de una galería en la que nos da la opción de capturar la imagen desde la cámara de nuestra computadora, gracias al uso de Flash, aunque hace uso de webcam.js para envolver el SWF y controlarlo desde Javascript.

Photobooth en PHP

Requerimientos para realizar este tutorial (descargar):

Un tutorial para un nivel de desarrollo más bien avanzado, con el que obtendremos conocimiento de PHP y jQuery.

DEMO

DESCARGA

¿Te ha gustado?, Comparte!!

13 comentarios

  1. Hola excelente información sobre uso de las camaras web, actualmente desarrollo un sistema de clientes y me viene excelente para el momento de capturar la foto del cliente, nomas falta enviar la foto a la base de datos, ya logro generarla y guardarla en imagen jpeg con el codigo facilitado gracias:

    $folder = ‘uploads/’;
    $nombre_archivo = uniqid().’.jpg’;

    $original = $folder.$nombre_archivo;

    // enviamos la imagen jpeg
    $input = file_get_contents(‘php://input’);

    $resultado = file_put_contents($original, $input);
    if (!$resultado) {
    echo ‘{
    «error» : 1,
    «message» : «El guardado fallo checa los permisos en la carpeta.»
    }’;
    exit;
    }

    $info = getimagesize($original);
    if($info[‘mime’] != ‘image/jpeg’){
    unlink($original);
    exit;
    }

    //movemos de la carpeta temporal:
    rename($original,’uploads/original/’.$nombre_archivo);
    $original = ‘uploads/original/’.$nombre_archivo;

  2. Heriberto, te aconsejaría que no guardaras la foto en la base de datos, sino la ruta especifica, es decir, una cadena de texto como por ejemplo –> img/clientes/nombrecliente.jpg

    Una vez lo quieras recuperar, solo tienes que hacer uso de la cadena de texto.

    Saludos.

  3. Gracias por la recomendacion, lo voy a desarrollar de la manera en que me aconsejas, ya que las imagenes estarian muy pesadas para guardarlas en la base de datos,estoy totalmente de acuerdo, aprovecho para mencionarte que el captcha de verificación a veces no funciona bien y tienes que intentar en varias ocasiones para que aparezca el codigo aleatorio, estoy usando google chrome , saludos

  4. me gusto mucho tu codigo pero tengo una duda porque cuando pongo al div camera style=»display none» ya no me vuelve a cargar el flash?

  5. Esta muy bueno el codigo, el problema es que solo me funciona con Firefox, hice pruebas con chrome, safari, opera e internet exploresr pero no captura la foto, si se visualiza pero no captura.

  6. Hola.

    Estoy implementado un sistema en el cual tengo que tomar Fotografias de Articulos, este codigo me funciona pero solo con Chrome pero no con Internet Explorer… alguien a solucionado este problema que pueda auxiliarme.

    Un saludo espero su respuesta…

  7. Quisiera agregar un nombre a la foto, me podrán apoyar para indicarme como colocar un cuadro de texto antes de darle upload y que se guarde con el nombre que ponga dentro del cuadro de texto?

    Se lo agradeceria mucho!!!

  8. en la carpeta assets/js esta script.js
    hay esta una funcion mi pregunta es como hago para que cuando yo apriete enter en una caja de texto tome la foto ya que la funcion esta en el click
    var shootEnabled = false;
    $(‘#formulario’).click(function(){ // este click es lo que quiero cambiar para que cuando oprima enter me tome la foto y me la guande
    if(!shootEnabled){
    return false;
    }

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es