咦，用浏览器做人脸检测，竟然这么简单？

阿里妹导读：Shape Detection API 的发布已经有一些时日，其主要提供的能力是给予前端直接可用的特征检测接口（包括条形码、人脸、文本检测）。本文将简单对其进行介绍，对前端进行人脸检测进行普适性的讲解。

1 背景与场景

人脸检测（Face Detection）算是老生常谈的课题了，在诸多行业应用广泛，例如金融、安防、电子商务、智能手机、娱乐图片等行业。其中涉及的技术也在不断的演变，下面简要介绍几种思路：

a. 基于特征的人脸检测

例如opencv中内置了基于Viola-Jones目标检测框架的Harr分类器，只需要载入一个配置文件（haarcascade_frontalface_alt.xml）就能直接调用detectObject去完成检测过程，同时也支持其他特征的检测（如鼻子、嘴巴等）。

b. 基于学习的人脸检测

其实也是需要通过算子提取图像中的局部特征，通过对其进行分类、统计、回归等方式得到的具备更精确和快响应的分类器。

2 套路集锦

2.1 后端处理

前端通过网络将资源传输到后端，后端统一处理需要检测的图像或视频流，对后端的架构有一定的挑战，同时网络的延时往往不能给用户带来实时的交互效果。

2.2 客户端处理

得益于OpenCV在跨语言和跨平台的优势，客户端也能以较低的开发成本提供人脸检测的能力，并且可以通过JsBridge等方式向web容器提供服务，然而一旦脱离这个容器，孤立的页面将失去这种能力。直到有一天……

2.3 开放服务

不知道从啥时候开始，云计算等概念拔地而起，计算的成本日益降低。各大研发团队（如阿里云、Face++）都蠢蠢欲动又不紧不慢上架了人脸检测服务，甚至还带上了各种特！殊！服！务！人脸识别、活体识别、证件OCR及人脸对比等等等。

尽管不仅提供了客户端的SDK以及前后端的API，但是，怎么说也要讲讲我纯前端的方案吧。

3 时代带来了什么

好吧，人脸识别在前端依然是在刀耕火种的远古时代，然而，我们的基础建设已经起步，希望后续的一些相关介绍能为各位看官带来一定的启发。

3.1 Shape Detection API

随着客户端硬件的计算能力逐渐提高，浏览器层面得到的权限也越来越多，由于图像处理需要耗费大量的计算资源，实际上浏览器上也能承担图像检测的一些工作，因此就搞出了个Shape Detection API。

以下几个简单的例子介绍了基本的用法，在尝试编辑并运行这些代码之前，请确保在你的Chrome版本以及该新特性已经被激活，另外该API受同源策略所限制：

chrome://flags/#enable-experimental-web-platform-features

• 条形码：Barcode Detection (For Chrome 56+)

var barcodeDetector = new BarcodeDetector();

barcodeDetector.detect(image)

  .then(barcodes => {

    barcodes.forEach(barcode => console.log(barcodes.rawValue))

  })

  .catch(err => console.error(err));

转自：阿里技术