[Tutorial] Como tomar fotos con una camara web desde Flash y procesarla con PHP

AlanChavez · #1 (**permalink**) 22/12/2010, 03:12

Objetivo:
Al finalizar el tutorial, seras capaz de iniciar la camara web de un usuario, tomar un foto, y enviar la foto a un servidor para que sea procesada con PHP

Requisitos:

Adobe Flash CS3
Un servidor LAMP local o remoto.
Codificador JPG as3corelib.

Preparando el ambiente de trabajo:

Crear un archivo Flash ActionScript 3.0 Nuevo

Guarda el archivo creado con cualquier nombre. Yo lo llamare camara.fla.
Crear un archivo ActionScript:

Guardar el archivo ActionScript con la misma ubicación que el archivo anterior. Yo lo llamare camara.as

Regresar al archivo camara.fla, y en el panel de propiedades, en el campo Clase del documento, escribir el nombre (sin la extension) del archivo .as que acabamos de crear. Si estás siguiendo el Tutorial, deberás escribir camara.

Instalando as3corelib JPEG Encoder
Hacer click en el boton Downloads y en el dialogo que aparece, seleccionar la version mas reciente de la libreria. Al 22 de Diciembre del 2010, la version mas reciente es: as3corelib-.93

Descomprimir la libreria en la carpeta de nuestra preferencia.
Tenemos que incluir la libreria en Flash, para que al momento de utilizar el decoder, el compilador de Flash sepa donde encontrar los metodos y parametros que vamos a utilizar, para incluir la libreria sigue los siguientes pasos:

Presiona Ctrl + U o Edicion > Preferencias
En el panel izquierdo, selecciona ActionScript
Presiona el boton Configuracion para ActionScript 3.0
Presiona el boton Buscar Ruta
Selecciona la ruta a tu archivo, hasta la carpeta src.
Ejemplo: %RUTA A TU ARCHIVO%\as3corelib-.93\src
En mi caso: C:\Librerias Flash\as3corelib-.93\src

Crear un boton para disparar la camara
Necesitaremos un boton para tomar la foto. Este boton sera un clip de pelicula, el cual vamos a exportar para ActionScript con el nombre de clase "boton".

La imagen a utilizar es:

Para Crear el Clip de Pelicula

Presionar Ctrl+F8
Nombrar el MovieClip
Hacer click en el botón "Avanzado"
Activar la casilla Exportar para ActionScript
Cambiar el campo de texto "Clase" por "boton" (sin comillas).

ADVERTENCIA: Al hacer click en Aceptar, Flash arrojara un cuadro de dialogo advirtiendo que no se ha encontrado una clase para el elemento. Hagan click en Aceptar en el cuadro de dialogo e ignorenlo, es normal que suceda esto.

Guarda los cambios en el archivo .fla. Si todo se encuentra en su lugar, al hacer click en el icono al lado de la clase del documento

flash deberá cambiarse automaticamente al entorno de programación.

El codigo
Ya estamos listos para empezar a programar. Copia y pega el siguiente codigo en el entorno de programacion. Si seguiste el tutorial al pie de la letra no debes tener ningun problema al compilarlo.

Código actionscript:

Ver originalpackage{
    import flash.media.*;
    import flash.display.*;
    import flash.utils.*;
    import flash.net.*;
    import flash.events.*;
    import com.adobe.images.JPGEncoder;
    
    public class camara extends flash.display.MovieClip
    {
        var ancho:Number = 320;
        var alto:Number = 240;
        var cam:Camera = Camera.getCamera();
        var miWebcam:Video = new Video(ancho,alto);
        var arrayDeBytes:ByteArray = new ByteArray();
        var mapaDeBits:BitmapData = new BitmapData(ancho,alto);
        public var tomarFoto:MovieClip;
 
        public function camara():void
        {
            tomarFoto = new boton();
            tomarFoto.x = ancho/2;
            tomarFoto.y = alto;
            tomarFoto.addEventListener(MouseEvent.CLICK, capturarImagen);
            
            miWebcam.x = 0;
            miWebcam.y = 0;
            miWebcam.attachCamera(cam);
            
            addChild(miWebcam);
            addChild(tomarFoto);
        }
        
        public function capturarImagen(e:Event)
        {
            mapaDeBits.draw(miWebcam);
            var codificador:JPGEncoder = new JPGEncoder(85);
            arrayDeBytes = codificador.encode(mapaDeBits);
            var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
            var req:URLRequest = new URLRequest("crearfoto.php?nombre=foto.jpg");
            req.requestHeaders.push(header);
            req.method = URLRequestMethod.POST;
            req.data = arrayDeBytes;
            navigateToURL(req,"_blank");
        }
        
    }
}

Ahora crea un archivo php llamado crearfoto.php y copia el siguiente codigo:

Código php:

Ver original<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // get bytearray
    $jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
 
    // add headers for download dialog-box
    header('Content-Type: image/jpeg');
    $nombreArchivo = $_GET['nombre'];
    $manejadorArchivo = fopen($nombreArchivo, 'w') or die("No se pudo escribir archivo");
    fwrite($manejadorArchivo,$jpg);
    fclose($manejadorArchivo);
}
?>

ADVERTENCIA. Tienes que tener Apache y PHP instalados para que funcione. Coloca los archivos en las carpetas publicas del servidor para que sean ejecutados correctamente.

Mirame en ejecucion!!

El programa en ejecucion debe producirte la siguiente salida:

Accesa a la siguiente direccion para que puedas ver el script en ejecucion.

Tomar fotos desde Flash

Esta es la ultima foto tomada desde el programa:

AlanChavez · #2 (**permalink**) 22/12/2010, 03:13

El codigo explicado
Las variables:

ancho - El ancho del cuadro donde se mostrara la camara web del usuario.
alto - El alto del cuadro donde se mostrara la camara web del usuario
cam - Variable tipo Camera. Esta es la camara del usuario de la cual se obtendran las imagenes.
miWebcam - Es una variable tipo Video, es la que se encarga de canalizar el canal de video, de nuestra camara instanciada en la variable cam. Recibe dos argumentos, ancho y alto, si estos argumentos no son fijados, toman los valores de fabrica 320 y 240 respectivamente.
arrayDeBytes - Es un array, en donde se almacenara la informacion binaria de la foto capturada.
mapaDeBits - Es una Matriz de bits, contiene la informacion de color y canales de nuestra imagen. Tenemos que transformar esta matriz de bits en un array de bytes para que pueda ser enviada al servidor y escrita a un archivo.
tomarFoto - Es el MovieClip que contiene la imagen que funcionara como boton para mandar la senal de tomar la foto.

Las funciones

camara()
Es el constructor de la clase. En esta funcion vamos a instanciar nuestra imagen, fijamos las coordenadas X,Y de la imagen y le agregamos un inspector de eventos. Basicamente el inspector de eventos transforma nuestro Clip de Pelicula en un Boton, ya que se encuentra monitoreando cuando el usuario hace click sobre el Clip de Pelicula. En el momento en el que el usuario hace click en el Clip de Pelicula, se ejecuta la funcion capturarImagen().

Se fijan las coordenadas X,Y de nuestra camara y vinculamos la camara web del usuario, con la transmision de video en Flash. Finalmente agregamos al usuario el boton y la transmision de video.
capturarImagen()
Aqui es donde la magia sucede. Vamos a utilizar el metodo draw() del objeto mapaDeBits para copiar la informacion de la imagen del objeto miWebcam a la variable mapaDeBits.

Posteriormente, instanciamos la clase JPGEncoder con el nombre codificador y le pasamos el parametro 85. El parametro puede variar entre 0 y 100, y represente la compresion de la imagen JPG. Entre menor sea el numero, mayor la calidad y mayor el peso.

Con ayuda del metodo encode de la clase JPGEncoder, vamos a codificar el mapa de bits de la imagen, a un arreglo binario y almacenarlo en la variable arrayDeBytes.

En las siguientes lineas, se establece el encabezado que contiene el tipo de contenido que vamos a transmitir al servidor, asi como la direccion que se encargara de manipular nuestro archivo. (crearfoto.php)

La foto en el servidor sera creada con el nombre de "foto.jpg" a traves de la variable global "nombre"

En la siguiente linea establecemos el metodo de envio de datos, que sera el metodo POST. Utilizamos este metodo por la cantidad de informacion que puede transmitirse a traves de el.

Finalmente, establecemos que informacion sera enviada y procedemos a enviar la informacion con la funcion navigateToURL.

crearfoto.php
El codigo en este archivo del lado del servidor, se encarga de procesar el arreglo de bytes recibido desde flash, y transformar este array de bytes, en un archivo de imagen JPG.

Primero verificamos que en efecto, estamos recibiendo datos a traves de la URL. Si estamos recibiendo los datos, vamos a crear un archivo cuyo nombre lo recibimos desde la variable "nombre" en la URL. Verificamos que tenemos los permisos para escribir el archivo y procedemos a escribir el archivo almacenado en la variable $jpg.

Los archivos
Finalmente, aqui estan los archivos para que analices el codigo.
Tomar fotos desde Flash y PHP

Notas finales
Una vez con el archivo generado y guardado en el servidor, se pueden hacer muchas cosas con el. Podemos almacenar la ruta en una base de datos o utilizar la imagen como archivo adjunto de un correo electronico.

Este metodo no solamente sirve para camaras web, en realidad cualquier clip de pelicula puede ser enviado a traves del metodo POST para que sea transformado en un archivo JPG. Que la imaginacion sea tu limite!!

En mi pagina personal estoy agregando los mismos tutoriales y pronto empezare a agregar contenido exclusivo!
http://www.alanchavez.com

maria_aps · #3 (**permalink**) 07/02/2011, 16:34

Hola que tal, muy bueno y facil el tutorial, pero sigo los pasos y no me funciona me envia estos errores

por preferencias agrego la librería as3corelib. sera por que uso cs4??? Gracias. Saludos.

AlanChavez · #4 (**permalink**) 07/02/2011, 21:06

La version de Flash, mientras soporte AS3, no tiene nada que ver, por lo que Adobe Flash CS4 puedes descartarlo.

El problema es que no encuentra la libreria as3corelib que llama al metodo JPGEncoder.

Para CS4 debes ir al menu:
Editar->Preferencias (o presionar Ctrl+U)
En el panel izquierdo, selecciona ActionScript, y en el panel derecho al final encontraras una seccion que dice
Lenguaje, haz click en el boton Propiedades para ActionScript 3.0 , y donde dice
Ruta del codigo fuente: (Source path)
haz click en el boton de la carpetita, y buscas la ruta a la libreria
presionas OK, y todo debe estar listo y funcionando.

Ahora una nota especial:

Si te fijas en el ActionScript puse:

import com.adobe.images.JPGEncoder;

Esta linea, te indica la jerarquia de las carpetas, es decir tiene la siguiente estructura:

com->adobe->images->JPGEncoder.as

Cuando descomprimes el archivo as3corelib digamos en la ruta

C:\Usuarios\Administrador\Librerias Flash\

Debes agregar la ruta hasta:
C:\Usuarios\Administrador\Librerias Flash\as3corelib\

Me explico?

maria_aps · #5 (**permalink**) 08/02/2011, 08:17

Gracias por tu respuestas, ya vi mi error en la ventana de preferencias no estaba colocando la ruta en el lugar correcto. Saludos, Gracias excelente tutorial.

Cita:

Iniciado por AlanChavez

La version de Flash, mientras soporte AS3, no tiene nada que ver, por lo que Adobe Flash CS4 puedes descartarlo.

El problema es que no encuentra la libreria as3corelib que llama al metodo JPGEncoder.

Para CS4 debes ir al menu:
Editar->Preferencias (o presionar Ctrl+U)
En el panel izquierdo, selecciona ActionScript, y en el panel derecho al final encontraras una seccion que dice
Lenguaje, haz click en el boton Propiedades para ActionScript 3.0 , y donde dice
Ruta del codigo fuente: (Source path)
haz click en el boton de la carpetita, y buscas la ruta a la libreria
presionas OK, y todo debe estar listo y funcionando.

Ahora una nota especial:

Si te fijas en el ActionScript puse:

import com.adobe.images.JPGEncoder;

Esta linea, te indica la jerarquia de las carpetas, es decir tiene la siguiente estructura:

com->adobe->images->JPGEncoder.as

Cuando descomprimes el archivo as3corelib digamos en la ruta

C:\Usuarios\Administrador\Librerias Flash\

Debes agregar la ruta hasta:
C:\Usuarios\Administrador\Librerias Flash\as3corelib\

Me explico?

dhamaso · #6 (**permalink**) 23/02/2011, 21:19

gracias por tomarte el tiempo para compartir tus conocimientos, ojala pueda poner esto en practica ya que actualmente me solicitaron la creación de una credencial y pues no querian subir imagenes ya tomadas anteriormente si no que queria que se tomaran desde la webcam y se pusiera la foto en generada....

bueno gracias y un saludo.

Jime25 · #7 (**permalink**) 24/02/2011, 08:09

Muy, pero muy buen aporte!!

ceaped · #8 (**permalink**) 21/06/2011, 10:36

Hola AlanChavez
Muy buen tutorial
Tengo para hacerte 2 preguntas:

1. Lo pruebo y me sale este error:

Cita:

Parse error: parse error in C:\wamp\www\foto_con_camara_WEB\crearfoto.php on line 4

2. Cuando lo pruebo el área de la cámara se ve mal, como cuando un TV está malo.

3. Llevo buscando rato por la Web y deseo hacer lo mismo pero grabando video y que se pueda descargar. Es esto posible?.

Gracias por tu ayuda

SirDuque · #9 (**permalink**) 27/09/2011, 19:40

Esto tiene que estar en Aportes de PHP
Increible! sos dios!