手のランドマーク検出ガイド（ウェブ用）

MediaPipe の手のランドマーカー タスクを使用すると、画像内の手のランドマークを検出できます。 ここでは、ハンド ランドマークマーカーの使い方を説明します。 ウェブアプリと JavaScript ライブラリです

機能、モデル、構成オプションの詳細については、 概要をご覧ください。

サンプルコード

Handmark のサンプル コードは、これを完全に実装しています。 タスクを示しています。このコードは、このタスクをテストして、 は、独自の手ランドマーク検出アプリの作成を始めました。特定のリソースを表示、実行、 手のランドマークのサンプルコードを編集する できます。

セットアップ

このセクションでは、開発環境を設定するための主な手順について説明します。 ハンドランドマーカーを使用できます一般的な情報については、 セットアップして、以下を含むウェブと JavaScript の開発環境をセットアップできます。 プラットフォーム バージョンの要件については、 ウェブ用の設定ガイド

JavaScript パッケージ

ハンド ランドマーク コードは、MediaPipe @mediapipe/tasks-vision で利用できます NPM パッケージ。Google Chat では プラットフォームの手順に沿って、ライブラリを検索してダウンロードしてください。 設定ガイド

<ph type="x-smartling-placeholder">

必要なパッケージは NPM からインストールできます。 次のコマンドを使用します。

npm install @mediapipe/tasks-vision

コンテンツ配信ネットワーク（CDN）経由でタスクコードをインポートする場合 追加するには、次のコードを <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 handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

構成オプション

このタスクには、ウェブと JavaScript 用に次の構成オプションがあります。 アプリケーション:

オプション名 説明 値の範囲 デフォルト値
runningMode タスクの実行モードを設定します。2 つのモデル モード:

IMAGE: 単一画像入力のモード。

VIDEO: 音声データのデコードされたフレームのモード 入力データのライブ ストリームで実行できます。		 {IMAGE, VIDEO} IMAGE
numHands 手のランドマーク検出機能で検出される手の最大数。 Any integer > 0 1
minHandDetectionConfidence ハンド検出の最小信頼スコアは、 成功したと考えられています。 0.0 - 1.0 0.5
minHandPresenceConfidence 手のプレゼンス スコアの最小信頼スコア モデルです。動画モードとライブ配信モードでは 手のランドマーク モデルの手の存在の信頼スコアが以下の場合 手のひら検出モデルがトリガーされます。それ以外の場合: 軽量のハンド トラッキング アルゴリズムによって、 その後のランドマーク検出に使用します。 0.0 - 1.0 0.5
minTrackingConfidence ハンド トラッキングの最小信頼スコア 成功です。グラフ内の手間の境界ボックスの IoU しきい値です。 現在のフレームと最後のフレームが表示されます。動画モードとストリーム モードでは、 手の地面マーカー（追跡がうまくいかなかった場合、手の地面マーカーが手を動かします） できます。それ以外の場合は、手の検出をスキップします。 0.0 - 1.0 0.5

データの準備

ハンド ランドマーク マーカーは、 ホスト ブラウザ。このタスクでは、次を含むデータ入力の前処理も処理されます。 サイズ変更、回転、値の正規化です。動画内の手のランドマークを検出するには API を使用して、タイムスタンプを使用して一度に 1 つのフレームをすばやく処理できます。 動画内に手のランドマークが発生するタイミングを特定します。

タスクを実行する

ハンド マーカーは、detect()（走行モード image）を使用します。 トリガーする detectForVideo() メソッド（実行モードは video） 説明します。このタスクはデータを処理し、手のランドマークの検出と、 結果を報告します

手のランドマークの detect() メソッドと detectForVideo() メソッドの呼び出しが実行されます。 ユーザー インターフェース スレッドをブロックします。手のランドマークを検出した場合 動画フレームでは、検出のたびにメイン フレームが 使用します。これを防ぐには、detect() を実行するウェブ ワーカーを実装します。 と detectForVideo() メソッドを別のスレッドに配置します。

次のコードは、タスクモデルを使用して処理を実行する方法を示しています。

画像

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

動画

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

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

  if (video.currentTime !== lastVideoTime) {
    const detections = handLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

ハンド ランドマーカー タスクの実行のより詳細な実装については、 コードサンプルをご覧ください。

結果の処理と表示

ハンド ランドマーカーは、検出ごとにハンド ランドマーク結果オブジェクトを生成します あります。結果のオブジェクトには、画像座標の手のランドマーク、手のひら 検出された対象物の世界座標と利き手（左手/右手）のランドマーク できます。

このタスクからの出力データの例を次に示します。

HandLandmarkerResult の出力には 3 つのコンポーネントが含まれます。各コンポーネントは配列で、各要素には検出された 1 つの手について以下の結果が含まれます。

  • 利き手

    利き手は、検出された手が左手か右手かを表します。

  • ランドマーク

    21 個のハンド ランドマークがあり、それぞれ x、y、z 座標で構成されています。「 x 座標と y 座標は、画像の幅と [0.0, 1.0] に正規化されます。 あります。z 座標はランドマークの深さを表します。 手首の奥行きが原点になります。値が小さいほど、 カメラに映し出されますz の大きさは、 x。

  • 世界の名所

    21 の針のランドマークも世界座標で示されています。各ランドマーク は x、y、z で構成されており、次の現実世界の 3D 座標を表します。 m を、手の幾何学的中心を原点とします。

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  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)

次の図は、タスク出力を可視化したものです。

ハンド マーカーのサンプル コードでは、 結果については、 コードサンプル