實時監測手部運動的 JS 庫，能夠實現不少有趣功能

【導語】：Handtrack.js是一個能夠直接在瀏覽器中實現實時手部動做跟蹤和檢測的原型庫，它是通過 Tensorflow 訓練產生的開源模型，不須要用戶本身訓練。有了它，你只須要經過幾行代碼就能檢測圖片中手部的動做。

GitHub 主頁

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

一、簡介

Handtrack.js ，是基於 TensorFlow 對象檢測 API 訓練模型搭建的，可以實現經過攝像頭實時監測手部運動，它的特色主要包含：

• 它可讓開發人員使用通過訓練的手部檢測模型快速建立手勢交互原型；
• 它經過爲用戶提供有用的函數，容許用戶在沒有任何 ML 經驗的狀況下檢測圖像中的手，不須要本身訓練模型；
• 用戶無需導出任何圖或已保存的模型，能夠直接在 Web 應用程序中引用 handtrack.js 庫，而後調用它提供的方法。

二、應用場景

若是你對基於手勢的交互式體驗感興趣，Handtrack.js會頗有用。用戶不須要使用任何額外的傳感器或硬件，就能夠當即得到基於手勢的交互體驗。

一些相關的應用場景：

• 將鼠標移動映射到手部移動，達到控制的目的；
• 當手和其餘物體重疊時能夠表示某些有意義的交互信號（例如觸碰物體或選擇物體）；
• 人的手部運動能夠做爲某些活動識別的代理的場景（例如，自動跟蹤視頻或圖像中下棋者的動做）， 或者簡單地計算圖像或視頻幀中有多少我的；
• 建立演示，任何人均可以經過最少的設置輕鬆運行或體驗這些東西。

三、使用方法

你能夠直接在 script 標籤中包含這個庫的 URL 地址，或者使用構建工具從 npm 中導入它。

3.1 使用script標籤

Handtrack.js 的最小化 js 文件目前託管在 jsdelivr 上，jsdelivr 是一個免費的開源 CDN，讓你能夠在 Web 應用程序中包含任何的 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 標籤添加到 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 標籤傳入的圖像的預測邊框，若是換了視頻或經過攝像頭提交圖像幀，那麼就能夠「跟蹤」在每一幀中出現的手。

3.2 使用 NPM

你能夠使用如下命令將 handtrack.js 做爲 npm 包來安裝：

npm install --save handtrackjs

而後，你就能夠在web應用程序中導入和使用它的示例：

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() 方法，分別用於加載手部檢測模型和獲取預測結果。

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

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() 方法：接收一個輸入源參數(能夠是img、video或canvas對象)，返回圖像中手部位置的邊框預測結果：

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

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

預測結果格式以下：

[{
  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，即每秒檢測次數；
• model.renderPredictions(predictions, canvas, context, mediasource): 在指定的畫布上繪製邊框（和源圖像）。其中predictions是 detect()方法的結果數組。canvas是對渲染predictions的html canvas對象的引用，context是canvas 2D上下文對象，mediasource是對predictions中使用的輸入幀(img、視頻、canvas等)的引用(首先渲染它，並在其上繪製邊框)。
• model.getModelParameters(): 返回模型參數；
• model.setModelParameters(modelParams): 更新模型參數；
• dispose() : 刪除模型實例；
• startVideo(video) : 在給定的視頻元素上啓動攝像頭視頻流。返回一個promise，可用於驗證用戶是否提供了視頻權限的；
• stopVideo(video) : 中止視頻流；

四、下一步

• 計算消耗大，這主要是由於在預測邊界框時須要進行神經網絡操做，這是後續須要改進和優化的一個點；
• 跨幀跟蹤ID：實如今每一個對象進入一幀時爲其分配 ID 並持續跟蹤；
• 添加一些離散的姿式：例如，不僅是手，而是檢測張開的手、拳）。

五、參考資料

• Handtrack.js庫的源代碼：https://github.com/victordibi...
• 線上Demo：https://victordibia.github.io...
• Egohands數據集：http://vision.soic.indiana.ed...

開源前哨 平常分享熱門、有趣和實用的開源項目。參與維護 10萬+ Star 的開源技術資源庫，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。