手の動きをリアルタイムで監視するための Handtrack.js ライブラリ (推奨)

【はじめに】: Handtrack.jsは、ブラウザ上で直接リアルタイムの手の動きの追跡と検出を実装できるプロトタイプライブラリです。Tensorflow によってトレーニングされたオープンソースモデルであり、ユーザーが自分でトレーニングする必要はありません。これを使用すると、わずか数行のコードで画像内の手の動きを検出できます。

GitHub ホームページ

https://github.com/victordibi...

1. はじめに

Handtrack.jsは、 TensorFlowオブジェクト検出 API トレーニングモデルに基づいて構築されています。カメラを通じて手の動きをリアルタイムで監視できます。主な機能は次のとおりです。

ハンドトラック.js

2. 適用シナリオ

ジェスチャーベースのインタラクティブなエクスペリエンスに興味がある場合は、 Handtrack.js役立つかもしれません。ユーザーは追加のセンサーやハードウェアを使用せずに、ジェスチャーベースのインタラクティブなエクスペリエンスを即座に得ることができます。

関連するアプリケーションシナリオ:

制御目的を達成するために、マウスの動きを手の動きにマッピングします。
手が他のオブジェクトと重なると、意味のあるインタラクション信号（オブジェクトに触れる、選択するなど）を示すことができます。
人間の手の動きが何らかの活動認識のエージェントとして機能するシナリオ（例：ビデオや画像内のチェスプレーヤーの動きを自動的に追跡する）、または画像やビデオフレーム内に何人の人がいるかを単純に数えること。
最小限のセットアップで誰でも簡単に実行したり体験したりできるデモを作成します。

3. 使用方法

ライブラリの URL をscriptタグに直接含めることも、ビルドツールを使用して npm からインポートすることもできます。

3.1 スクリプトタグの使用

Handtrack.jsの縮小された js ファイルは現在、Web アプリケーションに任意の npm パッケージを含めることができる無料のオープンソース CDN である jsdelivr でホストされています。

<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

<img id="img" src="hand.jpg"/> 
<キャンバスid="キャンバス" クラス="境界線"></キャンバス>

上記のscriptタグをhtmlページに追加したら、次に示すようにhandTrack変数を使用してhandtrack.js参照できます。

<スクリプト>
 定数img = document.getElementById('img'); 
 定数キャンバス = document.getElementById('キャンバス');
 定数コンテキスト = canvas.getContext('2d');
 
 // モデルをロードします。
 handTrack.load().then(モデル => {
 model.detect(img).then(予測 => {
  console.log('予測: ', predictions); 
 });
 });
</スクリプト>

上記のコードスニペットは、 imgタグ経由で渡された画像の予測境界ボックスを出力します。代わりにビデオまたは Web カメラ経由でフレームを入力する場合は、各フレームに表示される手を「追跡」できます。

3.2 NPMの使用

次のコマンドを使用して、handtrack.js を npm パッケージとしてインストールできます。

npm をインストール --save handtrackjs

その後、Web アプリケーションに例をインポートして使用できます。

'handtrackjs' から handTrack として * をインポートします。

定数img = document.getElementById('img');

// モデルをロードします。
handTrack.load().then(モデル => {
 // 画像内のオブジェクトを検出します。
 console.log("モデルがロードされました")
 model.detect(img).then(予測 => {
 console.log('予測: ', predictions); 
 });
});

3.3 ハンドトラック.js API

Handtrack.jsは、 load()とdetect() 2 つの主要なメソッドがあり、それぞれ手検出モデルを読み込み、予測結果を取得するために使用されます。

load()メソッド: オプションのモデルパラメータを受け入れ、モデルオブジェクトを返します。これにより、ユーザーはモデルのパフォーマンスを制御できます。

定数モデルパラメータ = {
 flipHorizontal: true, // ビデオなどの反転 
 imageScaleFactor: 0.7, // 速度向上のため入力画像のサイズを縮小します。
 maxNumBoxes: 20, // 検出するボックスの最大数
 iouThreshold: 0.5, // 非最大抑制の ioU しきい値
 scoreThreshold: 0.79、//予測の信頼度しきい値。
}

handTrack.load(modelParams).then(モデル => {

});

detect()メソッドは、入力ソースパラメータ (img、video、または canvas オブジェクト) を受け取り、画像内の手の位置の境界ボックス予測結果を返します。

クラス名と信頼度を含む境界ボックスの配列。

model.detect(img).then(予測 => { 
  
});

予測結果の形式は次のとおりです。

[{
 bbox: [x, y, 幅, 高さ],
 クラス: "手",
 スコア: 0.8380282521247864
}, {
 bbox: [x, y, 幅, 高さ],
 クラス: "手",
 スコア: 0.74644153267145157
}]

Handtrack.js は他のメソッドも提供します:

model.getFPS() : FPS、つまり 1 秒あたりの検出数を取得します。
model.renderPredictions(predictions, canvas, context, mediasource) : 指定されたキャンバスに境界ボックス (およびソースイメージ) を描画します。ここで、 predictions detect()メソッドの結果配列です。 canvasはpredictionsがレンダリングされるhtml canvasオブジェクトへの参照、 contextはキャンバス 2D コンテキストオブジェクト、 mediasource predictionsで使用される入力フレーム (img、video、canvas など) への参照です (最初にレンダリングされ、その上に境界ボックスが描画されます)。
model.getModelParameters() : モデルパラメータを返します。
model.setModelParameters(modelParams) : モデルパラメータを更新します。
dispose() : モデルインスタンスを削除します。
startVideo(video) : 指定されたビデオ要素でカメラビデオストリームを開始します。ユーザーがビデオのアクセス許可を付与したかどうかを確認するために使用できるpromiseを返します。
stopVideo(video) : ビデオストリーミングを停止します。

4. 次のステップは計算コストがかかります。主な理由は、境界ボックスを予測するときにニューラルネットワーク操作が必要になるためです。これは、後で改善および最適化する必要があるポイントです。フレーム間での ID の追跡: 各オブジェクトがフレームに入るときに ID を割り当て、追跡を続けます。いくつかの個別の姿勢を追加します。たとえば、手だけでなく、開いた手や拳を検出します。

5. 参考文献

Handtrack.js ライブラリのソースコード: https://github.com/victordibi...

オンラインデモ: https://victordibia.github.io...

Egohands データセット: http://vision.soic.indiana.ed…

手の動きをリアルタイムでモニタリングするHandtrack.jsライブラリについての記事はこれで終わりです（推奨）。手の動きのモニタリングに関するJSライブラリのコンテンツをさらにご覧になりたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: