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