El componente PhotoCam de Primefaces: hazte una foto con la webcam.

El componente PhotoCam de Primefaces: hazte una foto con la webcam.


0. Índice de contenidos.


1. Introducción

Primefaces es una librería de componentes para JSF. Con la gran cantidad de componentes que cuenta esta librería podemos añadir muchísima funcionalidad en el front-end de nuestras aplicaciones.

Muchas aplicaciones, cuentan con una sección de registro de nuevos usuarios. A menudo, en dicha sección, se ofrece la posibilidad al usuario de subir una foto o hacerse una con la webcam. En este tutorial vamos a ver cómo preparar nuestra aplicación JSF con Primefaces para que permita que los usuarios utilicen su webcam para hacerse una foto gracias al componente PhotoCam. Nótese que este componente estará disponible a partir de la versión 3.1 de Primefaces y, de momento, no es compatible con Internet Explorer (¿todavía hay alguien que se sorpenda?).


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 8GB DDR3).
  • Sistema Operativo: Mac OS Snow Leopard 10.6.7
  • Entorno de desarrollo: Eclipse 3.7 Indigo.
  • JSF 2.1.3.
  • Primefaces 3.1-SNAPSHOT.
  • Mozilla Firefox 9.

3. El problema.

Supongamos que tenemos que hacer una pequeña aplicación donde la gente pueda dar de alta los datos de su mascota. Serán necesarios los siguientes datos para poder registar al animal en el sistema:

  • El nombre de la mascota.
  • Su edad.
  • Una foto hecha por la webcam del ordenador.

Cualquiera que se haya pegado un poco con JSF y/o Primefaces sabrá que crear un formulario donde se recojan los dos primeros datos no es ningún problema pero, ¿y la foto tomada desde la webcam?

Por suerte el componente PhotoCam de Primefaces nos da una solución a este problema.


4. Manejando la petición.

Lo primero que haremos será crear nuestro controlador que, manejará las peticiones: fotos tomadas desde la webcam, nombre y edad de la mascota.


5. El formulario.

Pues bien, lo siguiente será crear el formulario de recogida de datos:

Este sería el aspecto que presentaría el formulario:

Pulsando sobre la pequeña imagen que aparece a continuación del literal “Foto” nos aparecerá un cuadro de diálogo que nos permitira tomarnos la foto desde la webcam.

Nos aparecerá una advertencia de seguridad para que demos permiso a la aplicación a utilizar nuestra webcam. Como puede verse, el componente PhotoCam hace uso de “Adobe Flash Player”, por lo que es necesario tener el plugin instalado en nuestro navegador. Una vez hayamos permitido el acceso a la cámara, estaremos listos para tomar la instantánea.

Y el siguiente paso es, ponernos guapos (o a nuestra mascota) y pulsar el botón “Hacer Foto”. Después de llevarme un par de bocados de mi perro, lo acabé consiguiendo :-S


6. ¿Qué ha pasado?.

Pues lo que ha pasado es muy sencillo, el componente p:photoCam enviará la imagen capturada a nuestro ManagedBean una vez se haya pulsado el botón “Hacer foto”. Se producirá un evento que será capturado con el método oncapture, que recibirá un elemento CaptureEvent con los datos de la imagen como array de bytes.

Lo que estamos haciendo es guardar esa imagen en disco y actualizar la vista (elemento fotoLink) para que muestre la imagen tomada que será accesible desde http://loquesea/photocam/foto.png. Posteriormente, cuando el usuario pulse el botón “Guardar”, se invocará al método guardarDatos donde finalizaremos el proceso de registro.


7. Referencias.


8. Conclusiones.

En este tutorial hemos visto cómo funciona el componente PhotoCam de la librería de Primefaces para JSF. Como hemos apreciado es realmente sencillo utilizar este componente para utilizarlo como controlador de nuestra webcam. Creedme si os digo que casi me ha costado más conseguir que mi perro se estuviese quieto delante de la cámara que escribir este tutorial :-)

No obstante, debemos recordar que este componente no estará disponible hasta la versión 3.1. Además, vuelvo a remarcar que no funciona en Internet Explorer por lo que, si estamos pensando en usarlo en una aplicación, deberíamos informar al usuario de que cambie de navegador si está usando IE y quiere hacerse una foto usando la webcam.

Espero que este tutorial os haya sido de ayuda. Un saludo.

Miguel Arlandy

marlandy@autentia.com

Twitter: @m_arlandy