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

[AlanChavez]

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:

package{
    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:

<?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: