[Demo] Facekat, espectacular experimento de Opera

Hace poco Opera publicaba su site: Shiny Demos. En esta responsive web (comprobarlo cambiando el tamaño de la ventana) podemos ver varios ‘abrebocas’, demos que muestran el potencial conjugando lo mejor de los navegadores, HTML, CSS y Javascript.

Opera está ganando peso, es decir, la batalla que se libra entre los fabricantes de navegadores desarrollando sitios como el que comentamos, o Chrome Experiments, o  IE10 Test Drive, o DemoStudio de Mozilla… A la comunidad de desarrolladores este empujón nos viene fenomenal. Encontramos sitios de referencia que mostrar, son demos que esperan que probemos, analicemos, copiemos, adaptemos… etc… Hay que aprender, y con tanta demanda en el mercado y el exagerado crecimiento previsto en Mobile, hay que aprender rápido.

Facekat

Ya conocemos lo que es Kinect, el sensor de la video consola XBox.
Muchos desarrolladores han creado brillantes interfaces controladas a través de movimientos del cuerpo detectados con Kinect.

Sin embargo, aún no todos tenemos un dispositivo de estos en casa y no es fácil desarrollar algo que no puedes probar.

Por eso, nos encanta este juego. Se emplea WebRTC para detectar la webcam del usuario en tiempo real y controlar una aeronave mediante la detección del rostro, de esta manera, cuando mueves la cara de un lado a otro tu nave se desplaza obedeciendo a tus movimientos. ¿Cómo lo ves? Bien,  ¿no?.

Importante: Igual accedes a la demo, o ya has accedido y no te funciona, quizás no estás navegando con un navegador compatible. Te vamos a explicar en esta entrada cómo configurar el navegador Chrome, para poder ver los experimentos que se realizan con las últimas tecnologías de desarrollo web, y por qué hay que hacerlo así.

En el siguiente vídeo podéis ver a un colega asiático haciendo una demo:

La funcionalidad WebRTC está en modo experimental, y como hemos mencionado, tenemos que habilitar este nuevo recurso en nuestro navegador. Cuando entramos en el juego el navegador nos avisará de que se está tratando de acceder a nuestra webcam como muestra la imagen.

Una vez que damos acceso a nuestra webcam, se realiza la detección del rosto. Cuando determina la posición pinta una marca de posición, de esta manera cuando mueves la cabeza el puntero también se desplaza marcando tu posición.

El juego es realmente sencillo, tienes que esquivar las bolas que aparecen, poco a poco se va ganando velocidad y si chocas, lo notarás porque la pantalla se pondrá naranja.

Pruébalo!

Pero experimentos al margen, nos tenemos que quedar con el potencial de las interfaces que podríamos crear a partir de la detección de rostros, objetos, códigos, …

Recursos

[EN] [ HTML5 Rocks] Capturando Audio y Video con HTML5 (Actualizado 20 de julio)
[EN] [ W3C Editor’s Draft] Media Capture and Streams (Actualizado 25 de junio)
[EN] [smartjava.org] Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV (abril 2012)

Si queréis una introducción a WebRTC, os recomendamos este video en el Google I/O 2012

De cara al curso que viene, a partir de Septiembre, organizaremos un evento para poder ir generando conocimiento sobre WebRTC. Agradecemos propuestas, ideas, formatos, … ;))
Hasta la próxima!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s