Mit der Aufgabe „MediaPipe-Gesichtserkennung“ können Sie Gesichter in einem Bild oder Video erkennen. Sie können diese Aufgabe verwenden, um Gesichter und Gesichtsmerkmale innerhalb eines Rahmens zu finden. Bei dieser Aufgabe wird ein Modell für maschinelles Lernen (ML) verwendet, das mit einzelnen Bildern oder einem kontinuierlichen Bilderstrom arbeitet. Die Aufgabe gibt Gesichterpositionen zusammen mit den folgenden wichtigen Gesichtspunkten aus: linkes Auge, rechtes Auge, Nasenspitze, Mund, Tragion des linken Auges und Tragion des rechten Auges.
In dieser Anleitung erfahren Sie, wie Sie den Gesichtserkennung 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 Face Detector enthält eine vollständige JavaScript-Implementierung dieser Aufgabe. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Gesichtserkennungs-App beginnen. Sie können den Beispielcode für die Gesichtserkennung aufrufen, ausführen und bearbeiten, indem Sie nur Ihren Webbrowser verwenden.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten der Entwicklungsumgebung speziell für die Verwendung von Face Detector beschrieben. Allgemeine Informationen zum Einrichten der Web- und JavaScript-Entwicklungsumgebung, einschließlich der Plattformversionsanforderungen, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für die Gesichtserkennung ist über das @mediapipe/tasks-vision
NPM-Paket von MediaPipe verfügbar. Folgen Sie der Anleitung im Einrichtungsleitfaden für die Plattform, um diese Bibliotheken zu suchen und herunterzuladen.
Mit dem folgenden Befehl können Sie die erforderlichen Pakete über NPM installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über einen Content Delivery Network-Dienst (CDN) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag 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.js"
crossorigin="anonymous"></script>
</head>
Modell
Für die Aufgabe „MediaPipe-Gesichtserkennung“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für Face Detector finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:
<dev-project-root>/app/shared/models/
Aufgabe erstellen
Verwenden Sie eine der createFrom...()-Funktionen des Gesichtsdetektors, um die Aufgabe zum Ausführen von Inferenzen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn das Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.
Das folgende Codebeispiel zeigt, wie Sie die Aufgabe mit der Funktion createFromOptions() einrichten. Mit der Funktion createFromOptions können Sie den Gesichtsdetektor 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
Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
option_var_1_web_js |
Legt den Ausführungsmodus für die Task fest. Es gibt zwei Modi: IMAGE: Der Modus für Einzelbildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder in einem Livestream mit Eingabedaten, z. B. von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Der Mindestkonfidenzwert, mit dem die Gesichtserkennung als erfolgreich gilt. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Der minimale nicht maximale Grenzwert für die Gesichtserkennung, der als überlappend eingestuft wird. | Float [0,1] |
0.3 |
Daten vorbereiten
Die Gesichtserkennung kann Gesichter in Bildern in jedem Format erkennen, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung. Um Gesichter in Videos zu erkennen, können Sie die API verwenden, um einen Frame nach dem anderen schnell zu verarbeiten und mithilfe des Zeitstempels des Frames zu bestimmen, wann die Gesichter im Video zu sehen sind.
Task ausführen
Der Gesichtserkennung verwendet die Methoden detect() (im Ausführungsmodus image) und detectForVideo() (im Ausführungsmodus video), um Inferenzen auszulösen. Die Aufgabe verarbeitet die Daten, versucht, Gesichter zu erkennen und meldet dann die Ergebnisse.
Aufrufe der Gesichtererkennungsmethoden detect() und detectForVideo() werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Gesichter in Videoframes 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();
});
}
Eine vollständigere Implementierung des Ausführens einer Gesichtserkennungsaufgabe finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Der Gesichtserkennung generiert für jeden Erkennungslauf ein Gesichtserkennungsergebnis. Das Ergebnisobjekt enthält Flächen in Bildkoordinaten und Flächen 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)
Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:
Informationen für das Bild ohne Begrenzungsrahmen finden Sie im Originalbild.
Der Beispielcode für Face Detector zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden. Hier finden Sie ein Codebeispiel.