高速全屏 JS 面部检测

Question

我目前正在研究基于前端实时摄像头的面部检测解决方案。到目前为止，我已经找到了 3 个适合我需要的库

2.https://www.beyond-reality-face.com/overview

所有 3 个看起来都是可能的解决方案，但 tracking.js 和 clmtrackr 似乎在播放器尺寸较大时速度明显变慢（我希望尽可能接近全屏应用程序，即使这意味着我需要屏幕尺寸中的硬编码）。 Beyond reality face 很棒，但不幸的是，相关的价格标签超出了我的资源范围。有没有人有过在 JS 中进行全屏面部跟踪的经验？我很好奇我正在寻找的东西是否无法通过现有的开源解决方案实现（不一定是功能检测）。

谢谢！

Answer 1

我正在做类似的事情。我的第一次尝试是使用 tracking.js，但正如您所说，大尺寸的性能下降（很多！）...只是在 Chrome 中，但我需要它在 Chrome 中正常工作因为我的目标是将其作为 NW.js 的应用程序。

这种性能不足是每帧跟踪的结果（我认为），所以我尝试修改tracking.js代码，改变跟踪频率（函数requestAnimationFrame_里面trackVideo_ 就像在这个网站上显示的那样：http://creativejs.com/resources/requestanimationframe/)，但我对结果不是很满意。

最后，我使用了一个相当古老的库，在此处进行了解释：http://liuliu.me/eyes/javascript-face-detection-explained (used by webRTC in their samples: https://webrtc.github.io/samples/src/content/getusermedia/face) 它满足了我的需求，使用 setTimeout 跟踪面部。

我还在测试，但结果很有希望！

Answer 2

这是几年前的一个问题，但由于我严重为我的一个客户项目弄乱了 trackingjs，所以我想插话。

我有一个 2017 MBP，尽管我对视频的每一帧都进行了一些自定义计算，但 trackingjs 在它上面运行时完全没有问题。

内部 trackingjs 创建一个 canvas 并通过将视频的每一帧渲染到 canvas 来完成所有识别。我办公室里有些人的笔记本电脑比我的老 3 年以上，我们注意到他们笔记本电脑的性能大幅下降。这让我忙于尝试提高性能，结果比你想象的要容易得多。

在trackingjs的源代码中，找到这个函数tracking.trackVideo_。这通过我提到的 requestAnimationFrame 进行循环。

您会立即在该函数中注意到以下代码块：

var resizeCanvas_ = function() {
  width = element.offsetWidth;
  height = element.offsetHeight;
  canvas.width = width;
  canvas.height = height;
};

如果您将 canvas 高度和宽度设置为小于视频播放器大小的值，性能将显着提高。对我来说，我设置了 canvas.width = width/2; 和 canvas.height = height/2; 就成功了！

高速全屏 JS 面部检测

HighSpeed FullScreen JS Facial Detection

javascript

html5-video

tracking.js