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

Rate this content
Bookmark

En el rápido espacio de las aplicaciones de redes sociales, algunas funcionalidades también podrían ser utilizadas para aplicaciones web. Voy a mostrarte cómo puedes utilizar la API de Detección de Rostros con la función de bandera en Chrome. Con una demostración, exploraremos las posibilidades de implementar filtros de rostro en tus proyectos futuros. Con el acceso a la cámara web de un dispositivo, agregamos gafas procesando una transmisión de video y usándola para divertirnos, encontrando ese punto dulce donde la diversión y el aprendizaje se unen.

30 min
01 Jun, 2023

Video Summary and Transcription

La API de Detección de Rostros de Chrome es parte de la API de detección de formas más grande e incluye la detección de texto y la detección de códigos de barras. Habilitar la API es tan simple como abrir una URL específica y habilitar la función experimental. La API proporciona características como la detección de rostros y el procesamiento de puntos de referencia, la representación de gafas en los rostros y la aplicación de filtros faciales. Puede manejar múltiples rostros e imágenes en videos, pero el rendimiento depende del hardware y la velocidad de procesamiento del dispositivo. La API está actualmente en progreso y se solicita retroalimentación para posibles capacidades de producción.

Available in English

1. Introducción a la API de detección facial de Chrome

Short description:

Bienvenidos. Mi nombre es Jorrik Leijnsma. Soy un desarrollador creativo de front-end y voy a compartir algo sobre la API de detección facial de Chrome. Los desarrolladores vienen con algún tipo de imagen. A veces somos un poco nerds, pero también somos solucionadores de problemas. El código puede ser divertido y lo que creas con código a menudo se ve como divertido. La IA se introduce en la escena y hay usuarios más exigentes que esperan más características. La API de detección facial de Chrome es parte de la API de detección de formas más grande.

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.

2. Habilitando la API de Detección Facial de Chrome

Short description:

La API de Detección Facial de Chrome incluye detección de texto y detección de códigos de barras. Es importante tener en cuenta que la detección facial no implica reconocimiento facial. Habilitar la función de Chrome es tan simple como abrir una URL específica y activar la función experimental. Luego puedes usar el detector facial llamando a un nuevo detector facial y configurando las propiedades de detección máxima de caras y modo rápido.

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.

3. Detectando Caras y Procesando Puntos de Referencia

Short description:

La API de Detección Facial de Chrome proporciona más características si no se utiliza el modo rápido. Con la función de detección, puedes recuperar todas las caras detectadas. El objeto de caras devuelto por la detección de caras incluye puntos de referencia como los ojos, la nariz, la boca y el cuadro de límites. Estos puntos de referencia proporcionan puntos de ubicación en un plano 2D. Para preparar la imagen, crea una nueva imagen y agrega las funciones necesarias. Verifica si la detección de caras está disponible y si las imágenes están presentes. Después de detectar las caras, se requiere un procesamiento adicional. El lienzo se utiliza para crear líneas y necesita un estilo adecuado para mostrarse correctamente.

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.

4. Renderizando Gafas en la Cara

Short description:

Inicializamos la imagen y hacemos algo con las gafas. Definimos la escala y renderizamos todo en el lienzo. Tenemos dos funciones para aplicar algo con los puntos de referencia. Calculamos las coordenadas de los puntos de referencia y filtramos los ojos. Encontramos las distancias correctas entre dos puntos, escalamos todo y volvemos a colocar los valores en el SVG. Dibujamos la imagen y la rotación, y las gafas se renderizan en la cara. Abrimos el local host y vemos un ejemplo con Albert Einstein.

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.

5. Aplicando Filtro Facial con Gafas en Einstein

Short description:

Aplicé un filtro facial con gafas en la cara de Einstein. Te mostraré el código. Tengo la imagen y la brújula, y con eso hago algunas cosas. Abro la imagen de Einstein, detecto las caras y aplico puntos de referencia. Actualizo la brújula inferior para mostrar elementos específicos. Tengo una lista de personas y configuraciones para elegir qué poner encima de la imagen. Las gafas son simplemente una imagen recortada.

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

6. Dibujando Puntos de Referencia y Usando Videos

Short description:

Dibujo los puntos de referencia y detecto los ojos, la nariz y la boca. Se utilizan líneas verdes para obtener el promedio y aplicar gafas. Se puede utilizar un video pregrabado y un video grabado en vivo para detectar los puntos de referencia en cada fotograma.

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

7. Usando la API de Detección de Rostros de Chrome para Divertirse

Short description:

Desactivé la parte de los puntos de referencia para el filtro de realidad aumentada y me enfoqué en las gafas. La API proporciona datos sobre los ojos, la boca y la nariz, lo que permite posibilidades creativas. Aunque aún no es útil en producción, es una muestra divertida de programación y resolución de problemas. La pasión por crear con código y divertirse es la esencia fundamental de esta función.

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

QnA

Capacidades de la API y Casos de Uso

Short description:

La API puede manejar un flujo y no solo una imagen única, pero puede haber limitaciones al tratar con rostros en movimiento. La API de detección de rostros se puede utilizar más allá de la realidad aumentada, como recortar imágenes de perfil con el rostro centrado. También puede manejar rostros rotados hasta cierto punto, pero puedes agregar tu propio código para compensar la rotación y garantizar una detección continua.

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,

Landmarks, Estado de Producción y Retroalimentación

Short description:

Diferentes puntos de referencia proporcionan una comprensión clara de la orientación del rostro. La función está actualmente detrás de una bandera y en progreso, sin fecha de lanzamiento estimada. Se solicita retroalimentación para determinar casos de uso y posibles capacidades de producción.

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

Manejo de Múltiples Rostros e Imágenes en Videos

Short description:

La API de Detección de Rostros de Chrome puede manejar múltiples rostros e imágenes en videos, pero el rendimiento depende del hardware y la velocidad de procesamiento del dispositivo. Funciona bien con dos o tres personas en pantalla, especialmente en modo rápido. La API detecta los dos puntos de los ojos, eliminando la necesidad de todo el contorno de los ojos.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.
JSNation Live 2021JSNation Live 2021
34 min
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices.

Workshops on related topic

Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.