Mit der Aufgabe „MediaPipe Face Detector“ können Sie Gesichter in einem Bild oder Video erkennen. Sie können um Gesichter und Gesichtsmerkmale innerhalb eines Rahmens zu finden. Bei dieser Aufgabe wird ein ML-Modell, das mit einzelnen Bildern oder einem kontinuierlichen einen Stream von Bildern. Die Aufgabe gibt die Gesichterstandorte zusammen mit den folgenden Gesichtspunkte im Gesicht: linkes Auge, rechtes Auge, Nasenspitze, Mund, Tragion linkes Auge und rechtes Auge.
In dieser Anleitung erfahren Sie, wie Sie die Gesichtserkennung für das Web und für JavaScript verwenden. Apps. Weitere Informationen zu Funktionen, Modellen und Konfiguration Weitere Informationen finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für die Gesichtserkennung bietet eine vollständige Implementierung dieser in JavaScript ausführen. Dieser Code hilft Ihnen, diese Aufgabe zu testen und mit der Entwicklung einer eigenen Gesichtserkennungs-App begonnen. Sie können Daten abrufen, ausführen und Bearbeiten Sie den Beispielcode für die Gesichtserkennung. ganz einfach in Ihrem Webbrowser.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. zur Nutzung von Gesichtserkennung. Allgemeine Informationen zu Ihre Web- und JavaScript-Entwicklungsumgebung einrichten, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web
JavaScript-Pakete
Der Code für die Gesichtserkennung ist über MediaPipe @mediapipe/tasks-vision verfügbar
NPM-Paket. Sie können
Sie können diese Bibliotheken finden und herunterladen, indem Sie der Anleitung auf der Plattform folgen.
Leitfaden für die Einrichtung
Sie können die erforderlichen Pakete über NPM installieren mit dem folgenden Befehl:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten Dienst hinzufügen, fügen Sie den folgenden Code in den <head>-Abschnitt Tag in Ihrer HTML-Datei:
<!-- 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 Face Detector“ ist ein trainiertes Modell erforderlich, das mit dieser für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für die Gesichtserkennung finden Sie unter 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
Mit einer der createFrom...()-Funktionen für die Gesichtserkennung können Sie
die Aufgabe für die Ausführung von Inferenzen vorbereiten. createFromModelPath() verwenden
mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den
createFromModelBuffer()-Methode.
Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions()
die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions können Sie die
Gesichtserkennung mit Konfigurationsoptionen. Weitere Informationen zur Konfiguration
finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:
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 hat 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 einer Video oder in einem Livestream mit Eingabedaten, etwa von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Der minimale Konfidenzwert, mit dem die Gesichtserkennung als erfolgreich gilt. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Der minimale Grenzwert für die nicht-maximale Unterdrückung, damit die Gesichtserkennung als überlappend gilt. | Float [0,1] |
0.3 |
Daten vorbereiten
Die Gesichtserkennung kann Gesichter in Bildern in jedem Format erkennen, das vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung. Um Gesichter in Videos zu erkennen, können Sie mit der API schnell einen Frame nach dem anderen verarbeiten, indem Sie den Zeitstempel des Frames, um zu bestimmen, wann die Gesichter im Video zu sehen sind.
Aufgabe ausführen
Die Gesichtserkennung verwendet die detect() (mit dem Laufmodus image) und
detectForVideo() (mit Ausführungsmodus video) zum Auslösen von Methoden
Rückschlüsse. Die Aufgabe verarbeitet die Daten, versucht, Gesichter zu erkennen
und meldet dann die Ergebnisse.
Aufrufe der Gesichtserkennungsmethoden detect() und detectForVideo() werden ausgeführt
und den Benutzeroberflächen-Thread blockieren. Wenn Gesichter erkannt werden
in Videoframes der Kamera eines Geräts blockieren, blockiert jede Erkennung die wichtigsten
Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker zur Ausführung von detect() implementieren
und detectForVideo() in einem anderen Thread.
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 ausführlichere Implementierung der Ausführung einer Aufgabe zur Gesichtserkennung finden Sie in der Codebeispiel an.
Ergebnisse verarbeiten und anzeigen
Die Gesichtserkennung generiert für jede Erkennung ein Gesichtserkennungsobjekt. ausführen. Das Ergebnisobjekt enthält Flächen in Bildkoordinaten und Flächen in der Welt. Koordinaten.
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 die Gesichtserkennung zeigt, wie die der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel