Crear Filtros de Rostro AR con la API de Detección de Rostros de Chrome

Bienvenidos. Mi nombre es Jorrik Leijnsma. Como dijo Caroline, soy un desarrollador creativo de front-end y voy a compartir algo sobre la API de detección facial de Chrome. Es un poco largo, pero logré decirlo bien. Entonces, soy un desarrollador de front-end y he trabajado durante más de seis años como desarrollador de front-end. Los últimos dos años en una empresa llamada Ordina. Y, lo que tenemos, somos desarrolladores. Creo que la mayoría de nosotros estamos aquí. Y los desarrolladores vienen con algún tipo de imagen. A veces somos un poco, como, nerds, y... Pero también somos solucionadores de problemas. Pero también hay este cambio donde el código puede ser divertido, y también lo que creas con código se ve cada vez más como divertido. Pero la parte del código sigue siendo aburrida. Y ahí es donde a veces hay esta cosa interesante donde también quieres crear código no aburrido. Pero tampoco el gran resultado final. Entonces tal vez la gente pueda levantar la mano si ha visto código aburrido en algún momento de su vida. Sí. Creo que la mayoría de nosotros lo hemos visto. ¿O has visto código que no es aburrido y era más interesante? Tal vez también levanten la mano. Así que tal vez un poco menos, pero aún hay. Y la última pregunta, tal vez la gente ha visto código que no era funcional en absoluto, pero era puramente por diversión. También algunas manos allí. Con los últimos años, todos estos desarrollos, la IA se introduce en la escena. Hay usuarios más exigentes. Esperan más y más características. Y tienes el problema de tal vez no ser notado si no tienes estas características increíbles en tu aplicación o servicio o lo que sea. Así que necesitas ser divergente y mostrar lo que puedes hacer y lo que es posible. Esta API de detección facial de Chrome es algo que está detrás de la bandera de características, lo que significa que no se puede usar directamente. Hay un proceso para esta API de detección de formas.

La API de Detección Facial de Chrome es parte de la API de detección de formas más grande. Incluye detección de texto y también detección de códigos de barras. Y la detección de códigos de barras ya está lista para usar por todos. Pero la detección facial y la detección de texto aún están en desarrollo. Para esto, es importante tener en cuenta que la detección facial no implica reconocimiento facial. Por lo tanto, detecta tu cara, pero no puede reconocer si eres esta persona o aquel usuario que está iniciando sesión. Solo muestra que hay una cara en este tipo de medio.

¿Entonces, cómo habilitas la función de Chrome? Hay este enlace, cuando lo abres, déjame intentar si funciona. No, eso necesita abrirse. Déjame copiar y pegarlo entonces. No es no no un enlace normal válido, elige aplicación y luego muestra opciones. No estás viendo esto. Tengo que seleccionar Chrome para que se abra. Navegador Google Chrome. Entonces aquí, déjame deslizar hacia acá. Ahora debería ser visible. Esta es la parte si abres esa URL. Estás viendo esta función experimental. Y solo necesitas habilitarla. Viene con algunas otras características también. Así que ten eso en cuenta. Recientemente tuve problemas para seleccionar, por ejemplo, texto en GitHub, que no se muestra correctamente, así que eso también parece ser parte de algo defectuoso en esta plataforma web. Así es como habilitas esta función. Así. Eso fue mucho más fácil. Ahora lo has habilitado en tu navegador y ahora puedes usarlo. Para usarlo, comienzas llamando a un nuevo detector facial. Es tan simple como eso. Puede manejar dos propiedades. Puede manejar la detección máxima de caras, que se puede configurar a cualquier número, pero en cierto punto, tu máquina no será lo suficientemente rápida.

para detectar todas esas caras. Y está este modo rápido que puede ser verdadero o falso. Y básicamente se trata de la velocidad de reconocimiento. Así que obtienes más características si no utilizas el modo rápido. Entonces obtienes más data de la cara. De lo contrario, obtendrás una versión más limitada. Ahora tenemos este detector de caras llamado y ahora podemos detectar algunas caras. Esto es todo lo que necesitas. Ahora, con esta función de detección obtienes todas las caras que encuentra con esa API. Esta diapositiva y la diapositiva anterior son las únicas cosas que necesitas de la API. Todas las demás diapositivas serán funciones agregadas para hacer algo con estas caras porque necesitamos insertar una imagen como ves. Necesitamos hacer algo con las caras porque ahora tenemos una función que tiene todas las caras pero ¿qué hacemos con ella? Digamos que tengo esta imagen y ves una cara y la cara tiene ojos, tiene una nariz, tiene una boca, tiene un cuadro de límites de la cara. Y para obtener una retroalimentación adecuada, ves que detecta esos puntos de referencia y se muestran en este tipo de objeto que obtienes. Ese es el objeto de caras que se devuelve de la detección de caras. Obtienes la ubicación de los puntos para un tipo particular de punto de referencia, así que aquí ves algunos de los puntos del ojo derecho. Aquí ves el ojo derecho, uno de esos puntos se detecta y está aquí. Así que esa es toda la línea que rodea el ojo. Así que obtienes esos puntos en un plano 2D, así que comienza en el eje de la imagen, así que va de arriba a la izquierda y luego se mueve hacia arriba y hacia abajo, y obtienes esos valores y puedes hacer cosas con ellos. Primero, necesitamos preparar la imagen. Creé una etiqueta de imagen simple e importé una imagen. Ahora necesito crear esta nueva imagen para obtener un mapa de bits de ella y con esto necesito agregar algunas funciones para asegurarme de que funcione. Estoy verificando si la detección de caras está disponible, de lo contrario, si no tienes la bandera de función habilitada, dará algunos errores, así que quieres saber si está ahí. Y después de eso podemos verificar si las imágenes están ahí. Así que sabemos que todos los data están disponibles. Y después de eso simplemente podemos detectar las caras y con lo que regrese podemos hacer eso. Estos pasos son necesarios, estos pasos para preparar la imagen para insertarla en el detector. Eso dará como resultado este tipo de puntos de referencia. Pero como mostré, esto solo estaba obteniendo la imagen en la parte de detección, todavía necesitamos hacer algo con esos puntos de referencia. Entonces, ¿qué sucede a continuación? Necesitamos el lienzo porque en el lienzo vamos a crear las líneas. El lienzo necesita algún estilo porque necesitamos mostrarlo correctamente, así que tenemos algún estilo. El lienzo coincide con el tamaño de la imagen y la imagen misma. Y con eso, vamos a inicializar algunas cosas.

Entonces aquí puedes ver algunas partes donde inicializamos la imagen, pero también obtenemos el elemento y hacemos algo con las gafas. Llegaremos a eso más tarde. Con esto, también podemos necesitar hacer algo de matemáticas. Necesitamos definir la escala, por ejemplo, de la imagen porque ese mapa de bits puede tener un tamaño diferente, por lo que necesitamos configurar todas las propiedades correctamente. Después de haber hecho eso, vamos a renderizar todo en el... oh, el código va aquí. Este es el lienzo donde obtienes el contexto 2D. Necesitas eso para renderizar esos puntos de nuevo en el lienzo. Cuando tienes eso, ahora tenemos esta parte de las caras donde puedo tener... dos funciones donde puedo aplicar algo con esos puntos de referencia. He creado esas funciones y vamos a ver eso. En primer lugar, a partir de esta parte del código, con esas funciones llamadas, obtuve estas gafas en la imagen. Todavía es una imagen estática, todavía es divertido de hacer. Pero ¿cómo obtengo los cálculos para esas gafas? Vamos a ver eso ahora. Hice algo de magia matemática. Así que necesitaba obtener las coordenadas de esos puntos de referencia. Porque como viste, era esta gran línea con esta cantidad de puntos. Y necesito obtener los esfuerzos de todos esos puntos para saber cuál es el punto medio de mi ojo. Así que obtuve esa parte. Luego, tal vez sea un poco pequeño para ver, pero necesito filtrar los puntos de referencia. Porque necesitaba los ojos. A veces arruinan los ojos o simplemente los nombran ojos en lugar de ojo izquierdo y ojo derecho. Así que necesito filtrar eso para saber qué parte de las coordenadas coincide con esos puntos de referencia. Después de eso, voy a buscar algo de matemáticas en Internet sobre cómo encontrar las distancias correctas entre dos puntos, cómo escalar todo correctamente y poner todos esos valores de vuelta en el SVG. Y con eso, aplico algunas cosas. Así que dibujo la imagen, dibujo la rotación y ahora tengo esas gafas renderizadas como una imagen dentro de ese lienzo. Con eso, muestra esa imagen en mi cara. Así que veamos cómo se ve. Voy a abrir el local host. Voy a mover el navegador Chrome de vuelta.

Así que aquí tengo un ejemplo. Este es Albert Einstein. A veces necesito actualizar la página. Aquí se aplicó un filtro facial con las gafas en la cara de Einstein. Voy a mostrarte el código relacionado con esto. Así que retrocede. Obtén mi código. Aquí. Acerquémonos un poco. No demasiado. Así que tengo esta imagen estática por ahora. Este es el código que he estado mostrando. Así que aquí abajo, ves que ocurre algo de estilo. Tengo la imagen y la brújula aquí. Y con eso hago algunas cosas. Como dije, obtuve todos los elementos. Ahora abro la imagen de Einstein, que es la persona 2 en este caso. Creo algunas configuraciones para saber qué cosas me gustarían. Creo todas estas escalas y todas las cosas que suceden allí. Detecto las caras y tengo esta función de campo donde aplico los puntos de referencia. Y pude actualizar esta brújula inferior que está encima de la imagen para mostrar estos elementos específicos. Así que con eso, tengo a esta persona aquí. Vamos a la carpeta de personas públicas. Solo tengo esta lista de personas, solo una imagen simple de Einstein. Volvamos a esta imagen. Creé estas configuraciones donde pude elegir fácilmente qué cosa me gustaría poner encima de la imagen. Así que ahora tengo estas gafas aquí. Y las gafas son, nuevamente, solo una imagen recortada. Creo que

está aquí. No, está en media y luego en glasses. Así que está aquí. Tenía esas gafas. Es simplemente una imagen transparente de esas gafas. Así que se renderiza en la parte superior. Con eso sucediendo, déjame mostrarte esta parte donde dibujo los puntos de referencia. Ahora tengo esta función donde simplemente dibujo el contorno de esos puntos de referencia. Básicamente, solo estoy creando una línea, un trazo desde cada punto hasta cada punto de esos puntos de referencia. Y ahora pude ver lo que detecta. Así que ahora cuando vuelvo a mi Chrome... Oh, no a esto. Si lo actualizo, a veces necesita una actualización completa. No se actualizó muy bien. Creo que necesito guardarlo antes de actualizarlo. Así que aquí, ahora ves que detectó esos puntos de referencia. Así que ves los ojos, la nariz y la boca, y aquí es donde uso esas líneas verdes para obtener el promedio y aplicar las gafas. Esto también se puede extender a otros elementos. También tengo, por ejemplo, este fragmento de video que usé antes. Es solo una grabación de mí mismo, y coloco esa grabación en un elemento video. Así que cuando abro esto, básicamente es lo mismo. Solo muestra este elemento video con un video pregrabado. Después de eso, creo una animación de fotograma de solicitud. Puedo detectar caras en cada fotograma del video, luego renderizo los fotogramas en el lienzo. Así que cuando abro esto, está ahí. Así que ahora cambio. Oh, esto era en realidad la cámara. Este era el último que quería mostrar. Pero veamos este primero. Así que con un video pregrabado, también puedes hacerlo con un video grabado en vivo. Ahora está utilizando la cámara web de mi computadora portátil. Esa es una parte diferente donde usas un cierto elemento donde creas – obtienes los medios del usuario. Es otra API, una API web, donde obtienes los medios de tu dispositivo, ya sea tu teléfono o tu computadora portátil, y coloco esa imagen directamente en el elemento video. Con eso, puedo

uso el video de mi cámara web para detectar en vivo los puntos de referencia de mi rostro. Tuve algunos problemas con las gafas. Así que por ahora, desactivemos la parte de los puntos de referencia porque para un filtro de realidad aumentada, no quieres saber dónde están todos los ojos, la boca. Ahora la iluminación es un poco diferente, pero aquí, ahora tengo puestas mis gafas. También siguen mis ojos. Es un poco irregular porque ahora toma el promedio de cada fotograma. Puedes tomar el promedio de varios fotogramas, y con eso, es fácil suavizarlo. También puede girar un poco, así que también lo hace. Y deja de detectar en algún momento. Así que esto es muy divertido, donde también puedes hacerlo en vivo. Para cuando tomas una foto con tu dispositivo. Y lo último que quería mostrar, que es básicamente la versión más fácil de esto, donde tienes este video pregrabado. Así que este video pregrabado, y aquí también está detectando los rostros en tiempo real. Así que hago lo mismo, donde tengo estas gafas de nuevo, y solo estoy colocando todos los data en ese elemento video. También lo estoy grabando aquí, para poder exportarlo con las gafas puestas. Permíteme llegar a la parte donde aplico las imágenes. Entonces, aquí tengo esa función drawLandmark que creé nuevamente, que puedo desactivar. Así que ahora solo muestra las gafas. Y puedo volver y dejar de agregar las gafas, pero solo mostrar los puntos de referencia, por ejemplo. Así que este es el data donde puedes ser creativo. Así que tienes los ojos, la boca, la nariz, y eres libre de hacer cualquier cosa con eso. Es bueno que tengas esta pequeña parte de la API, que puedes usar para obtener los puntos de referencia, y a partir de eso puedes hacer más cosas con ellos. Esto es solo una muestra, creo, que es agradable, que puedas hacer algo con esto, que son solo unas líneas de código, algunos cálculos, y si lo muestras en un cumpleaños, por ejemplo, como esto es lo que creé con algo de texto y números. Creo que la gente puede sorprenderse de que conozcan estas cosas de las redes sociales, sepan cómo se ven esos filtros, pero si eres capaz de recrearlos tú mismo, eso es realmente genial. Entonces, con eso, está esta parte divertida de la programación, que tal vez sea menos funcional. Hay posibilidades, casos de uso para ello, pero definitivamente con una bandera de función en este momento, no es tan útil en producción. Pero aquí es donde la parte divertida te interesa. Esta pasión por hacer que el código haga cosas divertidas te ayuda a comprender cada vez más de qué se trata el tema y cómo funciona la programación. Y esa pasión por resolver problemas, por crear algo con código, puede ir de la mano con la diversión. Y algunas cosas no tienen sentido más que ser divertidas, simplemente ser agradables, y eso es lo fundamental de la pasión, creo. Y cuando dejas que eso

En cuanto a la parte mental, ahí es donde comienza la diversión. Si dejas de pensar en ello, simplemente diviértete con lo que haces. Entonces, sí, eso ayuda a emocionarse por las cosas. Así que gracias por su atención. Estas son algunas de mis redes sociales, y voy a invitar a Caroline de nuevo al escenario. Muy bien. Tenemos las preguntas. Entonces, la primera pregunta es, ¿puede esta API manejar un flujo y no solo una imagen única? Supongo que sí, debido a los videos, pero tal vez si hay rostros en movimiento, podría haber limitaciones. Sí, especialmente tienes el problema con múltiples rostros en el flujo que también tienes en una foto, pero luego simplemente elige uno de ellos. Y en un flujo de video, si tienes múltiples rostros, tiene dificultades para decidir en cada fotograma qué rostro elegir. Así que va más al azar y elige un rostro al azar en cada fotograma. Así que puedo imaginar que también lleva un poco de tiempo detectar los puntos de referencia, por lo que eso podría ser una limitación. Muy bien, entonces, ¿para qué podría usar la API de detección de rostros más allá de la realidad aumentada? Esta es una pregunta interesante. También puede, por ejemplo, ser realmente útil en una imagen. Por ejemplo, las partes importantes de la imagen son la mayoría de las veces cuando, por ejemplo, las personas suben una foto de perfil, que el rostro es la parte más importante. Entonces ahora puedes, por ejemplo, recortar esa imagen de manera más clara con el rostro centrado, por ejemplo. Sí, todos hemos tenido eso donde te corta los ojos. Sí, o especialmente cuando tienes esta foto de perfil convertida en un círculo cuando la subes. Es agradable cuando ya está centrada. No es tu cuello. Sí, sí. Eso es genial. Muy bien, mencionaste esto cuando estabas haciendo la demostración del video, pero ¿cómo maneja los rostros rotados? ¿Lo has probado con imágenes? Sí, tiene un umbral. Entonces, en cierto punto, dejará de detectarlo o la rotación no coincide porque está girando el punto de referencia de alguna manera. Pero puedes agregar tu propio código para aplicar la detección. Por ejemplo, ¿qué sucede si giras hasta cierta cantidad, deja de detectar y luego vuelve a detectar? Pero puedes compensarlo, por ejemplo, girando un poco la imagen. Entonces, si ves que el rostro se está girando, puedes aplicar un giro contrario en la imagen de origen o en el video. Especialmente para un video, cuando ves que el rostro se está girando, entonces podrías compensarlo antes,

por lo que sigue detectando los rostros. Sí. Sí. Tiene sentido. ¿Has notado, o has probado, si es diferente para diferentes puntos de referencia? Como, podría imaginar tus ojos cuando se giran en comparación con una nariz, tal vez... Sí. Entonces, esto ayuda cuando la mayoría de las partes generales del rostro están separadas de manera clara. Entonces, cuando tienes ambos ojos y la boca, realmente puedes tener una comprensión clara de la orientación del rostro, por ejemplo. Sí, está detrás de una bandera de función, como mencionaste. ¿Tienes alguna información sobre cuándo las personas podrán usarla en producción, o tal vez en otros navegadores?

Sí. En este momento, está en estado de progreso. También están solicitando casos de uso, por lo que cuando vayas al blog que Chrome escribió al respecto, también están pidiendo retroalimentación sobre esto, compartir cosas, lo que quieres que pueda hacer en producción, especialmente porque el escáner de códigos de barras ya está en producción. Creo que esto también llegará a algún lugar. No hay una estimación de tiempo real. Creo que lo primero que compartí sobre esto fue hace más de un año, casi hace un año, y aún estaba en progreso en ese momento, así que todos sabemos cómo

los navegadores manejan estos cambios. Oh, absolutamente, sí, sin duda. Mencionaste esto un poco en tu primera respuesta sobre la rotación, pero ¿cómo maneja múltiples rostros e imágenes de videos, y notas alguna diferencia entre múltiples rostros e imágenes versus múltiples rostros en videos? Sí, aquí también entra en juego el hardware, porque también depende de qué tan rápido pueda procesar estas tareas tu dispositivo. No lo he probado con un grupo realmente grande, pero dos o tres personas en pantalla, en la vista de la cámara funciona bien, especialmente si activas el modo rápido. Sí, obtienes los dos puntos de los ojos, sí, no necesitas todo el contorno de esos ojos, así que eso ya puede ser muy útil, sí. Y puedes hacerlo así, como, ¿puedes hacerlo para que diferentes personas tengan diferentes filtros, o es principalmente solo lo mismo? ¿Como, todos tendríamos gafas? No, aquí es donde entra en juego tu propia programación. Entonces, serías capaz de, por ejemplo, en la imagen, darle a cada rostro un cristal diferente, o un elemento diferente que pongas en ese rostro. En un video, tienes el mismo problema, donde solo devuelve los rostros que detecta, y el orden no está predefinido. Entonces, tienes dificultades para distinguir esos rostros. Aunque, creo que, si tienes suficientes habilidades matemáticas, podría ser posible, porque el tamaño de los ojos y las distancias también son siempre un poco diferentes por persona. Pero entonces, estás abordando un aspecto completamente nuevo de esto. Oh, absolutamente. Y si las personas se mueven y cambian de dirección en los videos, puedo imaginar que, sí, tendrías que tener habilidades matemáticas muy buenas. Muy bien. ¿Podemos usarlo en extensiones? Así podemos detectar si los empleados van al baño en lugar de trabajar. Eso suena, eso suena ilegal. Pero digamos que hay otros ejemplos. Sí, esto también es parte de tu propia creatividad. Donde si tienes una forma de usar la detección de rostros, sería posible con esto, solo basado en esos puntos de referencia. Entonces puedes, por ejemplo, vincular esto a una transmisión de cámara que tengas configurada en algún lugar y simplemente ver si hay rostros allí. Entonces, si tienes, no quiero fomentar esto a los empleadores, pero por ejemplo, si tienes esta cámara de security, quieres saber si una persona pasa, puedes emparejar esto, si puedes ejecutarlo en este navegador Chrome, puedes detectar si hay un rostro en esa cámara. Por eso todos deberían tener una cubierta para la webcam. Como estas son las razones exactas, no confío en nadie. Muy bien. Y luego, antes de terminar rápidamente. Gran parte de lo que mostraste fue en 2D, como las imágenes planas. ¿Qué hay de 3D? Sí. Esto es un poco más complicado porque 3D es un nivel completamente diferente. Estas gafas no eran realmente planas. Si giraba la cabeza, seguían siendo del mismo tamaño. Corrigen la rotación, pero no la inclinación de rotación de profundidad. Esto es posible, solo necesitas hacer los cálculos basados en la distancia de los ojos en comparación con la boca y la nariz, por ejemplo. Pero es posible también mantener la rotación en el eje z. Increíble. Eso es todo el tiempo que tenemos, pero gracias por tener esta charla y por favor, ¿pueden aplaudir nuevamente a Jorg? Muchas gracias.