高速全屏 JS 面部检测答案

【问题标题】：HighSpeed FullScreen JS Facial Detection高速全屏 JS 面部检测
【发布时间】：2016-09-04 07:41:48
【问题描述】：

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

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

所有 3 种看起来都是可行的解决方案，但 tracking.js 和 clmtrackr 在较大的播放器尺寸下似乎会显着减慢（我希望尽可能接近全屏应用程序，即使这意味着我需要在屏幕尺寸）。超越现实的面子很棒，但不幸的是，相关的价格标签有点超出我的资源。有没有人有过在 JS 中进行全屏面部跟踪的经验？我很好奇我正在寻找的东西是否无法使用那里的开源解决方案（不一定是特征检测）。

谢谢！

【问题讨论】：

标签： javascript html5-video tracking.js

【解决方案1】：

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

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

最后我使用了一个相当老的库，在这里解释：http://liuliu.me/eyes/javascript-face-detection-explained（webRTC 在他们的示例中使用：https://webrtc.github.io/samples/src/content/getusermedia/face）它满足了我的需求，使用 setTimeout 跟踪面部。

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

【讨论】：

嘿，请看我对这个问题的回答。我的 2017 MBP 上的 trackingjs 没有任何问题，但是使用 3 年以上计算机的同事确实遇到了性能严重下降的问题。您只需将 trackingjs 在每一帧内部使用的画布大小减半，您就会发现性能有了巨大的提升。这就是您需要做的，并且可以不理会requestAnimationFrame_ :)

【解决方案2】：

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

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

trackingjs 在内部创建一个画布，并通过将视频的每一帧渲染到画布来完成所有识别。我办公室里有些人的笔记本电脑比我的大 3 年以上，我们注意到他们笔记本电脑的性能大幅下降。这导致我在试图提高性能方面陷入困境，结果比你想象的要容易得多。

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

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

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

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

【讨论】：