ToRo Blog

Capturar imagen de webcam con flash

… y almacenarla en un servidor.

El proceso es muy sencillo, básicamente utilicé código de varios sitios donde dan tips y algunas cosas de la documentación, esto es funcional para flash 8 profesional (o al menos es lo que yo utilicé) y ActionScript 2.0.

1. Lo primero es crear una película (Menú Archivo / Nuevo / Documento de flash).

2. En la parte derecha dar click en el menú de biblioteca y crear nuevo video, dejar marcado que sea controlado por ActionScript

3. Arrastrar y crear una instancia nueva en la Capa 1, llamar a esa instancia webcam, posicionarse en el fotograma 1 y copiar y pegar el siguiente código en la ventana de acciones (pulsando F9 sale)

theCam = Camera.get(); //obtenemos la cámara
theCam.setQuality(8192,95); //calidad de la imágen
theCam.setMode(160,120,5);
webcam.attachVideo(theCam);
import flash.display.BitmapData;
//creamos pelicula nueva para almacenar la imagen capturada
bitmapData = new BitmapData(160, 120, true, 0);
this.createEmptyMovieClip("bmp1", this.getNextHighestDepth());
bmp1.attachBitmap(bitmapData, 2, "auto", true);
bmp1._x = 170;snap._y = 0;
enviar.enabled = false;
enviar._alpha = 10;
preloader.text = "";
//creamos dos botones (pueden ser predefinidos), uno para capturar y otro para almacenar
snapshot_btn.onPress = function () {
	bitmapData.draw(webcam);
	//output();
	enviar._alpha = 100;
	enviar.enabled = true;
}
enviar.onPress = function  () {
	preloader.text = "Enviando...";
	enviar.enabled = false;
	output();
}
//función que obtiene la imagen y la envía al servidor (en este caso al archivo almacena.php)
function output() {
	snap = new BitmapData(bmp1._width,bmp1._height,true,0);
	snap.draw(bmp1);
	var pixels:Array = new Array();
	var w:Number = snap.width;
	var h:Number = snap.height;
	for (var a=0; a<=w; a++) {
		for (var b=0; b<=h; b++) {
			var tmp = snap.getPixel(a,b).toString(16);
			pixels.push(tmp);
		}
	}
	var output:LoadVars = new LoadVars();
	output.img = pixels.toString();
	output.height = h;
	output.width = w;
	snap.dispose();
	output.send("almacena.php","","POST");
}

4. Exportamos la película y la subimos al servidor, la imagen capturada se enviará a almacena.php por el método POST.

5. Recibimos el contenido del swf en el archivo almacena.php que básicamente puede contener:

<?php
   if(isset($_POST['img']) && !empty($_POST['img'])) {
      $file = uniqid().".jpeg";
      $data = explode(",", $_POST['img']);
      $width = $_POST['width']; $height = $_POST['height'];
      $image=imagecreatetruecolor($width, $height) or die('no hay GD!');
      $background = imagecolorallocate($image, 0, 0, 0);
      $i = 0;
      for($x=0; $x<=$width; $x++){
         for($y=0; $y<=$height; $y++){
            $int = hexdec($data[$i++]);
            $color = ImageColorAllocate($image, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
            imagesetpixel($image, $x, $y, $color);
         }
      }
      /* almacenamos la imagen, si prefiriésemos mostrarla
         usaríamos el siguiente código:
         Header('Content-type: image/jpeg');
         ImageJPEG($image);
         ImageDestroy($image);
      */
      ImageJPEG($image,$file,95);//genera un jpg con resolución del 95%
      imagedestroy($image);
   } else die("error");
?>

Como se ve, es muy sencillo hacerlo, nomás que no he podido almacenar una imagen mas de 160x120 pixeles… no se si sea una limitante de la versión de Flash porque debo confesar que no soy experto en, ni me gusta Macromedia Adobe Flash. El ejemplo del funcionamiento está en MexicoDiario y en Ymipollo funcionando.

Actualización: hice algunos cambios y ya pude capturar la imagen mas grande… publiqué el .fla. ojalá le sirva a alguno ;-).

Almacenado en Php, Programacion, Flash, Actionscript [ Enlace | Tres comentarios ] del.icio.us Estrella este post