La tâche "Détecteur de visages MediaPipe" vous permet de détecter des visages dans une image ou une vidéo. Vous pouvez utiliser cette tâche pour localiser des visages et des traits du visage dans un cadre. Cette tâche utilise un modèle de machine learning (ML) qui fonctionne avec des images uniques ou un pipeline d'images. Les résultats de la tâche indiquent les emplacements des visages, ainsi que les éléments suivants : points clés du visage: œil gauche, œil droit, extrémité du nez, bouche, tragion oculaire gauche et le tragion de l'œil droit.
Ces instructions vous expliquent comment utiliser le détecteur de visages pour le Web et JavaScript applications. Pour en savoir plus sur les fonctionnalités, les modèles et la configuration options de cette tâche, consultez la section Présentation.
Exemple de code
L'exemple de code pour le détecteur de visages fournit une implémentation complète de cette en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à obtenir vous avez commencé à créer votre propre application de détection de visages. Vous pouvez afficher, exécuter modifier l'exemple de code du détecteur de visages en utilisant uniquement votre navigateur Web.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiquement pour utiliser le détecteur de visages. Pour obtenir des informations générales sur à configurer votre environnement de développement Web et JavaScript, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web
Packages JavaScript
Le code du détecteur de visages est disponible via MediaPipe @mediapipe/tasks-vision
NPM. Vous pouvez
recherchez et téléchargez ces bibliothèques en suivant les instructions
Guide de configuration
Vous pouvez installer les packages requis via NPM en exécutant la commande suivante:
npm install @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un réseau de diffusion de contenu (CDN) ajoutez le code suivant dans la section <head> dans votre fichier 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>
Modèle
La tâche de détection de visages MediaPipe nécessite un modèle entraîné et compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour le détecteur de visages, consultez la section Modèles de la présentation des tâches.
Sélectionnez et téléchargez un modèle, puis stockez-le dans le répertoire de votre projet:
<dev-project-root>/app/shared/models/
Créer la tâche
Utilisez l'une des fonctions createFrom...() du détecteur de visages pour :
préparer la tâche à exécuter des inférences. Utiliser le createFromModelPath()
avec un chemin d'accès relatif ou absolu vers le fichier de modèle entraîné.
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la
createFromModelBuffer().
L'exemple de code ci-dessous montre comment utiliser la fonction createFromOptions() pour
configurer la tâche. La fonction createFromOptions vous permet de personnaliser
Détecteur de visages avec options de configuration. Pour en savoir plus sur la configuration
consultez la section Options de configuration.
Le code suivant montre comment compiler et configurer la tâche avec des options:
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
});
Options de configuration
Cette tâche comporte les options de configuration suivantes pour le Web et JavaScript applications:
| Nom de l'option | Description | Plage de valeurs | Valeur par défaut |
|---|---|---|---|
option_var_1_web_js |
Définit le mode d'exécution de la tâche. Il y a deux
modes: IMAGE: mode utilisé pour la saisie d'une seule image. VIDÉO: mode utilisé pour les images décodées d'une image vidéo ou sur un flux en direct de données d'entrée, comme celles d'une caméra. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Score de confiance minimal pour que la détection de visages soit considérée comme réussie. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Seuil minimal de suppression non maximale pour que la détection de visages soit considérée comme se chevauchant. | Float [0,1] |
0.3 |
Préparer les données
Le détecteur de visages peut détecter les visages dans les images dans n'importe quel format compatible avec le navigateur hôte. Elle gère également le prétraitement des entrées de données, le redimensionnement, la rotation et la normalisation des valeurs. Pour détecter les visages dans les vidéos : vous pouvez utiliser l'API pour traiter rapidement une image à la fois, à l'aide du code temporel du cadre pour déterminer à quel moment les visages apparaissent dans la vidéo.
Exécuter la tâche
Le détecteur de visages utilise le detect() (avec le mode de fonctionnement image) et
detectForVideo() (avec le mode d'exécution video) pour déclencher
les inférences. La tâche traite les données,
essaie de détecter les visages et
puis génère un rapport présentant les résultats.
Les appels vers les méthodes detect() et detectForVideo() du détecteur de visages s'exécutent
de manière synchrone et
bloquent le thread de l'interface utilisateur. Si vous détectez des visages
dans les images vidéo de la caméra d'un appareil, chaque détection bloque
thread. Pour éviter cela, implémentez des nœuds de calcul Web afin d'exécuter detect().
et detectForVideo() sur un autre thread.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Image
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
Vidéo
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(); }); }
Pour une implémentation plus complète de l'exécution d'une tâche de détection de visages, consultez la exemple de code.
Gérer et afficher les résultats
Le détecteur de visages génère un objet de résultat du détecteur de visages pour chaque détection exécuter. L'objet de résultat contient des visages en coordonnées d'image et des visages dans le monde coordonnées.
Voici un exemple de données de sortie de cette tâche:
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'image suivante montre une visualisation du résultat de la tâche:
Pour voir l'image sans cadre de délimitation, reportez-vous à l'image d'origine.
L'exemple de code du détecteur de visages montre comment afficher le renvoyés par la tâche, consultez la exemple de code