手の動きをリアルタイムで監視するための 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サーバーにログインします。

推薦する

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

CentOS 7 パスワードを忘れた場合の解決プロセス図

必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...

継続的インテグレーションテストにおけるDocker Swarmの適用の詳細な説明

背景アジャイル モデルは広く使用されており、テストは特に重要です。新しいバージョンは頻繁にリリースす...

Vueでブラウザタイトルを動的に設定する方法の詳細な説明

目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...

MySQLデータベースエンジンをInnoDBに変更する

PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

Reactスロットの使い方

目次必要コアアイデアReactでスロットを実装する2つの方法必要コンポーネントを自分で書きました。コ...

ハッシュテーブルのJavaScript実装の詳細な説明

目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...

面接で聞かれる可能性のあるCSSに関する質問

この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。聞く: CSS セ...

Linuxはデータディスクがアンインストールされ、新しいカスタムイメージを作成できることを確認します。

カスタムイメージに関するよくある質問データディスクを表示するにはどうすればいいですか? df コマン...

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

MySQL 8.0 エラー サーバーがクライアントに不明な認証方法を要求しました 解決策

最新バージョンのMySQL 8.0.11をインストールした後、ユーザーを作成して認証します。認証され...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...