一、概述

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/ 下载

本文内容到此结束，更多内容可关注公众号和个人微信号：

人脸识别技术及实现思路相关推荐

人脸识别技术在法国：质疑声中的先行者
2019-11-29 08:26:00 如果人脸识别技术在法国使用的场合逐步累积,在公民日常生活中的扩散又悄无声息,法国民众有朝一日可能会霍然发现,他们生活的社会已经改变申军 2019年岁末将至,人 ...
一文看懂人脸识别技术发展脉络
来源:InfoQ 人脸识别可以说是人工智能领域中成熟较早.落地较广的技术之一,从机场.火车站的安检闸机,到平常用户手机中的"刷脸"支付,人脸识别技术已经深入到我们的生活当中. 为了 ...
人脸识别技术大总结——Face Detection Alignment
作者:sciencefans 搞了一年人脸识别,寻思着记录点什么,于是想写这么个系列,介绍人脸识别的四大块:Face detection, alignment, verification and id ...
硬核科普：一文看懂人脸识别技术流程
小编是个天生懒惰的人,同时又是个急性子,这样的人最享受被科技服务的乐趣. 举个例子,十多年前大家还在普遍用现金的时代,小编在商店买东西排队结账,每当看到收银员找零时手忙脚乱的样子就会心急如焚,只恨不能 ...
人脸识别技术大总结—Face Detection Alignment
人脸识别技术大总结-Face Detection & Alignment 2015-4-8 14:33| 发布者: 炼数成金_小数| 查看: 23912| 评论: 0|来自: cnblo ...
人脸识别技术如何应用到美颜领域？
FPS,是「frame per second」的缩写,即每秒钟处理帧数,一帧就是一张图片.而 FPS 3000,就是每秒钟处理3000张图片. 人脸关键点技术,核心就是人脸关键点Landmark算法: ...
人脸识别技术原理与工程实践
1人脸识别应用场景(验证) 我们先来看看人脸识别的几个应用.第一个是苹果的FACE ID,自从苹果推出FaceID后,业界对人脸识别的应用好像信心大增,各种人脸识别的应用从此开始"野蛮生长& ...
人脸识别技术场景应用
人脸识别技术场景应用 1.人脸识别(FR技术)产品的优势 1)非接触: 人脸图像的采集不同于指纹.掌纹需要接触指掌纹专用采集设备,指掌纹的采集除了对设备有一定的磨损外,也不卫生,容易引起被采集者的反感 ...
【转】干货｜孙启超：卷积神经网络在人脸识别技术中的应用
2018-08-27 21:45:01 随着 iPhone X 的发布,Face ID 人脸识别技术开始进入人们的日常生活中,当我们拿起手机并看着它的时候就可以实现手机解锁的功能.而人脸识别中的关键技 ...

人脸识别技术及实现思路