Mit der MediaPipe Face Detector-Aufgabe können Sie Gesichter in einem Bild oder Video erkennen. Mit dieser Aufgabe können Sie Gesichter und Gesichtsmerkmale in einem Frame erkennen. Für diese Aufgabe wird ein ML-Modell verwendet, das mit einzelnen Bildern oder einem kontinuierlichen Bildstream funktioniert. Bei der Aufgabe werden Gesichtspositionen zusammen mit den folgenden Gesichtsmerkmalen ausgegeben: linkes Auge, rechtes Auge, Nasenspitze, Mund, Tragion des linken Auges und Tragion des rechten Auges.
In dieser Anleitung erfahren Sie, wie Sie den Face Detector für Web- und JavaScript-Apps verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den Gesichtserkennungs-Detektor enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Gesichtserkennungs-App beginnen. Sie können das Beispiel für den Gesichtserkennungs-Detektor einfach in Ihrem Webbrowser ansehen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von Face Detector beschrieben. Allgemeine Informationen zum Einrichten Ihrer Web- und JavaScript-Entwicklungsumgebung, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für die Gesichtserkennung ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken gemäß der Anleitung im Einrichtungsleitfaden der Plattform suchen und herunterladen.
Sie können die erforderlichen Pakete über NPM mit dem folgenden Befehl installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag in Ihrer HTML-Datei ein:
<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modell
Für die MediaPipe Face Detector-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für den Gesichtserkennungsdienst finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es in Ihrem Projektverzeichnis:
<dev-project-root>/app/shared/models/
Aufgabe erstellen
Verwenden Sie eine der createFrom...()-Funktionen des Face Detectors, um die Aufgabe für die Ausführung von Inferenzvorgängen vorzubereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.
Im folgenden Codebeispiel wird die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe veranschaulicht. Mit der Funktion createFromOptions können Sie den Gesichtserkennungsdienst mit Konfigurationsoptionen anpassen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:
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
});
Konfigurationsoptionen
Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen verfügbar:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
option_var_1_web_js |
Legt den Ausführungsmodus für die Aufgabe fest. Es gibt zwei Modi: IMAGE: Der Modus für einzelne Bildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder eines Livestreams von Eingabedaten, z. B. von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Der Mindestkonfidenzwert, damit die Gesichtserkennung als erfolgreich gilt. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Der minimale Grenzwert für die nicht maximale Unterdrückung für die Gesichtserkennung, damit eine Überlappung berücksichtigt wird. | Float [0,1] |
0.3 |
Daten vorbereiten
Mit Face Detector können Gesichter in Bildern in jedem Format erkannt werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung. Wenn Sie Gesichter in Videos erkennen möchten, können Sie mit der API jeweils einen Frame schnell verarbeiten. Anhand des Zeitstempels des Frames lässt sich ermitteln, wann die Gesichter im Video zu sehen sind.
Aufgabe ausführen
Der Gesichtserkennungs-Detektor verwendet die Methoden detect() (mit dem Ausführungsmodus image) und detectForVideo() (mit dem Ausführungsmodus video), um Inferenzvorgänge auszulösen. Bei der Aufgabe werden die Daten verarbeitet, es wird versucht, Gesichter zu erkennen, und dann werden die Ergebnisse gemeldet.
Aufrufe der Face Detector-Methoden detect() und detectForVideo() werden synchron ausgeführt und blockieren den Benutzeroberflächen-Thread. Wenn Sie Gesichter in Videobildern von der Kamera eines Geräts erkennen, blockiert jede Erkennung den Hauptthread. Sie können dies verhindern, indem Sie Web-Worker implementieren, um die Methoden detect() und detectForVideo() in einem anderen Thread auszuführen.
Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:
Bild
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(); }); }
Ein vollständigeres Beispiel für die Ausführung einer Face Detector-Aufgabe finden Sie hier.
Ergebnisse verarbeiten und anzeigen
Der Gesichtserkennungs-Detektor generiert für jeden Erkennungslauf ein Ergebnisobjekt. Das Ergebnisobjekt enthält Gesichter in Bildkoordinaten und Gesichter in Weltkoordinaten.
Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:
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)
Das folgende Bild zeigt eine Visualisierung der Aufgabenausgabe:
Das Bild ohne Begrenzungsrahmen finden Sie hier.
Der Beispielcode für die Gesichtserkennung zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden. Beispiel ansehen