MediaPipe Pose 地標工作可讓您偵測圖片或影片中的人體地標。您可以使用這項工作來識別關鍵主體位置、分析姿勢,以及將運動分類。這項工作採用的機器學習 (ML) 模型 適用於單一圖片或影片工作會輸出圖片座標和 3D 世界座標中的身體姿勢地標。
以下操作說明將說明如何在網路和 JavaScript 應用程式中使用 Pose Ranker。如要進一步瞭解此工作的功能、模型和設定選項,請參閱總覽。
程式碼範例
Pose Landmarker 的範例程式碼提供這項任務的完整實作方式,供您參考。這段程式碼可協助您測試這項工作,並開始建構自己的姿勢地標應用程式。只要使用網路瀏覽器,就可以查看、執行及編輯 Posemarker 範例程式碼。
設定
本節將特別說明設定開發環境的重要步驟,以便用於使用 Pose 地標工具。如需瞭解如何設定網站和 JavaScript 開發環境的一般資訊,包括平台版本需求,請參閱網頁版設定指南。
JavaScript 套件
您可以透過 MediaPipe @mediapipe/tasks-vision
NPM 套件取得 Pose Ranker 代碼。您可以依照平台設定指南中的操作說明,尋找及下載這些程式庫。
您可以使用下列指令,透過 NPM 安裝所需套件:
npm install @mediapipe/tasks-vision
如要透過內容傳遞網路 (CDN) 服務匯入工作程式碼,請將下列程式碼加進 HTML 檔案的 <head> 標記中:
<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
型號
MediaPipe Posemarker 工作需要使用與這項工作相容的已訓練模型。如要進一步瞭解 Pose Marker 可用的已訓練模型,請參閱工作總覽「模型」一節。
選取並下載模型,然後將其儲存在專案目錄中:
<dev-project-root>/app/shared/models/
建立工作
使用其中一個姿勢地標 createFrom...()
函式,準備執行推論工作。使用 createFromModelPath()
函式搭配已訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體,您可以使用 createFromModelBuffer()
方法。
以下程式碼範例示範如何使用 createFromOptions()
函式設定工作。createFromOptions()
函式可讓您使用設定選項自訂「Pose 地標」工具。如要進一步瞭解設定選項,請參閱「設定選項」一文。
以下程式碼示範如何使用自訂選項建構及設定工作:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
設定選項
這項工作有以下網頁和 JavaScript 應用程式的設定選項:
選項名稱 | 說明 | 值範圍 | 預設值 |
---|---|---|---|
runningMode |
設定工作的執行模式。系統提供兩種模式: IMAGE:單一圖片輸入的模式。 影片:這種模式為影片中解碼的影格或即時輸入資料 (例如攝影機) 的直播。 |
{IMAGE, VIDEO } |
IMAGE |
numPoses |
姿勢地標可以偵測到的姿勢數量上限。 | Integer > 0 |
1 |
minPoseDetectionConfidence |
判定姿勢偵測作業成功所需的最低可信度分數。 | Float [0.0,1.0] |
0.5 |
minPosePresenceConfidence |
在姿勢地標偵測中,姿勢狀態分數的最小可信度分數 | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
要判定姿勢追蹤成功的可信度分數下限, | Float [0.0,1.0] |
0.5 |
outputSegmentationMasks |
是否要為偵測到的姿勢輸出區隔遮罩。 | Boolean |
False |
準備資料
Posemarker 可以用主機瀏覽器支援的任何格式偵測圖片中的姿勢。這項工作也會處理資料輸入預先處理,包括調整大小、旋轉和值正規化。為影片中的地標姿勢,您可以使用 API 一次快速處理一個影格,使用影格的時間戳記來確定該姿勢的發生時間。
執行工作
「Pose Ranker」會使用 detect()
(執行模式 IMAGE
) 和 detectForVideo()
(執行模式 VIDEO
) 方法來觸發推論。工作會處理資料、嘗試標示位置,然後回報結果。
對 Posemarker detect()
和 detectForVideo()
方法發出的呼叫會同步執行,並封鎖使用者交替執行緒。如果從裝置攝影機的影片影格中偵測到姿勢,每次偵測都會封鎖主執行緒。如要避免這種情況發生,您可以實作網路 worker,在其他執行緒上執行 detect()
和 detectForVideo()
方法。
下列程式碼示範如何使用工作模型執行處理作業:
圖片
const image = document.getElementById("image") as HTMLImageElement; const poseLandmarkerResult = poseLandmarker.detect(image);
影片
await poseLandmarker.setOptions({ runningMode: "VIDEO" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const poseLandmarkerResult = poseLandmarker.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
如需更完整的導入程序,請參閱程式碼範例。
處理並顯示結果
Pose 地標 er 會在每次執行偵測時傳回 poseLandmarkerResult
物件。結果物件含有每個姿勢地標的座標。
以下為這項工作的輸出資料範例:
PoseLandmarkerResult:
Landmarks:
Landmark #0:
x : 0.638852
y : 0.671197
z : 0.129959
visibility : 0.9999997615814209
presence : 0.9999984502792358
Landmark #1:
x : 0.634599
y : 0.536441
z : -0.06984
visibility : 0.999909
presence : 0.999958
... (33 landmarks per pose)
WorldLandmarks:
Landmark #0:
x : 0.067485
y : 0.031084
z : 0.055223
visibility : 0.9999997615814209
presence : 0.9999984502792358
Landmark #1:
x : 0.063209
y : -0.00382
z : 0.020920
visibility : 0.999976
presence : 0.999998
... (33 world landmarks per pose)
SegmentationMasks:
... (pictured below)
輸出結果同時包含每個地標的正規化座標 (Landmarks
) 和世界座標 (WorldLandmarks
)。
輸出結果包含以下正規化座標 (Landmarks
):
x
和y
:地標座標介於 0.0 到 1.0 之間,依照圖片寬度 (x
) 和高度 (y
) 進行正規化。z
:地標深度,以臀部中間點為起點。值越小,地標與相機鏡頭越近。Z 規模使用的縮放比例與x
大致相同。visibility
:地標在圖片中可見的可能性。
輸出結果包含以下世界座標 (WorldLandmarks
):
x
、y
和z
:實際 3 維座標 (以公尺為單位),以臀部中間點做為起點。visibility
:地標在圖片中可見的可能性。
下圖以視覺化方式呈現工作輸出內容:
選用的區隔遮罩代表每個像素屬於偵測到人員的可能性。下圖是工作輸出的區隔遮罩:
Pose Ranker 範例程式碼會示範如何顯示工作傳回的結果,請參閱程式碼範例