原文:https://paul.kinlan.me/face-detection/

在 Google 开发者峰会中,谷歌成员 Miguel Casas-Sanchez 跟我说:“嘿 Paul,我给你看一个 demo”。看完之后我必须对它进行研究。

Shape Detection API(图形检测API)目前在 WICG 中尚处于孵化和实验阶段,这对于平台来说是一个很好的渐进过程。

Shape Detection API 有意思的地方在于,它是基于用户设备的一些基础硬件功能上创建标准接口的,为 web 平台开启了一组新功能。

在 web 中使用图形检测已有一段很长的时间。有很多的库能够实现边缘检测,面部检测,条形码和二维码检测(我甚至编写过一个具有该功能的 web app)。

Shape Detection API 目前集成在 Chrome Canary(M57)中,能够检测面部、条形码(和二维码),由于 API 还处于实验阶段,你必须开启 chrome://flags/#enable-experimental-web-platform-features。

该 API 使用相当简单,最简单的面部检测是使用图像调用该 API,获取面部列表。

var faceDetector = new FaceDetector();
faceDetector.detect(image)
.then(faces => faces.forEach(face => console.log(face)))
.catch(e => {
console.error("Boo, Face Detection failed: " + e);
});

这里需要一个图像对象(可以是CanvasImageSource,Blob,ImageData 或者一个 <img> 元素),将它传递给系统底层 API,系统将会返回一组 DetectedFace 对象,该对象实际上是包含图像上每一个面部区域的 DetectedObject。

Miguel 写了一个完整的 demo(是我偷来放在 JSBin 的),加载一个图像,传递给检测 API ,然后在图像上绘制出每一个 DetectedFace 的面部矩形区域。(注意:目前仅适用于 Android 的 Chrome,桌面端的很快就能够支持该 API)。

var image = document.getElementById('image');
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');
var scale = 1; image.onload = function() {
ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, canvas.width, canvas.height); scale = canvas.width / image.width;
}; function detect() {
if (window.FaceDetector == undefined) {
console.error('Face Detection not supported');
return;
} var faceDetector = new FaceDetector();
faceDetector.detect(image)
.then(faces => {
// Draw the faces on the <canvas>.
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
for(let face of faces) {
ctx.rect(Math.floor(face.x * scale),
Math.floor(face.y * scale),
Math.floor(face.width * scale),
Math.floor(face.height * scale));
ctx.stroke();
}
})
.catch((e) => {
console.error("Boo, Face Detection failed: " + e);
});
}

这有什么用呢?

启用更多的面部检测 API 有许多不同的使用情况,例如你能够:

  检测面部时能够有更好的体验——我们使用该 API 有很大的灵活性,它允许我们在 Service 或者 Web Worker 中进行处理。

  局部图片剪裁——找到图片中的脸后能够自动剪裁图片。

  能够快速标记——快速的找到场景中所有的人脸,创建一个用户界面,使您能够快速标记他们。

  优化面部识别——一旦你有了人脸图像,你就能够将这些区域传递给面部识别工具。

目前这些都能在浏览器上实现吗?是的,但你需要有渐进性的方案。

渐进性方案

很显然这是一个纯 JS API,需要访问底层硬件的 API,但能够“轻松的”(呵呵)渐进式的建立应用,确保使用低版本 Chrome 的用户依然能够访问。

我的想法是遵循相关规范达到渐进增强:服务器 -> JS(+ 也许是 Web ASM)-> Web API,但我会更深入的研究,因为我看到了许多的挑战。

服务器

我们可以创建一个简单的包含 <input type='file'> 的表单,将图像上传到服务器,可以在服务端完成图像检测,然后将结果返回给客户端。

JS

如果我们使用了 JS,我们能够在浏览器上的页面上下文中使用任意一个客户端库完成面部检测。

Web Assembly:

这种方式进行图像识别,甚至是以高性能的方式进行目标检测,是令人难以置信的(至少在我看来)。“原生平台”早已有许多的库(如 Open CV),主要是用 C 写的,能够应用到浏览器上,利用丰富的生态系统,也能够达到相同的性能。

如果有人实现了多边形检测 API ,这将是非常有用的功能。

Web API

现在它可以使用底层系统 API 时,我们就能够在所有的平台上普及。

我觉得这是一个很有趣的 API,它的确为平台开启了很多的可能性,特别是对我,使用底层系统相对于使用纯 javascript ,极大的提高了在 web 上的目标检测性能,这是我期待条形码检测 API 的原因,它将增强二维码扫描器 Web 应用性能的同事,降低其复杂性。

基于图形检测API(shape detection API)的人脸检测的更多相关文章

  1. 人脸检测学习笔记(数据集-DLIB人脸检测原理-DLIB&OpenCV人脸检测方法及对比)

    1.Easily Create High Quality Object Detectors with Deep Learning 2016/10/11 http://blog.dlib.net/201 ...

  2. 手把手教你 在Pytorch框架上部署和测试 关键点人脸检测项目DBFace,成功实现人脸检测效果

    这期教向大家介绍仅仅 1.3M 的轻量级高精度的关键点人脸检测模型DBFace,并手把手教你如何在自己的电脑端进行部署和测试运行,运行时bug解决. 01. 前言 前段时间DBFace人脸检测库横空出 ...

  3. 目标检测 - Tensorflow Object Detection API

    一. 找到最好的工具 "工欲善其事,必先利其器",如果你想找一个深度学习框架来解决深度学习问题,TensorFlow 就是你的不二之选,究其原因,也不必过多解释,看过其优雅的代码架 ...

  4. SSD目标检测实战(TF项目)——人脸检测2

    数据转化为VOC格式: 一.我们先看 VOC格式的数据是什么??? Annotations:存放xml 包括 文件夹信息   图片名称. 图片尺寸信息. 图片中object的信息. JPEGImage ...

  5. [转]40多个关于人脸检测/识别的API、库和软件

    [转]40多个关于人脸检测/识别的API.库和软件 http://news.cnblogs.com/n/185616/ 英文原文:List of 40+ Face Detection / Recogn ...

  6. 40多个关于人脸检测/识别的API、库和软件

    英文原文:List of 40+ Face Detection / Recognition APIs, libraries, and software 译者:@吕抒真 译文:链接 自从谷歌眼镜被推出以 ...

  7. 转:40多个关于人脸检测/识别的API、库和软件

    文章来自于:http://blog.jobbole.com/45936/ 自从谷歌眼镜被推出以来,围绕人脸识别,出现了很多争议.我们相信,不管是不是通过智能眼镜,人脸识别将在人与人交往甚至人与物交互中 ...

  8. paper 88:人脸检测和识别的Web服务API

    本文汇总了全球范围内提供基于Web服务的人脸检测和识别的API,便于网络中快速部署和人脸相关的一些应用. 1:从How-old的火爆说起 最开始,网站的开发者只是给一个几百人的群发送email,请他们 ...

  9. 异常检测(anomaly detection)

    版权声明:本文为博主原创文章,转载或者引用请务必注明作者和出处,尊重原创,谢谢合作 https://blog.csdn.net/u012328159/article/details/51462942 ...

随机推荐

  1. Unity3D --对撞机/碰撞器 介绍

    碰撞器一般都用作触发器而用,刚体一般用作真实碰撞. 静态对撞机:一个对象有对撞机组件,没有刚体组件. 这种情况在场景中的静态物体应用较多,比如墙体,房屋等静止不动的物体. 物理引擎假设静态对撞机是不会 ...

  2. Android Tv 中的按键事件 KeyEvent 分发处理流程

    这次打算来梳理一下 Android Tv 中的按键点击事件 KeyEvent 的分发处理流程.一谈到点击事件机制,网上资料已经非常齐全了,像什么分发.拦截.处理三大流程啊:或者 dispatchTou ...

  3. 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析

    一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...

  4. JavaWeb三大组件之一Filter知识总结

    [1] Filter简介    > Filter翻译为中文是过滤器的意思.    > Filter是JavaWeb的三大web组件之一Servlet.Filter.Listener    ...

  5. 【Zookeeper】应用场景

    配置的管理在分布式应用环境中很常见,例如同一个应用系统需要多台server运行,但是他们运行的应用系统的某些配置项是相同的,如果要修改这些相同的配置项,那么就必须同时修改每台运行这应用系统的serve ...

  6. 从基于idea的第一个javaweb项目到shell脚本项目自动发布(jdk1.8,mysql5.7,maven3.5,tomcat9,subversion,centos7.3)之一

    首先说一下为什么写这篇文章,因为从正式参加工作就做javaweb开发,一路走来,碰到了很多的问题,每次问题都想从度娘那里得到准确的答案,但是,每个人遇到的问题不尽相同,问题的解决方案有时候也只是仅供参 ...

  7. spring MVC处理请求过程及配置详解

    本文主要梳理下Spring MVC处理http请求的过程,以及配置servlet及业务application需要的常用标签,及其包含的意义. spring MVC处理请求过程 首先看一个整体图 简单说 ...

  8. amoeba

    Amoeba 原理:amoeba相当于业务员,处理client的读写请求,并将读写请求分开处理.amoeba和master以及slave都有联系,如果是读的请求,amoeba就从slave读取信息反馈 ...

  9. DispatcherTimer和Timer(计时器)

    System.Windows.Threading.DispatcherTimer dTime;        System.Timers.Timer timer;        public Main ...

  10. NAT集群部署solo之session server

    author:JevonWei 版权声明:原创作品 使用Nginx做代理服务器,部署solo,使用session server做会话黏滞 拓扑图 环境 tomcatA 172.16.253.108 t ...