El Blog de Machinarium021

Software libre y tecnología en general.



Tracking.js: Detección de rostros con Javascript

trackingjs-facetracking

WebRTC es una API impresionante, gracias a ella hoy es posible compartir nuestra webcam y microfono sin la necesidad de plugins o lenguajes adicionales. Es ampliamente utilizado en webapps para videollamadas, pero pocas veces es explotado en otros campos.

Desde los inicios de HTML5 y la introducción de WebRTC, se han buscado formas de hacer una web más interactiva, más divertida y con un manejo más natural. El caso clásico es la detección de gestos y rostros en la web. Aunque es entretenido, los pocos esfuerzos que se han realizado en el pasado no están en continuo desarrollo y peor aún, no han sido creados para ser compatibles con todos los navegadores del mercado, puesto que solo eran realizados con un carácter de experimentación, más que en crear una librería para proyectos de producción.

Tracking.js viene a salvar el día

Una interesante librería llamada Tracking.js viene a cambiar eso, con un desarrollo más continuo, características que permiten la detección de cabeza, rostros y colores y con soporte para diferentes navegadores web, utilizando simplemente Javascript.

Su instalación es sencilla desde Bower, por lo que no debes preocuparte por clonar el repositorio de Github:

$ bower install tracking.js
###Hay vida después de OpenCV OpenCV es una excelente tecnología, pero la misma solo está disponible en C++, C, Python y Java, es momento de cambiar eso. **¡Podemos procesar lo que pasa en el lado del cliente con el navegador!**. ###Detector de colores de forma fácil trackingjs-colortracking El siguiente ejemplo permite **captar cualquier objeto de color magenta, cyan y amarillo** que se coloque frente a la webcam. Lo primero que haremos será declarar los colores que queremos captar:
  
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);  

Ahora necesitamos saber cuando ocurre algo, ya sea que la webcam haya encontrado un objeto con alguno de esos colores o no.

  
colors.on('track', function(event) {  
  if (event.data.length === 0) {
    // No colors were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      // rect.x, rect.y, rect.height, rect.width, rect.color
    });
  }
});

Por último, conectar la salida de video a nuestro método.

  
tracking.track('#myVideo', colors);  

Como ves, es realmente fácil trabajar con esta libería y puedes consultar la documentación aquí, además de ver en funcionamiento tanto el ejemplo anterior como otros más complejos en Mozilla DemoStudio.

Blog Logo

Richard Armuelles

Frontend, Mozilla Reps, Blogger, Speaker & Free Software Evangelist

  • Panama
comments powered by Disqus