作者｜Victor Dibia

譯者｜薛命燈

近日，GitHub 上開源了一個名為 Handtrack.js 的項目，有了它，你只需要 3 行代碼就能用來檢測圖片中手的動作。

演示地址：https://victordibia.github.io/handtrack.js/#/

運行時：22 FPS，Macbook Pro 2018(2.5 Ghz)，Chrome 瀏覽器。13FPS，Macbook Pro 2014(2.2GHz)。

不久之前，一個使用 TensorFlow 對象檢測 API 跟蹤圖片中手部動作的實驗結果把我震驚到了。我把訓練模型和源代碼開放了出來：

https://github.com/victordibia/handtracking

從那時起，它就被用來開發一些非常有趣的東西，比如：

一個可以幫助孩子進行拼寫練習的工具：

https://medium.com/@drewgillson/alphabot-a-screen-less-interactive-spelling-primer-powered-by-computer-vision-cc1095bce90

一個可以識別手勢的插件：

https://github.com/MrEliptik/HandPose

一個乒乓球游戲：

https://github.com/alvinwan/hand-tracking-pong

有很多人想要嘗試我提供的訓練模型，但無法設置好 Tensorflow(安裝問題、TF 版本問題、導出圖表，等等)。幸運的是，Tensorflow.js 解決了其中的一些安裝和發行問題，因為它經過優化，可以在瀏覽器的標準化環境中運行。為此，我創建了 Handtrack.js 庫：

https://github.com/victordibia/handtrack.js/

它可以讓開發人員使用經過訓練的手部檢測模型快速創建手勢交互原型。

這個庫的目標是隱藏與加載模型文件相關的步驟，為用戶提供有用的函數，并允許用戶在沒有任何 ML 經驗的情況下檢測圖像中的手，你不需要自己訓練模型。

你也無需導出任何圖或已保存的模型。你可以直接在 Web 應用程序中包含 handtrack.js(詳情如下)，然后調用這個庫提供的方法。

如何在 Web 應用程序中使用它？

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

使用 script 標簽

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

在將上面的 script 標簽添加到 html 頁面后，就可以使用 handTrack 變量引用 handtrack.js，如下所示。

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

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

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

console.log('Predictions: ', predictions) // bbox predictions

});

});

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

使用 handtrack.js 跟蹤圖像中的手，你可以調用 renderPredictions() 方法在 canvas 對象中繪制檢測到的邊框和源圖像。

使用 NPM

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

npm install --save handtrackjs

下面給出了如何在 React 應用程序中導入和使用它的示例。

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);

});

});

Handtrack.js 的 API

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

load() 方法接受可選的模型參數，允許你控制模型的性能。這個方法以 webmodel 格式(也托管在 jsdelivr 上)加載預訓練的手部檢測模型。

detect() 方法接受輸入源參數(img、video 或 canvas 對象)并返回圖像中手部位置的邊框預測結果。

const modelParams = {

flipHorizontal: true, // flip e.g for video

imageScaleFactor: 0.7, // reduce input image size .

maxNumBoxes: 20, // maximum number of boxes to detect

iouThreshold: 0.5, // ioU threshold for non-max suppression

scoreThreshold: 0.79, // confidence threshold for predictions.

}

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

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

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

console.log('Predictions: ', predictions);

});

});

預測結果格式如下：

[{

bbox: [x, y, width, height],

class: "hand

總結

以上是生活随笔為你收集整理的js最小化浏览器_Handtrack.js 开源：3行JS代码搞定手部动作跟踪的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。