MediaPipe のポーズのランドマーク タスクでは、画像や動画に含まれる人体のランドマークを検出できます。このタスクを使用して、身体の主な位置の特定、姿勢の分析、動作の分類を行うことができます。このタスクでは、単一の画像または動画で動作する機械学習(ML)モデルを使用します。このタスクは、身体の姿勢のランドマークを画像座標と 3 次元の世界座標で出力します。
ここでは、ウェブアプリや JavaScript アプリでポーズ ランドマーク er を使用する方法について説明します。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。
サンプルコード
参考までに、ポーズ ランドマーク er のサンプルコードでは、このタスクの完全な実装を JavaScript で説明しています。このコードは、このタスクをテストして、独自のポーズ ランドマーク アプリの作成を開始するのに役立ちます。ウェブブラウザだけで、ポーズのランドマークのサンプルコードを表示、実行、編集できます。
セットアップ
このセクションでは、特にポーズ ランドマークャーを使用するための開発環境をセットアップする主な手順について説明します。プラットフォームのバージョン要件など、ウェブと JavaScript の開発環境の設定に関する一般的な情報については、ウェブの設定ガイドをご覧ください。
JavaScript パッケージ
姿勢ランドマーク er コードは MediaPipe @mediapipe/tasks-vision
NPM パッケージから入手できます。これらのライブラリは、プラットフォームの設定ガイドの手順に沿って検索してダウンロードできます。
必要なパッケージは、次のコマンドを使用して NPM でインストールできます。
npm install @mediapipe/tasks-vision
コンテンツ配信ネットワーク(CDN)サービスを介してタスクコードをインポートする場合は、HTML ファイルの <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 のポーズのランドマーク タスクには、このタスクと互換性のあるトレーニング済みモデルが必要です。ポーズのランドマークで利用可能なトレーニング済みモデルの詳細については、タスクの概要のモデル セクションをご覧ください。
モデルを選択してダウンロードし、プロジェクト ディレクトリに保存します。
<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 |
タスクの実行モードを設定します。モードは 2 つあります。 IMAGE: 単一の画像入力のモード。 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 |
検出されたポーズのセグメンテーション マスクを姿勢ランドマーク er が出力するかどうか。 | Boolean |
False |
データの準備
ポーズのランドマークは、ホストブラウザでサポートされている任意の形式の画像内のポーズを検出できます。このタスクは、サイズ変更、回転、値の正規化など、データ入力の前処理も処理します。動画内のポーズにランドマークを定めるには、API を使用して一度に 1 フレームずつ迅速に処理し、フレームのタイムスタンプを使用して、動画内でポーズがいつ発生したかを判断します。
タスクを実行する
ポーズのランドマークは、detect()
メソッド(ランニング モード IMAGE
を使用)と detectForVideo()
メソッド(ランニング モード VIDEO
を使用)を使用して推論をトリガーします。このタスクはデータを処理し、ポーズのランドマークを試行して、その結果を報告します。
ポーズのランドマークの 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(); }); }
ポーズのランドマーク タスクの実行の完全な実装については、コードサンプルをご覧ください。
結果を処理して表示する
ポーズのランドマークは、検出を実行するたびに 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
: 画像の幅(x
)と高さ(y
)で正規化された 0.0 ~ 1.0 のランドマーク座標。z
: ランドマークの深さ。ヒップの中間点の深さを原点とします。値が小さいほど、ランドマークがカメラに近づきます。z の大きさは、x
とほぼ同じスケールを使用します。visibility
: ランドマークが画像内に表示される可能性。
出力には次のワールド座標(WorldLandmarks
)が含まれます。
x
、y
、z
: ヒップの中心を原点とする実際の 3 次元座標(メートル単位)。visibility
: ランドマークが画像内に表示される可能性。
次の図は、タスク出力を可視化したものです。
オプションのセグメンテーション マスクは、各ピクセルが検出された人物に属する可能性を表します。次の画像は、タスク出力のセグメンテーション マスクです。
姿勢のランドマーク er サンプルコードは、タスクから返された結果を表示する方法を示しています(コードサンプルを参照)。