人脸识别技术概念和应用已经切入到大家的实际生活中，比如某些商店买东西可以刷脸支付了，某些会议可以刷脸入场了等等。

本文结合tracking.js和百度人脸识别api给大家介绍人脸识别技术的落地，那么普通的软件公司也可以开发出适合自己业务场景的人脸识别应用。

一、概述

tracking.js 是github上的一个js开源项目，地址 https://github.com/eduardolundgren/tracking.js ，可以对接摄像头，抓取视频流，对视频中的内容进行标注，如能标注人脸、眼睛、鼻子、颜色等等。

百度人脸识别api提供了人脸检测、人脸对比、人脸识别、人脸认证、人脸注册、人脸更新、人脸更新、人脸删除等接口能力。当然腾讯和阿里也都有提供类似的api接口。

结合tracking.js和百度人脸识别api就能开发出具体的人脸识别应用，这是本文要介绍的内容。

二、tracking.js

tracking.js的example目录下的face_camera.html就是一个很好的demo，可以启动摄像头，提供了人脸识别成功的事件，demo中演示了识别成功后将人脸区域进行框选标准；同样我们也可以在人脸识别事件中添加自己的代码从而实现自己的技术，比如调用百度人脸识别的api进行对比

三、百度人脸识别api

百度人脸识别api提供了人脸库、人脸识别等api，这里我们只介绍人脸库和人脸识别api，使用人脸识别api之前需要先有人脸库。

首先我们应该先申请一个百度ai开放平台的账号，访问https://ai.baidu.com/ 可进行注册。注册后创建一个应用，每个应用有相应的AppID、API Key和Secret Key，这三个值在调用api是需要用到。创建应用后再给应用创建用户组，再在用户组里新建用户并上传用户的图片，这就是人脸库。编写测试代码库时可以先手工创建用户组和用户，百度也提供了api可对人脸库进行操作。

目前百度人脸识别的api最新版为V3，V3版本增加了人脸库管理功能、支持图片URL上传，之前的版本只支持base64的图片数据。

四、技术思路

tracking.js利用h5的video标签获取和显示视频数据，然后在video的同样的位置使用了canvas标签，使得canvas和video的显示重叠在一起，然后利用数据分析和人工智能整理的face数据与canvas的内容进行对比，通过事件识别出canvas中的人脸坐标位置，然后对canvas进行人脸区域进行框选标注。这个事件可以写自己的代码，比如调用百度的api进行人脸识别。

这个canvas只绘制了人脸框选标注的内容（只有方框），并没有视频图像及其他内容。这点可以将canvas的内容导出成图片得到验证。代码示例如下：

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import org.apache.commons.codec.binary.Base64;

public class Test {

    /**
     * 把base64的imageData保存到directory目录，文件名为当前时间戳
     * @param imageData, base64的图片数据
     * @param directory, 图片保存的路径, 如 d:/images/
     */
    public static void saveImage(String imageData, String directory) {
      FileOutputStream output = null;
        try {
            File file = new File(directory + System.currentTimeMillis() + ".jpg");
            output = new FileOutputStream(file);
            byte[] data = Base64.decodeBase64(imageData);
            output.write(data);
            output.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                output.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

这时我们可以再添加一个canvas，将video的内容全部绘制到这个canvas上，当tracking.js人脸识别事件触发时将这个canvas的内容转为base64的图片，将其作为参数传给百度人脸识别的api，与百度人脸库中已经存在的人脸图像进行识别验证。

人脸库也可以通过百度的api进行控制，比如创建用户组、创建用户等。

五、注意事项：

1、tracking.js官方 https://trackingjs.com/ 提供的demo好像并不能正常运行，但是把github中的example下载下来搭建好环境实际是可以运行的

2、浏览器访问摄像头等硬件资源的安全等级在逐步提高，很多浏览器都要求访问的是https协议的请求才允许访问摄像头。如果没有办法提供https的访问，那可以使用较老版本的浏览器，如火狐59或更老的版本，老版本的火狐可以访问 http://ftp.mozilla.org/pub/firefox/releases/ 下载