L'attività Rilevatore di volti MediaPipe consente di rilevare i volti in un'immagine o in un video. Puoi usare questa attività per individuare i volti e le caratteristiche del viso all'interno di un'inquadratura. Questa attività utilizza un modello di machine learning (ML) che funziona con immagini singole o un flusso continuo di immagini. L'attività restituisce la posizione del volto, oltre ai seguenti punti chiave del viso: occhio sinistro, occhio destro, punta del naso, bocca, tragione dell'occhio sinistro e tragione dell'occhio destro.
Queste istruzioni mostrano come utilizzare il rilevatore di volti per app web e JavaScript. Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio per il rilevatore di volti fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti consente di testare l'attività e iniziare a creare la tua app di rilevamento dei volti. Puoi visualizzare, eseguire e modificare il codice di esempio del rilevatore di volti semplicemente utilizzando il tuo browser web.
Configurazione
In questa sezione vengono descritti i passaggi chiave per configurare l'ambiente di sviluppo in modo specifico per l'utilizzo di Face Detector. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti di versione della piattaforma, consulta la Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice del Rilevatore dei volti è disponibile tramite il pacchetto @mediapipe/tasks-vision
NPM MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni nella Guida alla configurazione della piattaforma.
Puoi installare i pacchetti richiesti tramite Gestione dei partner di rete utilizzando il seguente comando:
npm install @mediapipe/tasks-vision
Se vuoi importare il codice dell'attività tramite un servizio di rete CDN (Content Delivery Network), aggiungi il seguente codice nel tag <head> del file 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>
Modello
L'attività di rilevamento facciale di MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per il rilevatore di volti, consulta la panoramica dell'attività nella sezione Modelli.
Seleziona e scarica un modello, quindi archivialo all'interno della directory del progetto:
<dev-project-root>/app/shared/models/
Creare l'attività
Usa una delle funzioni createFrom...() del rilevatore di volti per
preparare l'attività per l'esecuzione di inferenze. Utilizza la funzione createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già stato caricato in memoria, puoi utilizzare il metodo createFromModelBuffer().
L'esempio di codice riportato di seguito mostra l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions ti consente di personalizzare
il rilevatore di volti con le opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione, consulta Opzioni di configurazione.
Il codice seguente mostra come creare e configurare l'attività con opzioni personalizzate:
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
});
Opzioni di configurazione
Questa attività prevede le seguenti opzioni di configurazione per le applicazioni web e JavaScript:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
option_var_1_web_js |
Imposta la modalità di esecuzione per l'attività. Esistono due
modalità: IMAGE: la modalità per gli input di singole immagini. VIDEO: la modalità per i fotogrammi decodificati di un video o durante un live streaming di dati di input, ad esempio da una videocamera. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Il punteggio di confidenza minimo affinché il rilevamento dei volti venga considerato efficace. | Float [0,1] |
0.5 |
minSuppressionThreshold |
La soglia minima non massima di soppressione per il rilevamento dei volti affinché venga considerato sovrapposto. | Float [0,1] |
0.3 |
Preparazione dei dati
Il rilevatore di volti può rilevare i volti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input, come ridimensionamento, rotazione e normalizzazione del valore. Per rilevare i volti nei video, puoi utilizzare l'API per elaborare rapidamente un fotogramma alla volta, utilizzando il timestamp del fotogramma per determinare quando i volti compaiono nel video.
Esegui l'attività
Il rilevatore di volti utilizza i metodi detect() (con modalità di esecuzione image) e detectForVideo() (con modalità di esecuzione video) per attivare le inferenze. L'attività elabora i dati, tenta di rilevare i volti e
segnala i risultati.
Le chiamate ai metodi di rilevamento dei volti detect() e detectForVideo() vengono eseguite
in modo sincrono e bloccano il thread dell'interfaccia utente. Se rilevi volti
nei fotogrammi video della fotocamera di un dispositivo, ogni rilevamento blocca il thread
principale. Puoi evitare che ciò accada implementando i web worker per l'esecuzione dei metodi detect()
e detectForVideo() su un altro thread.
Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:
Immagine
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();
});
}
Per un'implementazione più completa dell'esecuzione di un'attività di rilevamento dei volti, vedi l'esempio di codice.
Gestire e visualizzare i risultati
Quest'ultimo genera un oggetto risultato per ogni esecuzione di rilevamento. L'oggetto risultato contiene facce nelle coordinate dell'immagine e i volti nelle coordinate del mondo.
Di seguito è riportato un esempio dei dati di output di questa attività:
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)
L'immagine seguente mostra una visualizzazione dell'output dell'attività:
Per l'immagine senza riquadri di delimitazione, vedi l'immagine originale.
Il codice di esempio del rilevatore di volti mostra come visualizzare i risultati restituiti dall'attività. Consulta l'esempio di codice