MediaPipe ジェスチャー認識タスクを使用すると、手のジェスチャーをリアルタイムで認識し、認識された手のジェスチャーの結果と検出された手のランドマークを提供します。ここでは、ウェブアプリと JavaScript アプリでジェスチャー認識ツールを使用する方法について説明します。
このタスクの実際の動作は、デモで確認できます。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。
サンプルコード
参考までに、ジェスチャー認識ツールのサンプルコードでは、このタスクの完全な実装を JavaScript で提供しています。このコードは、このタスクをテストし、独自のジェスチャー認識アプリの作成を開始するのに役立ちます。ウェブブラウザだけで、ジェスチャー認識のサンプルコードを表示、実行、編集できます。
セットアップ
このセクションでは、特にジェスチャー認識機能を使用するための開発環境をセットアップする主な手順について説明します。プラットフォームのバージョン要件など、ウェブと 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 |
タスクの実行モードを設定します。モードは 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"] です。 |
|
|
custom_gestures_classifier_options |
カスタム ジェスチャー分類器の動作を設定するオプション。 |
|
|
データの準備
ジェスチャー認識ツールは、ホストブラウザでサポートされている任意の形式の画像内の操作を認識できます。このタスクは、サイズ変更、回転、値の正規化など、データ入力の前処理も処理します。動画内の操作を認識するには、API を使用して一度に 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() メソッドの呼び出しは同期的に実行され、ユーザー インターフェース スレッドをブロックします。デバイスのカメラからの動画フレームの操作を認識すると、認識のたびにメインスレッドがブロックされます。これを防ぐには、ウェブ ワーカーを実装して recognize() メソッドと recognizeForVideo() メソッドを別のスレッドで実行します。
ジェスチャー認識タスクの実行の完全な実装については、コードサンプルをご覧ください。
結果を処理して表示する
ジェスチャー認識ツールは、認識を実行するたびにジェスチャー検出結果オブジェクトを生成します。結果オブジェクトには、画像座標の手のランドマーク、世界座標の手のランドマーク、利き手（左手と右手）、検出された手のジェスチャーのカテゴリが含まれます。
このタスクからの出力データの例を次に示します。
結果として得られる GestureRecognizerResult には 4 つのコンポーネントが含まれ、各コンポーネントは配列です。各要素には、検出された 1 つの手の検出結果が含まれます。
利き手
利き手は、検出された手が左手か右手かを表します。
操作
検出された手の認識されるジェスチャー カテゴリ。
ランドマーク
21 個の手のランドマークがあり、それぞれ
x、y、z座標で構成されています。x座標とy座標は、それぞれ画像の幅と高さによって [0.0, 1.0] に正規化されます。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)
次の図は、タスク出力を可視化したものです。
ジェスチャー認識タスクの作成のより完全な実装については、コードサンプルをご覧ください。