使用 React Native 创建人脸识别 App

在本文中，我将使用Microsoft Face API通过 React Native 创建一个人脸识别应用程序。我假设你已经构建了一个 React Native 应用程序，因此不会涵盖代码的所有部分。

获取 API 密钥

注册帐户后，登录并单击屏幕顶部的搜索图标并搜索“cognitive services”。从显示的下拉列表中，单击认知服务帐户（预览），你应该会看到以下屏幕：

单击add，将显示以下屏幕：

填写必填字段。你可以输入任何想要的帐户名称，如果是新用户，订阅应该是“free trial”，如果是现有用户，订阅应该是“pay-as-you-go”。资源组可以是你想要的任何名称。资源组位置应该是你当前位置附近的服务器，但如果你愿意，可以坚持使用默认值。对于API 类型，选择“Face API”，然后为定价层选择“free” 。这将确保你不花任何钱。填写完所有内容后，单击创建按钮并等待资源完成部署。

部署资源后，单击左侧栏中的所有资源菜单。你创建的资源应该列在那里，否则刷新页面。单击资源，应该会看到以下屏幕：

单击密钥以查看 API 密钥。记下其中一个键，因为稍后你将在向 API 发出请求时使用它们。

构建应用程序

要构建的应用程序将执行以下操作：

创建人脸列表：人脸列表是人脸的容器。将其视为一组相关面孔的数据库。

将人脸添加到人脸列表：人脸列表是一个容器，你需要添加包含单个人脸的照片。这些将用于稍后的比较。

获取相似人脸：用于根据在照片上检测到的人脸从人脸列表中获取相似人脸。

流程是首先创建一个人脸列表，将人脸照片添加到其中，然后根据提供的照片获取相似人脸列表。

以下是用户上传照片并按下按钮以获取相似面孔后应用程序的外观：

安装依赖

首先新建一个 React Native 项目：

注意：我在本文中使用的是 React Native 版本 0.25.1。React Native 项目进展迅速，因此如果在撰写本文时已经有更高版本可用，则使用的依赖项可能会破坏该版本的 React Native。如果你以后要阅读本文，我推荐rninit，它是 React Native CLI 工具的替代品，它允许安装特定版本的 React Native。可以使用以下命令全局安装它：

安装后，可以使用以下命令创建一个新的 React Native 项目：

这将安装 React Native 版本 0.25.1 和 React 版本 0.14.8。

在RNSimilar文件夹中导航，打开package.json，应该会看到以下内容：

在下面添加以下内容react-native：

运行

以安装刚刚添加的模块。

使用react-native-button依赖项来创建按钮，使用react-native-image-picker从用户照片库（或设备相机）中选择图像，并使用react-native-fetch-blob发送所选择图像的 blob到 API。

接下来，全局安装React Native 包管理器：

安装后，当你还在项目的根目录下时，运行

以自动配置项目以添加必要的 android 权限并链接第三方模块工作的文件。

入口点文件

分解上面的代码。首先导入SimilarFaces组件，可以在其中找到大部分应用程序逻辑。

声明图像选择器将使用的选项。这些大部分都很清楚，所以我不打算在这里解释它们。

添加之前的 API 密钥：

在主应用程序组件中使用SimilarFaces。将图像选择器选项和 API 密钥作为属性传递，以便可以在组件内部访问它们。

相似面孔组件

创建一个components/SimilarFaces.js文件并添加以下内容：

分解上面的代码。首先你有通常的导入语句：

包括react-native-button和react-native-image-picker：

包括用于向 Face API 发出 HTTP 请求的自定义库。将在Requestor稍后的部分中创建它。

声明创建人脸列表、将人脸添加到人脸列表和获取相似人脸时使用的数据。是facelist_id面孔列表的唯一 ID，facelist_data是要赋予面孔列表的描述性名称。如果需要，可以更改这些值。

添加 Face API 的基本 URL：

为将在组件内使用的数据添加默认值：

该render方法返回应用程序的 UI。这包含用于创建面孔列表的按钮，显示用户选择的照片，用于选择照片的按钮，用于输入添加的人的姓名的文本输入，用于获取相似面孔的按钮，相似面孔的照片和自定义消息。

_changeName函数更新用于输入人名的文本字段的新值的状态。

_pickImage功能允许用户从相机或图库中选择图像。这使用了react-native-image-picker库。收到响应后，使用所选图像的尺寸更新图像容器的样式。还将文件路径和图像的 base64 表示设置为状态。这样可以稍后在将面孔添加到面孔列表或获取相似面孔时使用它。

接下来是向人脸 API发送创建新人脸列表_createFaceList请求的函数。facelist_data是之前在文件顶部附近声明的硬编码对象。

_addFaceToFaceList函数将人脸数据添加到人脸列表中，这次使用的是uploadRequestor 库中的函数。这接受你要将请求发送到的 URL 作为其第一个参数，API 密钥作为其第二个参数，所选照片的 base64 表示作为第三个参数，以及用户数据作为第四个参数。userData的值被转换为字符串，因为upload函数将其作为查询参数发送。这也是为什么只能发送最大长度为 1KB 的最小数据的原因。

_getSimilarFace函数首先向人脸检测端点发送请求。这会为照片中检测到的人脸分配一个唯一 ID，并返回它们以及宽度、高度、顶部和左侧位置，以在检测到的人脸周围构建一个框。但对于本文，只使用面容 ID。

以下是一个示例响应，可让你了解正在使用的数据是什么样子的：

收到响应后，faceId从第一行数据中提取。下面的代码假定照片中只有一张脸，这就是它只提取第一行的原因。

接下来，构建包含查找相似面孔端点所需数据的对象。这包括face_id从人脸检测调用中接收到的值、人脸 API 将要执行其搜索的人脸列表的 ID 以及要返回的相似人脸的最大数量。

你要指定2虽然只打算显示一张相似的脸，因为指定1会返回最匹配的照片。这意味着如果你将me.jpg和me2.jpg添加到人脸列表中，然后再次选择me.jpg以获取相似的人脸，如果你只指定1作为maxNumOfCandidatesReturned的值，它将返回me.jpg。

如果指定2然后从结果中提取第二行，将得到me2.jpg。反之亦然（将me2.jpg提供给相似面孔端点返回me.jpg）。所有这一切意味着你将获得第二个最接近的匹配项，因此 API 不可能返回相同的照片。

将请求发送到查找相似面孔端点，将构建的数据转换为字符串，因为这是人脸 API 所期望的。

收到响应后，从返回的结果中提取第二行。然后向端点发出请求以获取特定的人脸列表。这包含用户添加的所有面部数据。遍历它以找到与相似面孔端点返回的面孔 ID 相同的面孔 ID。

注意：你需要解析userData，因为它被保存为字符串。然后使用这些数据来更新具有相似照片的状态以及包含相似面孔名称和置信度的消息。置信度介于 0 和 1 之间。数字越接近 1 表示用户提供的照片与 API 返回的照片是同一个人的可能性就越大。

以下是来自查找相似面孔端点的示例响应：

添加样式：

Requestor

Requestor 库向 Face API 发出 HTTP 请求。创建一个lib/Requestor.js文件并添加以下内容：

分解上面的代码。该upload函数处理所有将文件上传到 Face API 的 HTTP 请求。这使用react-native-fetch-blob库发送照片的 base64 表示以及 Face API 所需的标头信息。

接下来是request处理简单 HTTP 请求的方法，例如将字符串数据发送到服务器。

启动应用程序。你需要做的第一件事是从互联网上下载人脸照片。确保每张照片包含一张脸，并且每个人至少应有两张照片。

下载照片后，将它们复制到你的设备中，然后运行该应用程序。

点击创建面孔列表按钮。你应该会看到一条警告，说明面孔列表已创建。接下来，点击选择图像按钮并选择其中一张照片。输入此人的姓名，然后点击添加面对面列表按钮。你应该会看到一条警告，说明已添加人脸。多次执行此操作，但要确保每个人至少有两张照片。

最后，再次点击选择图像按钮并选择你想要用于获得相似面孔的照片。选择后，点击获取相似面孔按钮。这应该返回你之前添加的那个人的一张照片，但不是你选择的同一张照片。

面向未来

就是这样！在本文中，我们使用了 Microsoft Face API。具体涵盖人脸检测和相似人脸搜索功能。你还可以使用 Face API 做一些其他很酷的事情，以下是其他需要研究的功能：

人脸检测：这是获得相似人脸的先决条件，这就是为什么我没有涵盖人脸检测功能，例如估计一个人的年龄或猜测他们的性别。还可以确定面部特征，例如一个人是否戴眼镜或面部毛发。

人脸分组：用于根据相似性对人脸进行分组。

人脸验证：用于对检测到的两个人脸进行身份验证。可以在 React Native 应用程序中将其用作一种身份验证形式。用户无需输入电子邮件和密码，只需自拍即可登录。

人脸识别：用于从检测到的人脸中识别人。与相似人脸 API 一样，必须先添加人脸才能使用它。