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.


[HIGHLIGHT="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");
}

}
}
[/HIGHLIGHT]

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


[HIGHLIGHT="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);
}
?>
[/HIGHLIGHT]

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:


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