MediaPipe Face Marker 工作可讓您偵測圖片和影片中的臉孔地標和臉部表情。您可以使用這項工作來識別人臉表情、套用臉部濾鏡和特效,以及建立虛擬顯示圖片。這項工作使用的機器學習 (ML) 模型可與單一圖片或連續圖片串流搭配使用。這個工作會輸出 3D 臉部地標、混合形狀分數 (代表臉部表情的係數) 來即時推論出詳細臉部面,並轉換矩陣,執行轉譯效果所需的轉換。
以下操作說明將說明如何在網路和 JavaScript 應用程式中使用「臉孔地標」功能。如要進一步瞭解此工作的功能、模型和設定選項,請參閱總覽。
程式碼範例
Face 地標工具的範例程式碼提供這項任務的完整實作方式,以做為參考。這段程式碼可協助您測試這項工作,並開始建構您自己的臉部地標應用程式。只要使用網路瀏覽器,即可查看、執行和編輯臉部地標工具範例程式碼。
設定
本節將針對使用臉孔地標工具,特別說明如何設定開發環境的重要步驟。如需瞭解如何設定網站和 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 Face Marker 工作需要經過訓練且與這項工作相容的模型。如要進一步瞭解「臉孔地標工具」的可用已訓練模型,請參閱工作總覽「模型」一節。
選取並下載模型,然後將其儲存在專案目錄中:
<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 faceLandmarker = await faceLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
設定選項
這項工作有以下網頁和 JavaScript 應用程式的設定選項:
選項名稱 | 說明 | 值範圍 | 預設值 |
---|---|---|---|
running_mode |
設定工作的執行模式。系統提供兩種模式: IMAGE:單一圖片輸入的模式。 影片:這種模式為影片中解碼的影格或即時輸入資料 (例如攝影機) 的直播。 |
{IMAGE, VIDEO } |
IMAGE |
numFaces |
FaceLandmarker 可以偵測的臉孔數量上限。只有在 num_faces 設為 1 時,系統才會套用平滑效果。 |
Integer > 0 |
1 |
minFaceDetectionConfidence |
用於判定臉部偵測成功率的最低可信度分數。 | Float [0.0,1.0] |
0.5 |
minFacePresenceConfidence |
在臉部地標偵測中,臉孔存在分數的最低可信度分數。 | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
臉部追蹤偵測結果的可信度下限。 | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
是否將臉孔地標工具輸出的內容呈現在臉上。 臉部混合形狀是用來算繪 3D 臉部模型。 | Boolean |
False |
outputFacialTransformationMatrixes |
指定 FaceLandmarker 是否輸出臉部變形矩陣。FaceLandmarker 使用矩陣,將臉部地標從標準臉部模型轉換為偵測到的臉孔,讓使用者能對偵測到的地標套用效果。 | Boolean |
False |
準備資料
臉孔地標工具可以偵測圖片中圖片的臉孔,且該格式是主機瀏覽器支援的任何格式。這項工作也會處理資料輸入預先處理,包括調整大小、旋轉和值正規化。如要在影片中標記臉孔,您可以使用 API 快速處理一個影格,只要用影格的時間戳記判斷臉孔發生的時間即可。
執行工作
錶面地標會使用 detect()
(執行模式 IMAGE
) 和 detectForVideo()
(執行模式 VIDEO
) 方法來觸發推論。工作會處理資料、嘗試標示臉孔,然後回報結果。
對臉孔地標 detect()
和 detectForVideo()
方法發出的呼叫會同步執行,並封鎖使用者介面執行緒。如果裝置攝影機的影片影格中偵測到臉孔,每次偵測都會封鎖主執行緒。如要避免這種情況發生,您可以實作網路 worker,在其他執行緒上執行 detect()
和 detectForVideo()
方法。
下列程式碼示範如何使用工作模型執行處理作業:
圖片
const image = document.getElementById("image") as HTMLImageElement; const faceLandmarkerResult = faceLandmarker.detect(image);
影片
await faceLandmarker.setOptions({ runningMode: "VIDEO" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const faceLandmarkerResult = faceLandmarker.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
如要進一步瞭解如何執行「臉孔地標」工作,請參閱程式碼範例。
處理並顯示結果
臉孔地標 er 會在每次執行偵測時傳回結果物件。結果物件會包含每個偵測到的臉孔網格,以及每個臉孔地標的座標。結果物件也可以視需要包含混合形狀 (表示臉部表情),以及臉部轉換矩陣,對偵測到的地標套用臉部效果。
以下為這項工作的輸出資料範例:
FaceLandmarkerResult:
face_landmarks:
NormalizedLandmark #0:
x: 0.5971359014511108
y: 0.485361784696579
z: -0.038440968841314316
NormalizedLandmark #1:
x: 0.3302789330482483
y: 0.29289937019348145
z: -0.09489090740680695
... (478 landmarks for each face)
face_blendshapes:
browDownLeft: 0.8296722769737244
browDownRight: 0.8096957206726074
browInnerUp: 0.00035583582939580083
browOuterUpLeft: 0.00035752105759456754
... (52 blendshapes for each face)
facial_transformation_matrixes:
[9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
[1.66496094e-02, 9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
...
下圖以視覺化方式呈現工作輸出內容:
Face Marker 範例程式碼會示範如何顯示工作傳回的結果,請參閱程式碼範例