ウェブ用ジェスチャー認識ガイド

MediaPipe ジェスチャー認識タスクを使用すると、手のジェスチャーをリアルタイムで認識できます。 認識された手の動きの結果と、指のランドマークが 検出されます。ここでは、ジェスチャー認識ツールの使用方法について説明します。 ウェブアプリと JavaScript ライブラリです

このタスクの動作を確認するには、 demo。 機能、モデル、構成オプションの詳細については、 概要をご覧ください。

サンプルコード

ジェスチャー認識ツールのコード例では、この実装方法を完全に実装しています。 タスクを示しています。このコードは、このタスクをテストして、 独自のジェスチャー認識アプリの作成を始めました。特定のリソースを表示、実行、 ジェスチャー認識機能のサンプルコードを編集 できます。

セットアップ

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

JavaScript パッケージ

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

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

必要なパッケージは 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 ジェスチャー認識タスクには、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 タスクの実行モードを設定します。2 つのモデル モード:

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

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"]
です
  • Display Name locale: TFLite Model Metadata で指定された表示名に使用する言語 / 地域（存在する場合）。
  • 最大結果数: 返される上位スコアの分類結果の最大数。<0 の場合、利用可能な結果がすべて返されます。
  • スコアしきい値: 下回った結果が拒否されるスコア。0 に設定すると、利用可能な結果がすべて返されます。
  • カテゴリの許可リスト: カテゴリ名の許可リスト。空でない場合、このセットにカテゴリがない分類結果は除外されます。拒否リストとは相互に排他的。
  • カテゴリの拒否リスト: カテゴリ名の拒否リスト。空でない場合、このセット内にカテゴリがある分類結果は除外されます。許可リストとは相互に排他的。
    		•
    • 表示名の言語 / 地域: any string
    • 最大結果数: any integer
    • スコアしきい値: 0.0-1.0
    • カテゴリの許可リスト: vector of strings
    • カテゴリの拒否リスト: vector of strings
    • 表示名の言語 / 地域: "en"
    • 最大結果数: -1
    • スコアしきい値: 0
    • カテゴリの許可リスト: 空
    • カテゴリの拒否リスト: 空
    custom_gestures_classifier_options カスタム ジェスチャー分類器の動作を設定するオプション。
  • Display Name locale: TFLite Model Metadata で指定された表示名に使用する言語 / 地域（存在する場合）。
  • 最大結果数: 返される上位スコアの分類結果の最大数。<0 の場合、利用可能な結果がすべて返されます。
  • スコアしきい値: 下回った結果が拒否されるスコア。0 に設定すると、利用可能な結果がすべて返されます。
  • カテゴリの許可リスト: カテゴリ名の許可リスト。空でない場合、このセットにカテゴリがない分類結果は除外されます。拒否リストとは相互に排他的。
  • カテゴリの拒否リスト: カテゴリ名の拒否リスト。空でない場合、このセット内にカテゴリがある分類結果は除外されます。許可リストとは相互に排他的。
    		•
    • 表示名の言語 / 地域: any string
    • 最大結果数: any integer
    • スコアしきい値: 0.0-1.0
    • カテゴリの許可リスト: vector of strings
    • カテゴリの拒否リスト: vector of strings
    • 表示名の言語 / 地域: "en"
    • 最大結果数: -1
    • スコアしきい値: 0
    • カテゴリの許可リスト: 空
    • カテゴリの拒否リスト: 空

    データの準備

    ジェスチャー認識機能は、 ホスト ブラウザ。このタスクでは、次を含むデータ入力の前処理も処理されます。 サイズ変更、回転、値の正規化です。動画内のジェスチャーを認識するには、 のタイムスタンプを使用して一度に 1 つのフレームをすばやく処理できます。 動画内でジェスチャーが発生するタイミングを判定します。

    タスクを実行する

    ジェスチャー 認識ツールは 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() メソッドの呼び出しが実行されると、 ユーザー インターフェース スレッドをブロックします。Google Chat でジェスチャーを認識した場合は、 動画フレームを生成すると、その認識のたびにメイン フレームが 使用します。これを防ぐには、ウェブ ワーカーを実装して 別のスレッドの recognize() メソッドと recognizeForVideo() メソッド。

    ジェスチャー認識タスク実行の詳細な実装については、 コードサンプルをご覧ください。

    結果の処理と表示

    ジェスチャー認識ツールは、操作ごとに 認識されます。結果のオブジェクトには、画像座標の手のランドマークが含まれます。 世界座標、利き手（左手と右手）、手の手のランドマーク 検出された手のジェスチャー カテゴリです。

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

    結果の GestureRecognizerResult には 4 つのコンポーネントが含まれます。各要素は配列で、各要素には 1 つの検出された手の検出結果が含まれます。

    • 利き手

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

    • ジェスチャー

      検出された手で認識されたジェスチャーのカテゴリ。

    • ランドマーク

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

    • 世界の名所

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

    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)

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

    ジェスチャー認識タスク作成の詳細な実装については、 コードサンプルをご覧ください。