隆重推出 LiteRT：Google 為裝置端 AI (舊稱 TensorFlow Lite) 打造的高效能執行階段。

本頁面由 Cloud Translation API 翻譯而成。

網頁版的姿勢地標偵測指南

MediaPipe Pose Drager 任務可讓你偵測圖片中人體的人物地標影片。您可以用這項工作找出主要的身體位置、分析情況以及分類運動這項工作採用的機器學習 (ML) 模型適用於單一圖片或影片這項工作會輸出圖片中的身體姿勢地標以及 3D 世界座標。

以下指示示範如何使用 Pose 地標在網頁和 JavaScript 上使用應用程式。進一步瞭解功能、模型和設定請參閱總覽。

程式碼範例

Pose 地標 er 範例程式碼提供了完整實作方便您參考。這個程式碼可協助您測試這項工作開始建構自己的姿勢地標應用程式您可以查看、執行編輯 Pose Lander 程式碼範例只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟我們特別針對 Pose Lander 使用如需設定您的網路和 JavaScript 開發環境，包含平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

可透過 MediaPipe @mediapipe/tasks-vision 取得 Pose 地標代碼 NPM 套件。你可以才能找到並下載這些程式庫。設定指南。

您可以透過 NPM 安裝必要的套件使用以下指令：

npm install @mediapipe/tasks-vision

如果想要透過內容傳遞網路 (CDN) 匯入工作程式碼請在 <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 Pose Lander 工作需要經過訓練且與此系統相容的模型工作。如要進一步瞭解 Pose 地標 er 可用的已訓練模型，請參閱：工作總覽的「模型」一節。

選取並下載模型，然後將模型儲存在專案目錄中：

<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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

設定選項

這項工作包含以下網頁和 JavaScript 設定選項應用程式：

選項名稱	說明	值範圍	預設值
`runningMode`	設定任務的執行模式。這裡共有兩個模式：圖片：單一圖片輸入模式。 VIDEO：此模式適用於影片或即時串流等輸入資料 (例如攝影機) 時	{`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`	Pose 地標 er 是否會為偵測到的警示輸出區隔遮罩姿勢。	`Boolean`	`False`

準備資料

姿勢地標可以偵測圖片中的姿勢，主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉以及值正規化如要在影片中標記姿勢，您可以運用這個 API 的時間戳記，的影格數，決定特定姿勢在影片中出現的時間。

執行工作

Pose Placeer 使用 detect() (搭配跑步模式 IMAGE) 和要觸發的 detectForVideo() (執行模式 VIDEO) 方法推論出這項工作會處理資料、嘗試建立地標姿勢，然後回報結果

對 Pose 地標的 detect() 和 detectForVideo() 方法發出的呼叫會執行同步方式，並封鎖使用者交錯執行緒。如果偵測到姿勢，每次偵測都會封鎖。如要避免這種情況發生，您可以實作網路工作站來執行 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：實際 3D 座標 (以公尺為單位)，這兩個字的起源
visibility：地標在圖片中可見的可能性。

下圖是工作輸出內容的視覺化呈現：

選用的區隔遮罩代表每個像素歸屬的可能性並提供給偵測到的人下圖是工作輸出：

這個範例程式碼顯示如何顯示查看工作傳回的結果程式碼範例