MediaPipe 臉部偵測器工作可讓你偵測圖片或影片中的臉孔。您可以使用這項工作找出影格中的臉孔和臉部特徵。這項工作使用的機器學習 (ML) 模型搭配單一圖片或連續圖片串流。這項工作會輸出臉部位置和下列臉部關鍵點:左眼、右眼、鼻子小費、嘴巴、左眼腹部和右眼對焦。
以下操作說明將說明如何針對網站和 JavaScript 應用程式使用臉部偵測器。如要進一步瞭解此工作的功能、模型和設定選項,請參閱總覽。
程式碼範例
臉部偵測器的範例程式碼以 JavaScript 完整實作這項工作,供您參考。這段程式碼可協助您測試這項工作,並開始建構自己的臉部偵測應用程式。您可以使用網路瀏覽器查看及編輯臉部偵測器程式碼範例。
設定
本節將針對使用臉部偵測器的需求,特別說明如何設定開發環境的關鍵步驟。如需瞭解如何設定網站和 JavaScript 開發環境的一般資訊,包括平台版本需求,請參閱網頁版設定指南。
JavaScript 套件
您可以透過 MediaPipe @mediapipe/tasks-vision
NPM 套件取得臉部偵測器程式碼。您可以依照平台設定指南中的操作說明,尋找及下載這些程式庫。
您可以使用下列指令,透過 NPM 安裝所需套件:
npm install @mediapipe/tasks-vision
如要透過內容傳遞網路 (CDN) 服務匯入工作程式碼,請將下列程式碼加進 HTML 檔案的 <head> 標記中:
<!-- 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>
型號
MediaPipe 臉部偵測器工作需要使用與這項工作相容的已訓練模型。如要進一步瞭解臉部偵測器的可用已訓練模型,請參閱工作總覽的「模型」部分。
選取並下載模型,然後將其儲存在專案目錄中:
<dev-project-root>/app/shared/models/
建立工作
使用其中一個臉部偵測器 createFrom...()
函式,準備執行推論的工作。使用 createFromModelPath()
函式搭配已訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體,您可以使用 createFromModelBuffer()
方法。
以下程式碼範例示範如何使用 createFromOptions()
函式設定工作。createFromOptions
函式可讓您使用設定選項自訂臉部偵測器。如要進一步瞭解設定選項,請參閱「設定選項」一文。
以下程式碼示範如何使用自訂選項建構及設定工作:
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
});
設定選項
這項工作有以下網頁和 JavaScript 應用程式的設定選項:
選項名稱 | 說明 | 值範圍 | 預設值 |
---|---|---|---|
option_var_1_web_js |
設定工作的執行模式。系統提供兩種模式: IMAGE:單一圖片輸入的模式。 影片:這種模式為影片中解碼的影格或即時輸入資料 (例如攝影機) 的直播。 |
{IMAGE, VIDEO } |
IMAGE |
minDetectionConfidence |
系統會將臉部偵測判定為成功的最低可信度分數。 | Float [0,1] |
0.5 |
minSuppressionThreshold |
系統會將臉部偵測判定為重疊的非最大抑制門檻。 | Float [0,1] |
0.3 |
準備資料
臉部偵測器能以主機瀏覽器支援的任何格式偵測圖片中的臉孔。這項工作也會處理資料輸入預先處理,包括調整大小、旋轉和值正規化。如要偵測影片中的臉孔,您可以使用 API 一次快速處理一個影格,並依據影格的時間戳記判斷臉孔何時發生在影片中。
執行工作
臉部偵測器會使用 detect()
(執行模式為 image
) 和 detectForVideo()
(執行模式 video
) 方法觸發推論。工作會處理資料、嘗試偵測臉孔,然後回報結果。
對臉部偵測器 detect()
和 detectForVideo()
方法的呼叫會同步執行,並封鎖使用者介面執行緒。如果裝置攝影機的影片影格中偵測到臉孔,每次偵測都會封鎖主執行緒。如要避免這種情況發生,您可以實作網路 worker,在其他執行緒上執行 detect()
和 detectForVideo()
方法。
下列程式碼示範如何使用工作模型執行處理作業:
圖片
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
影片
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(); }); }
如需執行臉部偵測器工作的完整實作資訊,請參閱程式碼範例。
處理並顯示結果
每次執行偵測時,臉部偵測器都會產生臉部偵測器結果物件。結果物件包含圖片座標中的臉孔和世界座標的臉孔。
以下為這項工作的輸出資料範例:
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)
下圖以視覺化方式呈現工作輸出內容:
如果圖片沒有定界框,請參閱原始圖片。
臉部偵測器範例程式碼示範如何顯示工作傳回的結果,請參閱程式碼範例