Handtrack.js：一个用于在浏览器中进行实时手部检测原型的库
Handtrack.js是一个用于直接在浏览器中对实时手部检测（边界框）进行原型制作的库。在下面，它使用了经过训练的卷积神经网络，该网络提供了图像中手的位置的边界框预测。卷积神经网络（ssdlite，mobilenetv2）使用tensorflow对象检测api进行训练（请参阅此处）。
这项工作基于coco-ssd tensorflowjs示例。如果您有兴趣检测/跟踪coco数据集中的90个类别中的任何一个，请务必进行检查。
提供该库作为有用的包装，以允许您在Web应用程序中原型基于手/手势的交互。无需了解。它接受一个html图像元素（例如img，视频，画布元素），并返回一个边界框，类名和置信度分数的数组。
该库还提供了一些有用的功能（例如getFPS获取FPS，renderPredictions在画布元素上绘制边界框）以及可自定义的模型参数。
使用自我手数据集进行训练。当您从俯视图（自我观）观看图像中的手时，您会注意到该模型工作得更好。
模型封装在npm包中，可以使用jsdelivr进行访问，jsdelivr是免费的开源CDN，可让您在Web应用程序中包括任何npm包。您可能会注意到，在第一次打开页面时，模型加载缓慢，但是在随后的加载（缓存）中加载速度更快。
如果您对基于手势的原型（作为输入的身体）交互体验感兴趣，那么Handtrack.js可能会有用。 Usser不需要附加任何其他传感器或硬件，但可以立即利用基于手势和输入为输入的身体交互所带来的互动优势。
当手和其他对象的重叠可以代表有意义的交互信号时（例如，对象的触摸或选择事件）。
场景中的人的手可以充当活动识别的代理（例如，从下棋者的视频或图像中自动跟踪运动活动）。或者简单地计算图像或视频帧中有多少个人。
您想要一个易于访问的演示，任何人都可以通过最少的设置轻松运行或试用。
＆lt ;!-加载handtrackjs模型。 -＆gt; ＆lt;脚本src =＆＃34; https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js" ＆gt; ＆lt; /脚本＆gt; ＆lt;！-用您的图像替换它。确保CORS设置允许读取图像！ -＆gt; ＆lt; img id =＆＃34; img＆＃34; src =＆＃34; hand.jpg＆＃34; /＆gt; ＆lt; canvas id =＆＃34;帆布＆＃34; class =＆＃34;边框＆gt; ＆lt; /画布＆gt; ＆lt;！-将您的代码放在下面的脚本标签中。您还可以使用外部.js文件-> ＆lt;脚本＆gt; //注意没有＆＃39; import＆＃39;声明。 ＆＃39; handTrack＆＃39;和＆lt; tf＆＃39;由于上面的script标签，//在索引页面上可用。 const img = document。 getElementById（＆＃39; img＆＃39;）; const canvas = document。 getElementById（＆＃39; canvas＆＃39;）; const context = canvas。 getContext（＆＃39; 2d＆＃39;）; //加载模型。 handTrack。加载（）。然后（模型=＆gt; {//检测图像中的对象模型。检测（img）。然后（预测=＆gt; {控制台。日志（＆＃39; Predictions：＆＃39 ;,预测）;}）; }）; ＆lt; /脚本＆gt;
从＆＃39; handtrackjs＆＃39;导入*作为handTrack ; const img = document。 getElementById（＆＃39; img＆＃39;）; //加载模型。 handTrack。加载（）。然后（model =＆gt; {//检测图像中的对象。控制台。日志（＆＃34;加载的模型＆＃34;）模型。检测（img）。然后（预测=＆gt; {控制台。日志（＆＃39 ;预测：＆＃39;，预测）;}）;}）;
一旦包含js模块，它就可以作为handTrack使用。然后，您可以使用可选参数加载模型。
const modelParams = {flipHorizontal：true，//翻转例如用于video imageScaleFactor：0.7，//减小输入图像的大小以提高速度。 maxNumBoxes：20，//要检测的最大框数iouThreshold：0.5，//非最大抑制量的ioU阈值Threshold：0.79，//预测的置信度阈值。 } handTrack。加载（modelParams）。然后（model =＆gt; {}）;
model.detect接受输入图像元素（可以是img，视频，canvas标签），并返回包含类名称和置信度的包围盒数组。
[{bbox：[x，y，width，height]，类：＆＃34; hand＆＃34; ，得分：0.8380282521247864}，{bbox：[x，y，宽度，高度]，类：＆＃34; hand＆＃34; ，得分：0.74644153267145157}]
model.renderPredictions（预测，画布，上下文，媒体源）：在指定画布上绘制边界框（和输入媒体源图像）。预测是detect（）方法的结果数组。 canvas是对应该在其中呈现预测的html canvas对象的引用，context是canvas 2D上下文对象，mediasource是对预测中使用的输入帧（img，视频，canvas等）的引用（首先呈现，在其顶部绘制的边界框）。
startVideo（video）：在给定视频元素上启动网络摄像头视频流。返回一个承诺，可用于验证用户是否提供了视频权限。
启动脚本使用http.server从演示文件夹中启动一个简单的python3网络服务器。您应该能够在浏览器中的http：// localhost：3005 /上查看它。您也可以在同一链接http：// localhost：3005 / pong.html上查看pong游戏控件演示。
该项目中使用的对象检测模型是使用人的手的带注释的图像进行训练的（请参见此处），并转换为tensorflow.js格式。该包装器库是使用准则和一些代码从coco-ssd tensorflowjs改编而成的。
本文的论文摘要在这里。 （完成后将添加全文）。
如果您在项目/论文/研究中使用此代码，并且想引用此工作，请使用以下内容。 Victor Dibia，HandTrack：使用卷积神经网络对实时手部追踪接口进行原型设计的库，https：//github.com/victordibia/handtracking @article {Dibia2017，作者= {Victor，Dibia}，标题= {HandTrack：使用卷积神经网络进行实时手部追踪接口原型的库}，年份= {2017}，发布者= {GitHub}，期刊= {GitHub存储库 }，网址= {https://github.com/victordibia/handtracking/tree/master/docs/handtrack.pdf}，} 这件事仍然很繁琐（您的粉丝可能会在一段时间后旋转）。 这主要是由于预测边界框所需的神经网络操作。 也许可能有方法可以改善/优化这一点。 跨框架跟踪ID。 也许一些巧妙的方法为每个ID分配ID，当它们进入一帧并对其进行跟踪时（例如，基于幼稚的欧几里得距离）。
