Zadanie Wykrywacz twarzy MediaPipe umożliwia wykrywanie twarzy na zdjęciu lub filmie. Dzięki temu możesz zlokalizować twarze w kadrze. To zadanie wykorzystuje model systemów uczących się (ML), który działa z pojedynczymi obrazami lub ciągłym strumieniem obrazów. Zadanie określa lokalizacje twarzy i uwzględnia te najważniejsze punkty: lewe i prawe oko, opuszka nosa, usta, tragie dla lewego oka oraz tragie w prawym oku.
Te instrukcje pokazują, jak używać funkcji wykrywania twarzy w aplikacjach internetowych i JavaScript. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod Wykrywacza twarzy zawiera pełną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i zacząć tworzyć własną aplikację do wykrywania twarzy. Możesz wyświetlić, uruchomić i edytować przykładowy kod funkcji wykrywania twarzy tylko w przeglądarce.
Konfiguracja
W tej sekcji opisujemy najważniejsze czynności, jakie należy wykonać, aby skonfigurować środowisko programistyczne pod kątem wykrywania twarzy. Ogólne informacje o konfigurowaniu środowiska programistycznego do obsługi stron internetowych i JavaScript, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku po konfiguracji na potrzeby stron internetowych.
Pakiety JavaScript
Kod do wykrywania twarzy jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision
NPM. Aby znaleźć i pobrać te biblioteki, wykonaj instrukcje podane w przewodniku po konfiguracji dotyczącym platformy.
Wymagane pakiety możesz zainstalować za pomocą NPM za pomocą tego polecenia:
npm install @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania przez usługę sieci dostarczania treści (CDN), dodaj ten kod do tagu <head> w pliku 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>
Model
Zadanie MediaPipe Face Detector wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach służących do wykrywania twarzy znajdziesz w sekcji poświęconej modelom na stronie z przeglądem zadań.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Użyj jednej z funkcji wykrywania twarzy createFrom...(), aby przygotować zadanie do uruchamiania wnioskowania. Użyj funkcji createFromModelPath() ze ścieżką względną lub bezwzględną do wytrenowanego pliku modelu.
Jeśli model jest już załadowany do pamięci, możesz użyć metody createFromModelBuffer().
Poniższy przykładowy kod pokazuje, jak skonfigurować zadanie za pomocą funkcji createFromOptions(). Funkcja createFromOptions umożliwia dostosowanie wykrywania twarzy za pomocą opcji konfiguracyjnych. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak skompilować i skonfigurować zadanie z opcjami niestandardowymi:
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
});
Opcje konfiguracji
To zadanie ma następujące opcje konfiguracji dla aplikacji internetowych i JavaScript:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
option_var_1_web_js |
Ustawia tryb działania zadania. Są 2 tryby: IMAGE: tryb wprowadzania pojedynczych obrazów. WIDEO: tryb dla zdekodowanych klatek filmu lub strumienia danych wejściowych na żywo, np. z kamery. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Minimalny stopień pewności, że wykrywanie twarzy zostanie uznane za udane. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Minimalny próg niemaksymalnego ograniczenia wykrywania twarzy, który ma być uznawany za nakładający się. | Float [0,1] |
0.3 |
Przygotuj dane
Czujnik twarzy może wykrywać twarze na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadaniem tego zadania jest również wstępne przetwarzanie danych wejściowych, w tym zmiana rozmiaru, rotacja i normalizacja wartości. Aby wykrywać twarze w filmach, możesz za pomocą interfejsu API szybko przetworzyć jedną klatkę naraz. Na podstawie sygnatury czasowej klatki filmu ustalisz, kiedy twarze pojawiają się w filmie.
Uruchamianie zadania
Wykrywacz twarzy rozpoznaje wnioskowania za pomocą metod detect() (w trybie działania image) i detectForVideo() (w trybie aktywnym video). Zadanie przetwarza dane, próbuje wykryć twarze i zgłasza wyniki.
Wywołania funkcji wykrywania twarzy detect() i detectForVideo() są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli wykryjesz twarze w klatkach wideo pochodzącej z kamery urządzenia, każde wykryte wykrywanie blokuje wątek główny. Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają metody detect() i detectForVideo() w innym wątku.
Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:
Obraz
const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);
Wideo
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();
});
}
Aby dowiedzieć się, jak uruchomić zadanie Wykrywacz twarzy, zapoznaj się z przykładowym kodem.
Obsługa i wyświetlanie wyników
W przypadku każdego uruchomienia wykrywacz twarzy generuje wynikowy wynik. W wyniku znajdują się twarze we współrzędnych zdjęcia i twarze we współrzędnych świata.
Poniżej znajdziesz przykład danych wyjściowych z tego zadania:
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)
Poniższy obraz przedstawia wizualizację wyników zadania:
W przypadku obrazu bez ramek ograniczających wyświetl oryginalny obraz.
Przykładowy kod Wykrywacza twarzy pokazuje, jak wyświetlić wyniki zwrócone z zadania; patrz przykładowy kod