Cómo usar JavaScript para detectar caras y aplicar filtros

Cómo usar JavaScript para detectar caras y aplicar filtros

Anteriormente escribí una guía sobre cómo detectar rasgos faciales usando Python y tengo muchas preguntas sobre gorjeo preguntando cómo hacer lo mismo usando JavaScript. Así que hoy voy a responder eso y agregaremos algunos extras: enmascarar tu rostro con un filtro Spiderman, o el clásico filtro para perros. Ha sido muy divertido trabajar en este proyecto y espero que lo disfruten también.

El artículo cubrirá dos temas principales:

  • Reconocimiento de rasgos faciales
  • Agregar filtros

Entonces, aquí está cómo detectar rasgos faciales

De manera similar a cómo funciona DLib, para JavaScript, tenemos una biblioteca llamada clmtrackr lo que hará el trabajo pesado de detectar dónde está la cara en una imagen, y también identificará características faciales como la nariz, la boca, los ojos y más.

Esta biblioteca proporciona algunos modelos genéricos que ya están pre-entrenados y listos para usar siguiendo la numeración de las características de la siguiente manera:

Cuando procesamos una imagen con la biblioteca, devolverá una matriz para cada uno de los puntos en ese mapa, donde cada punto se identifica por su posición en x y y eje. Esto es muy importante cuando estamos construyendo los filtros. Como probablemente ya pueda adivinar, si queremos dibujar algo que reemplace la nariz de la persona, podemos usar el punto 62 que está en el centro de la nariz.

Pero suficiente teoría, comencemos a trabajar en algo genial.

¿Qué estamos construyendo?

En este artículo, haremos uso de clmtrackr para identificar caras en una transmisión de video (en nuestro caso, una cámara web o cámara) y aplicar filtros personalizados que se pueden seleccionar mediante un menú desplegable en la pantalla. Aquí está la demostración de la aplicación en codepen. Para comenzar, asegúrese de permitir que la aplicación acceda a la cámara en su navegador, de lo contrario no funcionará.

¡Increíble! Puede que no sea perfecto, pero se ve increíble.

Ahora, analicemos el código y expliquemos lo que estamos haciendo.

La estructura básica del código.

Para construir la aplicación que estamos usando p5.js biblioteca, que es una biblioteca de JavaScript diseñada para trabajar principalmente con lienzo, y que se adapta perfectamente a nuestro caso de uso. P5JS no es su biblioteca de interfaz de usuario tradicional, sino que funciona con eventos que definen cuándo construir la interfaz de usuario y cuándo actualizarla. De manera similar a algunos motores de juegos.

Hay 3 eventos principales de p5 que quiero cubrir:

  • preload: que se ejecuta justo después de que se carga la biblioteca y antes de construir cualquier interfaz de usuario o dibujar algo en la pantalla. Esto lo hace perfecto para cargar activos.
  • setup: que también se ejecuta una vez, justo después de preload, y es donde preparamos todo y construimos la interfaz de usuario inicial
  • draw: que es una función llamada en un bucle, y se ejecuta cada vez que el sistema requiere que se muestre la pantalla.

Precarga

Como por definición, usaremos el preload evento para cargar las imágenes que usaremos más adelante en el código. Así es como se ve:

Como puedes ver, es muy simple. La función loadImage desde p5, como es de esperar, cargará la imagen y la pondrá a disposición como un objeto de imagen P5.

Preparar

Aquí las cosas se ponen un poco más interesantes, ya que es aquí donde cargamos la interfaz de usuario. Desglosaremos el código ejecutado en este evento en cuatro partes.

Creando el lienzo

Como queremos que nuestro código responda, nuestro lienzo tendrá un tamaño dinámico que se calculará a partir del tamaño de la ventana y con una relación de aspecto de 4: 3. No es ideal tener la relación de aspecto en un código como ese, pero haremos algunas suposiciones para mantener el código conciso para la demostración. Después de conocer las dimensiones de nuestro lienzo, podemos crear uno con la función P5 createCanvas como se muestra a continuación.

Capturando la transmisión de video

Una vez que tenemos nuestro lienzo funcionando, necesitamos capturar la transmisión de video de la cámara web o cámara y colocarla en el lienzo. Afortunadamente, P5 hace que sea muy fácil hacerlo con el videoCapture función.

Construyendo el selector de filtro

Nuestra aplicación es increíble y puede proporcionar opciones para más de un filtro, por lo que debemos crear una forma de seleccionar qué filtro queremos activar. Nuevamente, podríamos ponernos realmente elegantes aquí, sin embargo, por simplicidad, usaremos un menú desplegable simple, que podemos crear usando P5 createSelect() función.

Crear el rastreador de imágenes

El rastreador de imágenes es un objeto que se puede adjuntar a una fuente de video e identificará para cada cuadro todas las caras y sus características. El rastreador debe configurarse una vez para una fuente de video determinada.

Dibujando el video y los filtros

Ahora que todo está configurado, necesitamos actualizar nuestro draw evento desde P5, para emitir la fuente de video al lienzo y aplicar cualquier filtro que esté seleccionado. En nuestro caso el draw La función será muy simple, empujando la complejidad en cada definición de filtro.

Construyendo el filtro de máscara de Spiderman

Crear filtros puede ser una tarea fácil o muy compleja. Dependerá de lo que se supone que haga el filtro. Para la máscara de Spiderman, simplemente necesitamos mover la imagen de la máscara de Spiderman al centro de la pantalla. Para hacer eso, primero nos aseguramos de que nuestro objeto faceTracker realmente detecte una cara usando faceTraker.getCurrentPosition().

Una vez que detectamos nuestra cara, usamos P5 para renderizar la imagen usando el punto de cara 62, que es el centro de la nariz como centro de la imagen, y con un ancho y una altura que representan el tamaño de la cara de la siguiente manera.

Muy bien, ¿verdad?

Ahora el filtro de perro funciona de la misma manera pero usando tres imágenes en lugar de una, una para cada oreja y otra para la nariz. No te aburriré con más del mismo código, pero si quieres comprobarlo, revisa el código abierto, que contiene el código completo de la demostración.

Con la ayuda de las bibliotecas de JavaScript, es muy fácil identificar las características faciales y comenzar a crear sus propios filtros. Sin embargo, hay algunas consideraciones que no cubrimos en este tutorial. Por ejemplo, ¿qué sucede si la cara no está directamente a la cámara? ¿Cómo distorsionamos nuestros filtros para que sigan la curvatura de la cara? ¿O qué pasa si quiero agregar objetos 3D en lugar de filtros 2D?

Este artículo fue publicado originalmente en Transmisión de código en vivo por Juan cruz martinez, fundador y editor de Live Code Stream. Es ingeniero de software con más de 10 años de experiencia en el campo, trabajando en una amplia variedad de proyectos, desde soluciones de código abierto hasta aplicaciones empresariales. Felizmente casado, con un hijo, comprometido oficialmente con JavaScript, en una relación de amor con Python, ¡y persiguiendo el sueño del escritor! Puedes leer esta pieza original aquí.

Transmisión de código en vivo también está disponible como un boletín semanal gratuito. Regístrese para recibir actualizaciones sobre todo lo relacionado con la programación, la inteligencia artificial y la informática en general.

Pssst, ¡hola!

¿Desea recibir el boletín técnico diario más atrevido todos los días, en su bandeja de entrada, GRATIS? Por supuesto que sí: regístrate en Big Spam aquí.

Deja un comentario