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

手の動きをリアルタイムで監視するための 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()メソッド: オプションのモデル パラメータを受け入れ、モデル オブジェクトを返します。これにより、ユーザーはモデルのパフォーマンスを制御できます。

定数モデルパラメータ = {
 flipHorizo​​ntal: 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()メソッドの結果配列です。 canvaspredictionsがレンダリングされる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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Java JSON 解析ライブラリ Alibaba Fastjson の詳細な使用方法

<<:  mysql 5.6.21 のインストールと設定の詳細な手順

>>:  WindowsにOpenSSHをインストールし、SSHキーを生成してLinuxサーバーにログインします。

推薦する

ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法

目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...

ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

他のよりプロフェッショナルなブログ システムを参照すると、コード ブロックにコードのコピー ボタンが...

Vue はインターフェースのスライド効果を実装します

この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...

HTMLフォーム要素の詳しい解説(パート1)

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明

1. 前の章では、プログラムを yum リポジトリに直接インストールできることを学びましたが、そのた...

IDEA で Docker プロジェクトをデプロイする手順

現在、ほとんどのプロジェクトが Docker 上にデプロイされ始めていますが、デプロイのプロセスはま...

MySQLデータベースの共通操作スキルのまとめ

この記事では、MySQL データベースの一般的な操作テクニックをまとめます。ご参考までに、詳細は以下...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...