La idea es sencilla, conectas con la webcam de tus usuarios, les haces una foto y la envías a una galería donde se pueden ver los caretos de tus visitantes. La implementación es casi tan sencilla como la teoría y el resultado es increíble y original.
El sistema es el mismo que utilizaba BloggerSnap, un servicio que tuvo un increíble éxito en su lanzamiento y que parece cerrado desde abril. Hace un año estaba por encima del puesto 40.000 en Alexa, seguramente estuvo incluso más alto. Imagino que sería muy complicado mantener el coste del ancho de banda con tanta popularidad. Hace un par de años estuvimos a punto de lanzar un servicio similar y lo desestimamos ya que no veíamos la manera de monetizarlo mientras que, a poco que tuviese éxito, los gastos se dispararían.
En un escenario normal dependerías de software que el usuario tendría que instalar para que se hiciese la foto y posteriormente te la enviase, con lo cual no conseguirías el objetivo de la instantaneidad, pero existe una solución que permite hacerlo todo mediante una aplicación online: Flash, en nuestro caso Flex 😛 .
La potencia de la plataforma Flash en el tratamiento de audio y vídeo va mucho más allá de lo que pueda parecer y permite crear aplicaciones multimedia avanzadas con participación del usuario de manera bastante rápida. Si además dispones de dinero suficiente, puedes combinarlo con Flash Media Server y los límites los pondrá tu imaginación. Otro día crearemos un videochat 😉 .
La clave es el acceso a la cámara y al micrófono del equipo que permite la plataforma Flash previa autorización del usuario, obviamente. Si lo autorizas, el player conectará con tu webcam y comenzará a mostrar el vídeo de la misma y, si la aplicación lo requiere, enviarlo a otros usuarios. Lo mismo se puede hacer con el audio.
En el taller de hoy haremos una pequeña aplicación para crear una galería de fotos instantáneas en web/blog. Los usuarios que lo deseen pueden hacerse la foto con su propia webcam y ésta quedará alojada en la galería. Simple pero llamativo.
La aplicación constará de dos partes:
- Zona de capturas: una aplicación desarrollada en Flex que permitirá a los usuarios hacerse fotos sin más necesidad que tener una webcam.
- Galería: una sencilla página html donde se listan todas las fotos que se han hecho los usuarios.
Capturando imágenes
Aunque pueda parecer algo muy complicado veremos a continuación que la facilidad de conectar con la webcam en Flex es impresionante.
Nuestra aplicación consta de dos únicos componentes, una imagen y un botón. La imagen nos aportará simplemente algo de estilo y el botón lo utilizaremos de disparador de nuestra cámara de fotos online.
Hay tres tareas bien diferenciadas:
- Conectar con la webcam.
- Capturar la foto.
- Enviarla a nuestro servidor.
Conectar con la webcam
Con este sencillo código estaremos visualizando en nuestra aplicación la webcam que el usuario tenga conectada a su equipo.
private function insertWebcamVideo():void{
var videoHolder:UIComponent = new UIComponent();
if(Camera.names.length>0){
camera = Camera.getCamera();
if(camera==null || camera.width==-1 || camera.height==-1 || camera.fps==-1){
Alert.show("Lo sentimos, no tienes cámara", "Error", 4, null, null, iconoAlerta);
captura.enabled=false;
camera=null;
}else{
camera.addEventListener(StatusEvent.STATUS, cerrar);
video = new Video(camera.width, camera.height);
video.attachCamera(camera);
videoHolder.addChild(video);
videoHolder.width=video.width;
videoHolder.height=video.height;
videoHolder.visible=true;
videoHolder.y=0;
caja.addChildAt(videoHolder, 0);
caja.removeChild(fotillo);
}
}else{
Alert.show("Lo sentimos, no tienes cámara", "Error", 4, null, null, iconoAlerta);
captura.enabled=false;
}
//Security.showSettings(SecurityPanel.CAMERA);
}
Tan fácil como comprobar primero si tiene webcam (sino, obviamente, no puede hacerse fotos 😛 ) y posteriormente añadirla a un componente de vídeo que habremos incorporado a un UIComponent para mostrarlo en la aplicación. En este momento ya tenemos la cámara del usuario en vivo en la aplicación.
Capturar la foto
Teniendo el flujo de vídeo en la aplicación, queremos que cuando el usuario presione el botón “Capturar” se le haga la foto.
private function getSnapshot():void{
var snapshot:BitmapData = new BitmapData(video.width, video.height, true);
var m : Matrix = new Matrix();
snapshot.draw(video, m);
var jpegEnc:JPGEncoder=new JPGEncoder(75);
var jpegDat:ByteArray = jpegEnc.encode(snapshot);
var img_src:String = base64Encode(jpegDat);
if(img_src.length>1600){
//imagen correctamente capturada
}else{
Alert.show("La imagen capturada parece estar vacía", "Error", 4, null, null, iconoAlerta);
}
}
Con este otro código conseguimos este efecto. Se obtiene una captura bit a bit del objeto de vídeo y se comprime en JPEG para enviarla al servidor. ¡Ya tenemos la foto hecha!
Enviar la foto
Utilizaremos un HTTPService para enviar por POST la foto que hemos realizado y que guardaremos en una base de datos. Añadimos a la función anterior el código para enviar la foto.
private function getSnapshot():void{
var snapshot:BitmapData = new BitmapData(video.width, video.height, true);
var m : Matrix = new Matrix();
snapshot.draw(video, m);
var jpegEnc:JPGEncoder=new JPGEncoder(75);
var jpegDat:ByteArray = jpegEnc.encode(snapshot);
var img_src:String = base64Encode(jpegDat);
if(img_src.length>1600){
var temp:Object=new Object();
temp.imagen=img_src;
httpService.send(temp);
cargandoWindow = ventanaEspera(PopUpManager.createPopUp(this as DisplayObject, ventanaEspera, true));
}else{
Alert.show("La imagen capturada parece estar vacía", "Error", 4, null, null, iconoAlerta);
}
}
<mx:httpservice id="httpService" showbusycursor="false" useproxy="false" method="POST" resultformat="text" url="upload.php" result="onResult()"
fault="onHTTPFault(event)" />
Ya está. El script upload.php de tu servidor recibirá por POST la variable “imagen” con el contenido de tu foto. Sólo habrá que guardarla en un archivo y habrás terminado la parta más ¿complicada? del proyecto.
if($_POST['imagen'] & strlen($_POST['imagen'])!=0 & strlen($_POST['imagen'])>1600){
$bmd=base64_decode($_POST['imagen']);
$im = fopen("fotos/foto.jpg",'w');
fwrite($im,$bmd);
fclose($im);
}
Antes de guardar la imagen en disco podrías añadir un registro a una base de datos que te permita generar después la galería. Esa parte queda a tu elección.
Generando la galería
Esta es la parte fácil, simplemente creas un script PHP (o en el lenguaje que prefieras) que liste las fotos que has ido guardando en la base de datos paginando como creas oportuno. Creo que sobran más comentarios para algo tan fácil.
Conclusiones
Hoy hemos visto cómo de una manera extremadamente rápida y sencilla se puede conectar con la webcam (y el micrófono) de los usuarios. Sólo hemos visto como hacer una fotografía instantánea de lo que se está viendo a través de la cámara, pero el sistema abre un inmenso mundo de posibilidades.
Descárgate aquí el código del proyecto.