網頁版手勢辨識指南 (網頁版)

MediaPipe 手勢辨識器工作可讓你即時辨識手勢，以及會顯示系統辨識的手部手勢結果和一隻手。下列操作說明說明如何使用手勢辨識器適用於網頁和 JavaScript 應用程式

您可以前往 demo」。進一步瞭解功能、模型和設定選項請參閱總覽。

程式碼範例

手勢辨識器的範例程式碼提供了這項功能的完整實作方便您參考。這個程式碼可協助您測試這項工作並開始打造自己的手勢辨識應用程式您可以查看、執行編輯手勢辨識器程式碼範例只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟就是專門使用手勢辨識器如需設定您的網路和 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 函式可讓您自訂具備設定選項的手勢辨識器。進一步瞭解設定選項，請參閱設定選項。

以下程式碼示範如何使用自訂選項建構及設定工作選項：

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

設定選項

這項工作具有下列網頁應用程式設定選項：

選項名稱	說明	值範圍	預設值
`runningMode`	設定任務的執行模式。這裡共有兩個模式：圖片：單一圖片輸入模式。 VIDEO：此模式適用於影片或即時串流等輸入資料 (例如攝影機) 時	{`IMAGE, VIDEO`}	`IMAGE`
`num_hands`	可偵測的手部數量上限 `GestureRecognizer`。	`Any integer > 0`	`1`
`min_hand_detection_confidence`	手部偵測為而且被認定為成功的手掌偵測模型	`0.0 - 1.0`	`0.5`
`min_hand_presence_confidence`	手部狀態的最小可信度分數地標偵測模型在手勢辨識器的影片模式和直播模式中，如果手部地標模型的「在家狀態」信心分數低於就會觸發手掌偵測模型否則，輕量手動追蹤演算法，手勢偵測後續的地標偵測。	`0.0 - 1.0`	`0.5`
`min_tracking_confidence`	要考慮手部追蹤的最低可信度分數成功。這是手中各部位的定界框 IoU 門檻目前的影格和最後一個影格在影片模式和串流模式中，手勢辨識器 (如果追蹤失敗，手勢辨識器會觸發手) 偵測。否則，系統會略過手部偵測作業。	`0.0 - 1.0`	`0.5`
`canned_gestures_classifier_options`	罐頭手勢分類器行為的設定選項。罐頭手勢為：`["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]` 顯示名稱語言代碼：透過 TFLite 模型中繼資料指定的顯示名稱 (如有) 使用的語言代碼。結果數量上限：要傳回的分類結果分數上限。如果0，系統會傳回所有可用的結果。分數門檻：低於這個分數的結果會遭到拒絕。如果設為 0，會傳回所有可用的結果。類別許可清單：類別名稱的許可清單。如果非空白，系統會篩除不屬於這個集合的類別結果。與拒絕清單互斥。類別拒絕清單：類別名稱的拒絕清單。如果設為非空白，系統就會篩除這個組合中的類別結果。允許與許可清單互斥，	顯示名稱語言代碼：`any string` 結果數量上限：`any integer` 分數門檻：`0.0-1.0` 類別許可清單：`vector of strings` 類別拒絕清單：`vector of strings`	顯示名稱語言代碼：`"en"` 結果數量上限：`-1` 分數門檻：`0` 類別許可清單：空白類別拒絕清單：空白
`custom_gestures_classifier_options`	自訂手勢分類器行為的設定選項。顯示名稱語言代碼：透過 TFLite 模型中繼資料指定的顯示名稱 (如有) 使用的語言代碼。結果數量上限：要傳回的分類結果分數上限。如果0，系統會傳回所有可用的結果。分數門檻：低於這個分數的結果會遭到拒絕。如果設為 0，會傳回所有可用的結果。類別許可清單：類別名稱的許可清單。如果非空白，系統會篩除不屬於這個集合的類別結果。與拒絕清單互斥。類別拒絕清單：類別名稱的拒絕清單。如果設為非空白，系統就會篩除這個組合中的類別結果。允許與許可清單互斥，	顯示名稱語言代碼：`any string` 結果數量上限：`any integer` 分數門檻：`0.0-1.0` 類別許可清單：`vector of strings` 類別拒絕清單：`vector of strings`	顯示名稱語言代碼：`"en"` 結果數量上限：`-1` 分數門檻：`0` 類別許可清單：空白類別拒絕清單：空白

準備資料

手勢辨識器可以辨識圖片中的手勢，其支援任何格式支援的主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉以及值正規化如要辨識影片的手勢，可以使用 API 快速處理一個影格，方法是使用畫面判斷手勢在影片中的時間點。

執行工作

手勢辨識器使用 recognize() (執行模式為 'image') 和要觸發的 recognizeForVideo() (執行模式 'video') 方法推論出任務會處理資料，並嘗試辨識手語手勢，然後回報結果。

下列程式碼示範如何使用工作模型執行處理程序：

圖片

const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

影片

await gestureRecognizer.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

系統會執行手勢辨識器 recognize() 和 recognizeForVideo() 方法的呼叫以及封鎖使用者介面執行緒如果你認識裝置攝影機擷取的影片影格，每次辨識都會封鎖。如要避免這種情況發生，您可以實作網路工作站來執行其他執行緒上的 recognize() 和 recognizeForVideo() 方法。

如需更完整的執行手勢辨識工具工作實作說明，請參閱程式碼範例。

處理及顯示結果

手勢辨識器會為辨識工作順利進行結果物件包含圖片座標中的手部地標，世界座標中的手部地標、慣用手(左/右手)，以及手部所偵測到的手語。

以下範例顯示這項工作的輸出資料範例：

產生的 GestureRecognizerResult 包含四個元件，而每個元件都是陣列，其中每個元素都包含偵測到單隻手的偵測結果。

慣用手設計

慣用手代表偵測到的手是左手還是右手。
手勢

偵測到的手部已辨識出的手勢類別。
地標

共有 21 個手部地標，每個地標都由 x、y 和 z 座標組成。 x 和 y 座標會依照圖片寬度和 z 座標代表地標深度，手腕的深度就是起點值越小，地標就是相機鏡頭z 的規模大致與下列指標相同： x。
世界著名地標

世界座標也會顯示 21 個手部地標。每個地標由 x、y 和 z 組成，代表實際的 3D 座標公尺，將感應器放在手部的幾何中心。

GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

下圖顯示工作輸出內容的示意圖：

如需更完整的實作建立手勢辨識工具工作，請參閱程式碼範例。