La tarea MediaPipe Face Detector te permite detectar rostros en una imagen o un video. Puedes usar esta tarea para ubicar rostros y rasgos faciales en un marco. Para esta tarea, se utiliza un modelo de aprendizaje automático (AA) que funciona con imágenes únicas o una flujo continuo de imágenes. La tarea muestra las ubicaciones de los rostros, junto con lo siguiente: puntos clave faciales: ojo izquierdo, ojo derecho, punta de la nariz, boca, tragión del ojo izquierdo y tragión del ojo derecho.
Estas instrucciones te muestran cómo usar el Detector de rostros para la Web y JavaScript de Google Chat. Para obtener más información sobre las capacidades, los modelos y la configuración para realizar esta tarea, consulta la Descripción general.
Ejemplo de código
El código de ejemplo de Detector de rostros brinda una implementación completa de esto: en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y obtener empezaste a crear tu propia aplicación de detección de rostro. Puedes ver, ejecutar y edita el código de ejemplo del detector de rostros usando solo el navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar el Detector de rostros. Para obtener información general configurar tu entorno de desarrollo web y de JavaScript, lo que incluye de la versión de la plataforma, consulta la Guía de configuración para la Web.
Paquetes de JavaScript
El código del detector de rostros está disponible a través del @mediapipe/tasks-vision de MediaPipe
NPM. Puedes
sigue las instrucciones de la plataforma para encontrar y descargar estas bibliotecas.
Guía de configuración.
Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:
npm install @mediapipe/tasks-vision
Si quieres importar el código de la tarea a través de una red de distribución de contenidos (CDN) agrega el siguiente código en la sección <head> etiqueta en tu archivo HTML:
<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea MediaPipe Face Detector requiere un modelo entrenado que sea compatible con este tarea. Para obtener más información sobre los modelos entrenados disponibles para el detector de rostros, consulta la sección Modelos de la descripción general de la tarea.
Selecciona y descarga un modelo y, luego, guárdalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones createFrom...() del detector de rostros para lo siguiente:
preparan la tarea para ejecutar inferencias. Usa el createFromModelPath()
con una ruta de acceso absoluta o relativa al archivo de modelo entrenado.
Si tu modelo ya está cargado en la memoria, puedes usar
createFromModelBuffer().
En el siguiente ejemplo de código, se demuestra el uso de la función createFromOptions() para
configurar la tarea. La función createFromOptions te permite personalizar la
Detector de rostros con opciones de configuración. Para obtener más información sobre la configuración
consulta Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con Opciones:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
Opciones de configuración
Esta tarea tiene las siguientes opciones de configuración para la Web y JavaScript aplicaciones:
| Nombre de la opción | Descripción | Rango de valores | Valor predeterminado |
|---|---|---|---|
option_var_1_web_js |
Establece el modo de ejecución de la tarea. Existen dos
modos: IMAGE: Es el modo para entradas de una sola imagen. VIDEO: el modo para fotogramas decodificados de una o en una transmisión en vivo de datos de entrada, como los de una cámara. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
La puntuación de confianza mínima para que la detección de rostro se considere correcta. | Float [0,1] |
0.5 |
minSuppressionThreshold |
El umbral mínimo de supresión no máxima para que la detección de rostros se considere superpuesta. | Float [0,1] |
0.3 |
Preparar los datos
El detector de rostros puede detectar rostros en imágenes en cualquier formato que admita el navegador del host. La tarea también maneja el procesamiento previo de la entrada de datos, lo que incluye cambio de tamaño, rotación y normalización de valores. Para detectar rostros en videos, sigue estos pasos: puedes usar la API para procesar rápidamente un fotograma a la vez, con la marca de tiempo del fotograma para determinar cuándo aparecen los rostros en el video.
Ejecuta la tarea
El detector de rostros usa detect() (con modo de ejecución image) y
Métodos detectForVideo() (con el modo de ejecución video) para activar
para hacer inferencias. La tarea procesa los datos, intenta detectar rostros y
y, luego, informa los resultados.
Se ejecutan las llamadas al detector de rostros detect() y los métodos detectForVideo().
de forma síncrona y bloquea el subproceso de la interfaz de usuario. Si detectas rostros
en fotogramas de video desde la cámara de un dispositivo, cada detección bloquea la principal
conversación. Para evitar esto, implementa trabajadores web para ejecutar detect().
y detectForVideo() en otro subproceso.
En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:
Imagen
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
Video
await faceDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = faceDetector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Para ver una implementación más completa de la ejecución de una tarea del Detector de rostros, consulta el ejemplo de código de barras.
Cómo controlar y mostrar resultados
El detector de rostros genera un objeto de resultado para cada detección cuando se ejecute. El objeto del resultado contiene rostros en coordenadas de imágenes y rostros en el mundo coordenadas.
A continuación, se muestra un ejemplo de los datos de salida de esta tarea:
FaceDetectionResult:
Detections:
Detection #0:
BoundingBox:
origin_x: 126
origin_y: 100
width: 463
height: 463
Categories:
Category #0:
index: 0
score: 0.9729152917861938
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.18298381567001343
y: 0.2961040139198303
NormalizedKeypoint #1:
x: 0.3302789330482483
y: 0.29289937019348145
... (6 keypoints for each face)
Detection #1:
BoundingBox:
origin_x: 616
origin_y: 193
width: 430
height: 430
Categories:
Category #0:
index: 0
score: 0.9251380562782288
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.6151331663131714
y: 0.3713381886482239
NormalizedKeypoint #1:
x: 0.7460576295852661
y: 0.38825345039367676
... (6 keypoints for each face)
En la siguiente imagen, se muestra una visualización del resultado de la tarea:
Si la imagen no tiene cuadros delimitadores, consulta la imagen original.
El código de ejemplo del detector de rostros demuestra cómo mostrar el resultados que devolvió la tarea, consulta la ejemplo de código