用face-api.js在网络上的面部检测-js教程-PHP中文网

Face Detection on the Web with Face-api.js

网页浏览器日益强大，网站和网络应用程序的复杂性也在不断提高。几十年前需要超级计算机才能完成的操作，现在只需一部智能手机即可实现。人脸检测就是其中之一。

人脸检测和分析能力非常有用，因为它使我们能够添加巧妙的功能。想想自动模糊人脸（就像谷歌地图一样）、平移和缩放网络摄像头画面以聚焦于人（就像微软团队一样）、验证护照、添加趣味滤镜（就像Instagram和Snapchat一样），以及更多功能。但在我们能够做到这一切之前，我们首先需要找到人脸！

face-api.js是一个库，它使开发人员能够在其应用程序中使用人脸检测，而无需具备机器学习方面的背景知识。

本教程的代码可在GitHub上找到。

关键要点

face-api.js是一个库，它使开发人员能够在其网络应用程序中使用人脸检测，而无需具备机器学习方面的背景知识。它可以检测人脸，估计人脸中的各种特征，甚至识别照片中的人是谁。
该库使用TensorFlow.js，这是一个流行的JavaScript机器学习库，用于在浏览器中创建、训练和使用神经网络。但是，它将所有这些都封装在一个直观的API中，使其易于使用。
face-api.js非常适合业余项目、实验，甚至MVP。但是，它可能会影响性能，开发人员可能需要在带宽和性能或准确性之间进行选择。
虽然face-api.js是一个强大的工具，但需要注意的是，人工智能擅长放大偏差。因此，开发人员应该谨慎使用这项技术，并使用多元化的测试组进行彻底测试。

使用机器学习进行人脸检测

检测物体（如人脸）相当复杂。想想看：也许我们可以编写一个程序，扫描像素以查找眼睛、鼻子和嘴巴。这是可以做到的，但要使其完全可靠，实际上是无法实现的，因为需要考虑许多因素。想想光照条件、面部毛发、形状和颜色的巨大差异、化妆、角度、面罩等等。

然而，神经网络擅长处理这类问题，并且可以进行泛化以适应大多数（如果不是全部）条件。我们可以使用TensorFlow.js（一个流行的JavaScript机器学习库）在浏览器中创建、训练和使用神经网络。但是，即使我们使用现成的预训练模型，我们仍然需要深入了解如何向TensorFlow提供信息以及如何解释输出。如果您对机器学习的技术细节感兴趣，请查看“使用Python进行机器学习入门”。

face-api.js应运而生。它将所有这些都封装在一个直观的API中。我们可以传递img、canvas或video DOM元素，库将返回一个或一组结果。face-api.js可以检测人脸，还可以估计人脸中的各种特征，如下所示。

人脸检测：获取一个或多个的人脸边界。这对于确定人脸在图片中的位置和大小非常有用。
人脸特征点检测：获取眉毛、眼睛、鼻子、嘴巴和嘴唇以及下巴的位置和形状。这可以用于确定面部朝向或将图形投影到特定区域，例如鼻子和嘴唇之间的胡子。
人脸识别：确定照片中的人是谁。
人脸表情检测：从人脸中获取表情。请注意，不同文化的结果可能会有所不同。
年龄和性别检测：从人脸中获取年龄和性别。“性别”分类将人脸分类为女性或男性，这并不一定能揭示他们的性别。

在您将这些内容用于实验之外之前，请注意，人工智能擅长放大偏差。性别分类对顺性别者效果很好，但它无法检测到我的非二元朋友的性别。它大部分时间都会识别白人，但经常无法检测到有色人种。

在使用这项技术时要非常谨慎，并使用多元化的测试组进行彻底测试。

安装

我们可以通过npm安装face-api.js：

<code>npm install face-api.js
</code>

登录后复制

但是，为了跳过设置构建工具，我将通过unpkg.org包含UMD包：

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

登录后复制

之后，我们需要从库的存储库下载正确的预训练模型。确定我们想从人脸中了解什么，并使用“可用模型”部分确定需要哪些模型。某些功能可以使用多个模型。在这种情况下，我们必须在带宽/性能和准确性之间进行选择。比较各种可用模型的文件大小，并选择您认为最适合您项目的模型。

不确定您的用途需要哪些模型？您可以稍后再返回此步骤。当我们在不加载所需模型的情况下使用API时，将抛出错误，说明库期望的模型。

Face Detection on the Web with Face-api.js

我们现在可以使用face-api.js API了。

示例

让我们构建一些东西！

对于下面的示例，我将使用此函数从Unsplash Source加载随机图像：

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

登录后复制

裁剪图片

您可以在随附的GitHub存储库中找到此演示的代码。

首先，我们必须选择并加载模型。要裁剪图像，我们只需要知道人脸的边界框，因此人脸检测就足够了。我们可以使用两个模型来做到这一点：SSD Mobilenet v1模型（略低于6MB）和Tiny Face Detector模型（低于200KB）。假设准确性是无关紧要的，因为用户也可以手动裁剪。此外，让我们假设访问者在缓慢的互联网连接上使用此功能。因为我们的重点是带宽和性能，我们将选择较小的Tiny Face Detector模型。

下载模型后，我们可以加载它：

<code>npm install face-api.js
</code>

登录后复制

我们现在可以加载图像并将其传递给face-api.js。faceapi.detectAllFaces默认使用SSD Mobilenet v1模型，因此我们必须显式传递new faceapi.TinyFaceDetectorOptions()才能强制它使用Tiny Face Detector模型。

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

登录后复制

变量faces现在包含一个结果数组。每个结果都有一个box和score属性。score指示神经网络对结果确实是人脸的信心程度。box属性包含人脸坐标的对象。我们可以选择第一个结果（或者我们可以使用faceapi.detectSingleFace()），但是如果用户提交的是集体照，我们希望在裁剪的图片中看到所有的人脸。为此，我们可以计算自定义边界框：

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

登录后复制

最后，我们可以创建一个画布并显示结果：

<code>await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
</code>

登录后复制

放置表情符号

您可以在随附的GitHub存储库中找到此演示的代码。

为什么不玩得开心一点呢？我们可以制作一个过滤器，在所有眼睛上放置一个嘴巴表情符号（?）。要查找眼睛特征点，我们需要另一个模型。这次，我们关心的是准确性，因此我们使用SSD Mobilenet v1和68点人脸特征点检测模型。

同样，我们首先需要加载模型和图像：

<code>const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
</code>

登录后复制

要获取特征点，我们必须将withFaceLandmarks()函数调用附加到detectAllFaces()以获取特征点数据：

<code>const box = {
  // 将边界设置为其反向无穷大，因此任何数字都大于/小于
  bottom: -Infinity,
  left: Infinity,
  right: -Infinity,
  top: Infinity,

  // 给定边界，我们可以计算宽度和高度
  get height() {
    return this.bottom - this.top;
  },

  get width() {
    return this.right - this.left;
  },
};

// 更新边界框
for (const face of faces) {
  box.bottom = Math.max(box.bottom, face.box.bottom);
  box.left = Math.min(box.left, face.box.left);
  box.right = Math.max(box.right, face.box.right);
  box.top = Math.min(box.top, face.box.top);
}
</code>

登录后复制

像上次一样，faces包含结果列表。除了人脸的位置外，每个结果还包含特征点的原始点列表。要获取每个特征的正确特征点，我们需要切片点列表。因为点的数量是固定的，所以我选择硬编码索引：

<code>npm install face-api.js
</code>

登录后复制

现在我们可以开始在图片上绘制表情符号了。因为我们必须对两只眼睛都这样做，所以我们可以将feature.eyeLeft和feature.eyeRight放在数组中并迭代它们以对每只眼睛执行相同的代码。剩下的就是将表情符号绘制到画布上！

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

登录后复制

请注意，我使用了一些幻数来调整字体大小和精确的文本位置。因为表情符号是unicode，并且Web上的排版很奇怪（至少对我来说是这样），所以我只是调整数字直到它们看起来差不多。更强大的替代方法是使用图像作为叠加层。

Face Detection on the Web with Face-api.js

总结

face-api.js是一个很棒的库，它使人脸检测和识别真正易于访问。无需熟悉机器学习和神经网络。我喜欢那些具有启用功能的工具，而这绝对是其中之一。

根据我的经验，Web上的人脸识别会影响性能。我们将必须在带宽和性能或准确性之间进行选择。较小的模型的准确性肯定较低，并且会在之前提到的某些因素（例如光线不足或人脸被遮盖）中错过人脸。

Microsoft Azure、Google Cloud以及可能其他企业都在云端提供人脸检测。因为我们避免下载大型模型，基于云的检测避免了繁重的页面加载，往往更准确，因为它经常得到改进，甚至可能更快，因为优化了硬件。如果您需要高精度，您可能需要考虑一个您满意的计划。

我绝对推荐将face-api.js用于业余项目、实验，也许还可以用于MVP。

关于Face API.js的常见问题解答（FAQ）

什么是Face API.js，它是如何工作的？

Face API.js是一个JavaScript库，它使用TensorFlow.js在浏览器中执行人脸检测、人脸识别和人脸特征点检测。它通过使用机器学习模型来检测和识别图像或实时视频流中的人脸。该库提供了一些API，允许开发人员执行诸如检测图像中所有的人脸、识别特定个人的面部以及识别眼睛、鼻子和嘴巴等面部特征等任务。