L'attività di rilevamento dei volti di MediaPipe ti consente di rilevare i volti in un'immagine o in un video. Puoi utilizzare questa attività per individuare volti e caratteristiche del viso all'interno di un'inquadratura. Questa attività utilizza un modello di machine learning (ML) che funziona con immagini singole o flusso di immagini. L'attività restituisce le posizioni dei volti, insieme a quanto segue punti chiave del volto: occhio sinistro, occhio destro, punta del naso, bocca, tragione dell'occhio sinistro tragione dell'occhio destro.
Queste istruzioni mostrano come utilizzare Face Detector per il web e JavaScript app. Per ulteriori informazioni su funzionalità, modelli e configurazione opzioni di questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio del rilevatore di volti fornisce un'implementazione completa in JavaScript come riferimento. Questo codice ti consente di testare l'attività e ottenere ha iniziato a creare la tua app di rilevamento dei volti. Puoi visualizzare, eseguire Modifica il codice di esempio del rilevatore di volti usando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo specificatamente per usare il rilevatore di volti. Per informazioni generali su configurare l'ambiente di sviluppo web e JavaScript, incluse i requisiti di versione della piattaforma, consulta Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice del rilevatore di volti è disponibile tramite MediaPipe @mediapipe/tasks-vision
Pacchetto NPM. Puoi
trovare e scaricare queste librerie seguendo le istruzioni nella piattaforma
Guida alla configurazione.
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 una rete CDN (Content Delivery Network) servizio, aggiungi il seguente codice nel tag <head> nel 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 dei volti di MediaPipe richiede un modello addestrato compatibile con questo dell'attività. Per ulteriori informazioni sui modelli addestrati disponibili per il riconoscimento facciale, vedi la panoramica delle attività nella sezione Modelli.
Seleziona e scarica un modello, quindi archivialo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Usa una delle funzioni createFrom...() con riconoscimento facciale per
per preparare l'attività per l'esecuzione delle inferenze. Usa createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già caricato in memoria, puoi utilizzare
createFromModelBuffer().
L'esempio di codice seguente mostra l'utilizzo della funzione createFromOptions() per
configurare l'attività. La funzione createFromOptions ti consente di personalizzare
Rilevamento dei volti con opzioni di configurazione. Per ulteriori informazioni sulla configurazione
vedi Opzioni di configurazione.
Il codice seguente mostra come creare e configurare l'attività con opzioni:
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à include le seguenti opzioni di configurazione per web e JavaScript applicazioni:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
option_var_1_web_js |
Imposta la modalità di esecuzione per l'attività. Esistono due metodi
modalità: IMAGE: la modalità per gli input di immagini singole. VIDEO: La modalità per i fotogrammi decodificati di un in 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 abbia successo. | Float [0,1] |
0.5 |
minSuppressionThreshold |
La soglia minima non massima di soppressione affinché il rilevamento dei volti sia considerata sovrapposta. | Float [0,1] |
0.3 |
Preparazione dei dati
Il rilevatore di volti può rilevare i volti nelle immagini in qualsiasi formato supportato browser host. L'attività gestisce anche la pre-elaborazione dell'input di dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori. Per rilevare i volti nei video: puoi utilizzare l'API per elaborare rapidamente un frame alla volta, utilizzando il timestamp dell'inquadratura per determinare quando i volti compaiono nel video.
Esegui l'attività
Il rilevatore di volti utilizza detect() (con modalità di corsa image) e
Metodi detectForVideo() (con modalità di esecuzione video) per attivare
le inferenze. L'attività elabora i dati, tenta di rilevare i volti e
quindi segnala i risultati.
Chiamate al rilevatore di volti detect() e metodi detectForVideo() eseguiti
in modo sincrono e bloccare il thread dell'interfaccia utente. Se rilevi volti
nei fotogrammi video della videocamera di un dispositivo, ogni rilevamento blocca la
. Puoi ovviare a questo problema implementando i web worker per eseguire 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, consulta le esempio di codice.
Gestire e visualizzare i risultati
Il rilevatore di volti genera un oggetto risultato per ogni rilevamento vengono eseguiti tutti i test delle unità. L'oggetto risultato contiene volti nelle coordinate dell'immagine e volti nel mondo coordinate.
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à, controlla esempio di codice