使用 Tracking.js 在 JavaScript 中进行面部检测

本周早些时候，我看到了一篇非常酷的文章，介绍了如何用 Python 创建类似 Snapchat 的滤镜。我很好奇前端是否存在类似的开源技术。我找到了一些资源：

• Tracking.js
• clmtrackr
• 闭路电视监控录像
• headtrackr

我真的很高兴这种数据科学技术存在于前端，而不仅仅是存在于 Python 或 R 等更传统的数据科学语言中。

我觉得以上所有项目都很有趣，而且它们在 GitHub 上的星级也差不多。我决定使用 Tracking.js，因为它的文档非常完善，而且有很多示例，对我来说，这是最简单的学习方法！我真希望有更好的文档来介绍这个库的幕后运作——我不确定它背后的统计数据是什么，也不知道这个工具在实现之后是如何运作的。

话虽如此，实现起来非常容易。我可以轻松地扩展面部摄像头的示例，以适应我最终构建的应用程序！

学习过程

由于 Tracking.js 库规模较小，社区支持也远不及我通常使用的库，所以我的学习仅限于查看其网站上的示例。我也搜索过 Codepen，但那里的几个示例要么不完整，要么与示例非常相似。

最终项目

警告：我在这个项目里确实学到了，网络摄像头自拍超级尴尬！我都不知道高中的时候怎么会用网络摄像头自拍做我的Facebook头像了！

我首先从tracking.js网站上复制了人脸摄像头的示例。最终，我做了一些调整，并将跟踪库下载到本地，让它在本地运行起来。

然后，我在网上找了几个 PNG 图片叠加在上面作为滤镜。我用的是谷歌图片搜索，然后复制到本地。之后，我实现了一个简单的算法，把滤镜添加到脸部——我只是根据用户脸部的位置硬编码了尺寸。最终效果如下：

我也尝试实现 Snapchat 的狗脸，但对于像这个项目这样快速的事情来说，数学对于人的脸来说太具体了！

然后，我扩展了数学运算，并添加了用户在滤镜之间切换的功能。数学运算相对简单——当人物在屏幕上移动时触发的事件监听器会返回一个包含视图中人脸坐标的数组。然后，我会使用改进后的坐标在上方绘制滤镜。关键代码如下：

    context.drawImage(img, rect.x + (filterX * rect.width),
      rect.y + (filterY * rect.height),
      rect.width * filterWidth,
      rect.height * filterHeight
    )

之后，我完善了 CSS，这真的很难！最终实现的方法是在视频元素上叠加一个 HTML Canvas，所以让网格系统对齐所有内容非常棘手。我最终第一次尝试使用 CSS Grid 来测试它是否有效。最终成功了，但我的做法感觉有点老套。以后我得继续研究 CSS Grid 了！

该应用程序最终看起来像这样：

我的最终输出看起来还不错，虽然算不上完美，但为了做得更好，我可能需要创建自己的滤镜库或滤镜。我也很难让更复杂的滤镜工作。我必须把它们分解成各个部分——比如每只耳朵和鼻子——然后再计算如何将它们添加到每张脸上。如果我想单独追踪眼睛或嘴巴，而不是追踪整个脸部，我似乎很难将不同的面部特征重新关联起来。

如果我想在这个项目上投入更多，我可能会尝试添加一些平滑处理，这样当人物稍微移动时，滤波器的跳动就会减少。总的来说，这个项目可能还可以做得更好，但为了学习这个库，我已经完成了我想要的目标。

后续步骤

Tracking.js 真的很酷，文档也很齐全！我觉得它对于像这个应用这样简单的项目来说，是个很棒的库。如果我要用它来完成其他工作或者更大规模的项目，我可能需要改进应用中的很多功能。我还发现它的网络摄像头 API 非常难用——我在网上很难找到关于造型和拍照的示例。以后我也想更深入地研究它。总的来说，我玩得很开心！它并不完美，但这是一个快速完成的好项目。

代码
应用程序

我的“学习新事物”系列的一部分