【導(dǎo)語】： Handtrack.js 是一個可以直接在瀏覽器中實現(xiàn)實時手部動作跟蹤和檢測的原型庫，它是經(jīng)過 Tensorflow 訓(xùn)練產(chǎn)生的開源模型，不需要用戶自己訓(xùn)練。有了它，你只需要通過幾行代碼就能檢測圖片中手部的動作。

GitHub 主頁

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

1、簡介

Handtrack.js ，是基于 TensorFlow 對象檢測 API 訓(xùn)練模型搭建的，能夠?qū)崿F(xiàn)通過攝像頭實時監(jiān)測手部運動，它的特點主要包含：

handtrack.js

2、應(yīng)用場景

如果你對基于手勢的交互式體驗感興趣， Handtrack.js 會很有用。用戶不需要使用任何額外的傳感器或硬件，就可以立即獲得基于手勢的交互體驗。

一些相關(guān)的應(yīng)用場景：

• 將鼠標(biāo)移動映射到手部移動，達到控制的目的；
• 當(dāng)手和其他物體重疊時可以表示某些有意義的交互信號（例如觸碰物體或選擇物體）；
• 人的手部運動可以作為某些活動識別的代理的場景（例如，自動跟蹤視頻或圖像中下棋者的動作）， 或者簡單地計算圖像或視頻幀中有多少個人；
• 創(chuàng)建演示，任何人都可以通過最少的設(shè)置輕松運行或體驗這些東西。

3、使用方法

你可以直接在 script 標(biāo)簽中包含這個庫的 URL 地址，或者使用構(gòu)建工具從 npm 中導(dǎo)入它。

3.1 使用script標(biāo)簽

Handtrack.js 的最小化 js 文件目前托管在 jsdelivr 上，jsdelivr 是一個免費的開源 CDN，讓你可以在 Web 應(yīng)用程序中包含任何的 npm包。

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

<img id="img" src="hand.jpg"/> 
<canvas id="canvas" class="border"></canvas>

將上面的 script 標(biāo)簽添加到 html 頁面后，就可以使用 handTrack 變量引用 handtrack.js ，如下所示：

<script>
 const img = document.getElementById('img'); 
 const canvas = document.getElementById('canvas');
 const context = canvas.getContext('2d');
 
 // Load the model.
 handTrack.load().then(model => {
 model.detect(img).then(predictions => {
  console.log('Predictions: ', predictions); 
 });
 });
</script>

上面的代碼段將打印出通過 img 標(biāo)簽傳入的圖像的預(yù)測邊框，如果換了視頻或通過攝像頭提交圖像幀，那么就可以“跟蹤”在每一幀中出現(xiàn)的手。

3.2 使用 NPM

你可以使用以下命令將 handtrack.js 作為 npm 包來安裝：

npm install --save handtrackjs

然后，你就可以在web應(yīng)用程序中導(dǎo)入和使用它的示例：

import * as handTrack from 'handtrackjs';

const img = document.getElementById('img');

// Load the model.
handTrack.load().then(model => {
 // detect objects in the image.
 console.log("model loaded")
 model.detect(img).then(predictions => {
 console.log('Predictions: ', predictions); 
 });
});

3.3 Handtrack.js 的 API

Handtrack.js 提供了2個主要的方法， load() 方法和 detect() 方法，分別用于加載手部檢測模型和獲取預(yù)測結(jié)果。

load() 方法：接收一個可選的模型參數(shù)，返回一個模型對象，通過該可選模型參數(shù)來允許用戶控制模型的性能：

const modelParams = {
 flipHorizontal: true, // flip e.g for video 
 imageScaleFactor: 0.7, // reduce input image size for gains in speed.
 maxNumBoxes: 20,  // maximum number of boxes to detect
 iouThreshold: 0.5,  // ioU threshold for non-max suppression
 scoreThreshold: 0.79, // confidence threshold for predictions.
}

handTrack.load(modelParams).then(model => {

});

detect() 方法 ：接收一個輸入源參數(shù)(可以是img、video或canvas對象)，返回圖像中手部位置的邊框預(yù)測結(jié)果：

一個帶有類名和置信度的邊框數(shù)組。

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

預(yù)測結(jié)果格式如下：

[{
 bbox: [x, y, width, height],
 class: "hand",
 score: 0.8380282521247864
}, {
 bbox: [x, y, width, height],
 class: "hand",
 score: 0.74644153267145157
}]

Handtrack.js 還提供了其他的方法：

•  model.getFPS() : 獲取FPS，即每秒檢測次數(shù)；
• model.renderPredictions(predictions, canvas, context, mediasource) : 在指定的畫布上繪制邊框（和源圖像）。其中 predictions 是 detect() 方法的結(jié)果數(shù)組。 canvas 是對渲染 predictions 的 html canvas 對象的引用， context 是canvas 2D上下文對象， mediasource 是對 predictions 中使用的輸入幀(img、視頻、canvas等)的引用(首先渲染它，并在其上繪制邊框)。
• model.getModelParameters() : 返回模型參數(shù)；
• model.setModelParameters(modelParams) : 更新模型參數(shù)；
• dispose() : 刪除模型實例；
• startVideo(video) : 在給定的視頻元素上啟動攝像頭視頻流。返回一個 promise ，可用于驗證用戶是否提供了視頻權(quán)限的；
• stopVideo(video) : 停止視頻流；

4、下一步 計算消耗大，這主要是因為在預(yù)測邊界框時需要進行神經(jīng)網(wǎng)絡(luò)操作，這是后續(xù)需要改進和優(yōu)化的一個點； 跨幀跟蹤ID：實現(xiàn)在每個對象進入一幀時為其分配 ID 并持續(xù)跟蹤； 添加一些離散的姿勢：例如，不只是手，而是檢測張開的手、拳）。

5、參考資料

Handtrack.js庫的源代碼： https://github.com/victordibi...

線上Demo： https://victordibia.github.io...

Egohands數(shù)據(jù)集： http://vision.soic.indiana.ed...

到此這篇關(guān)于Handtrack.js庫實現(xiàn)實時監(jiān)測手部運動(推薦)的文章就介紹到這了,更多相關(guān)監(jiān)測手部運動的 JS 庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！