【转载】用HTML5进行人脸识别

标签: HTML5 技术博文 | 发表时间:2012-06-21 22:08 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

其中的一个特性是getUserMedia( W3C规范 )。它是一个JavaScript API,可以让你访问(需要权限)用户的网络摄像头和麦克风。

AD:

 

今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别。在网页内进行人脸识别,很好很强大!

“现代Web”不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内容。例如我一直特别关注Canvas特性。它对游戏和绘图意义重大 – 但是仅此而已。它并不是一个不好的特性,我只是不会经常用到它。每当看到一些开发中酷炫的新功能,我的大脑里都会思考它们可以产生哪些实际用途。显然对你有价值的内容可能对我来说并不一定,但搞清楚我如何实际使用一个功能是我学习它的一部分。

其中的一个特性是getUserMedia(  W3C规范 )。它是一个JavaScript API,可以让你访问(需要权限)用户的网络摄像头和麦克风。 目前Opera和Chrome(我相信现在的版本18可以支持,但是你可能需要使用Canary。你还需要启用它。这儿有一个 说明。)一旦你启用了getUserMedia,它使用起来相当简单。这里有一个快速的访问请求:

    
  1. //a video tag
  2. var video = document.getElementById(‘monitor’);
  3. //request it
  4. navigator.webkitGetUserMedia(‘video’, gotStream, noStream);
  5. function gotStream(stream) {
  6. video.src = webkitURL.createObjectURL(stream);
  7. video.onerror = function () {
  8. stream.stop();
  9. streamError();
  10. };
  11. }
  12. function noStream() {
  13. document.getElementById(‘errorMessage’).textContent = ‘No camera available.’;
  14. }
  15. function streamError() {
  16. document.getElementById(‘errorMessage’).textContent = ‘Camera error.’;
  17. }

getUserMedia的第一个参数是类型。根据规范,这应该是一个对象,你可以启用音频、视频,或两者兼而有之,像这样:{audio:true, video:true}。然而在我的测试中,传递一个字符串“video”也可以正常工作。你将看到的演示基于另一个演示,所以代码来自于一个较早的Chrome下的版本。第二个和第三个参数是操作成功和失败的回调函数。

你可以看到操作成功的事件处理函数将视频流分配给HTML5 Video标签。最酷的是,一旦运行起来,你就可以使用Canvas API来拍照。对于这个演示,可以看看Greg Miernicki的Demo: http://miernicki.com/cam.html

如果这个Demo无法工作,可以按照下面的说明来开启getUserMedia支持后再次进行尝试。(虽然我打算分享一些屏幕截图,所以如果你只是想继续阅读,那也没关系。)

基于Greg的Demo,我突然想到可以用网络摄像头的照片做一些很酷的东西。我记得 Face.com有一个非常酷的API来解析脸部的图片。(我11月曾经在博客里写了一个ColdFusion的 例子。)然后我在想,是否我们能把Greg的Demo与Face.com的API结合起来做一些基本面部识别的Demo。

这有这几个重大问题。 第一 – Face.com有一个很好的REST API,我们将如何从JavaScript应用程序里面来调用它?其次 – Face.com需要你可以上传图片,或给它一个网址。 我知道可以把一个Canvas图片发送给服务器,并通过我的后台上传到Face.com,但有没有办法绕过服务器来把图片发送给这个API?

第一个实际上并不是问题。Face.com实现了 CORS(跨域资源共享)。CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用。这是一个伟大的功能,我希望更多的服务能够使用它。

更复杂的问题则是如何把画布上的数据发送到Face.com(注:还可以参考我的这篇文章《 如何使用HTML5实现拍照上传应用》)。我如何模拟文件上传?这里有另一个很酷的新技巧 – Formdata。ColdFusion的研究员Sagar Ganatra关于这个话题有一篇很棒的 博客。下面展示了我如何使用它:

    
  1. function snapshot() {
  2. $(“#result“).html(“<p><i>Working hard for the money…</i></p>“);
  3. canvas.width = video.videoWidth;
  4. canvas.height = video.videoHeight;
  5. canvas.getContext(’2d’).drawImage(video, 0, 0);
  6. var data = canvas.toDataURL(‘image/jpeg’, 1.0);
  7. newblob = dataURItoBlob(data);
  8. var formdata = new FormData();
  9. formdata.append(“api_key“, faceKey);
  10. formdata.append(“api_secret“, faceSecret);
  11. formdata.append(“filename“,”temp.jpg“);
  12. formdata.append(“file“,newblob);
  13. $.ajax({
  14.     url: ‘http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses’,
  15.       data: formdata,
  16.     cache: false,
  17.     contentType: false,
  18.     processData: false,
  19.     dataType:”json“,
  20.     type: ‘POST’,
  21.     success: function (data) {
  22.         handleResult(data.photos[0]);
  23.     }
  24. });
  25. }

让我们一行行来看这段代码。首先 – 我需要从画布对象获取二进制数据。有几种方法可以实现,但是我尤其想要一个二进制的Blob。请注意dataURIToBlob方法。这是几周前我从 StockOverflow上发现的。

我创建了一个新的formdata对象,然后简单地设置了自己所需的值。你可以看到我发起了几个API请求,但关键在于文件名和文件对象本身。

接下来你可以看到简单的jQuery Ajax调用。Face.com有多种选择,但我基本只要求它返回预测年龄、性别、情绪,是否面带微笑以及戴着眼镜。就是这些。我得到了一个很棒的JSON包,并且对它进行了格式化。

现在显然API并不完美。我获得了使用API一些不同程度的结果。有时相当准确,有时相反。但是总体来说,这相当酷。这里有一些实际测试的图片,看起来有点“可怕”。

识别结果:neutral(无表情)

识别结果:happy(开心)

识别结果:surprised(惊讶)

识别结果:sad(悲伤)

好了,准备自己亲自来试试? 只需点击下面的演示按钮。如果需要源代码,可以直接在页面上查看! 这是100%的纯客户端代码。

原文地址: http://www.html5cn.org/article-2554-1.html

 

相关 [html5 人脸识别] 推荐:

【转载】用HTML5进行人脸识别

- - HTML5研究小组
其中的一个特性是getUserMedia( W3C规范 ). 它是一个JavaScript API,可以让你访问(需要权限)用户的网络摄像头和麦克风. 今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别. 在网页内进行人脸识别,很好很强大. “现代Web”不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内容.

【人脸识别】初识人脸识别

- - CSDN博客推荐文章
由于导师给我们布置了每周阅读两篇大牛论文,并写ppt的任务. 反正ppt都写了,所以我想干脆直接把ppt的内容再整理一下写成博客. 近期的阅读论文都是 人脸识别相关的主题. 如果你研究过人脸识别,或者对这方面有兴趣,那么你一定听说过Paul Viola. 他可以算得上是人脸检测识别的始祖,他的一篇大作《RobustReal-time Object Detection》可以说是人脸识别领域最重要的一篇论文.

自动人脸识别基本原理

- - IT技术博客大学习
标签:   https://b2museum.   人脸识别经过近 40 年的发展,取得了很大的发展,涌现出了大量的识别算法. 这些算法的涉及面非常广泛,包括模式识别、图像处理、计算机视觉、人工智能、统计学习、神经网络、小波分析、子空间理论和流形学习等众多学科. 所以很难用一个统一的标准对这些算法进行分类.

用python库face_recognition进行人脸识别

- - 开源软件 - ITeye博客
期间在安装依赖包dlib时遇到问题,解决见:  http://kissmett.iteye.com/blog/2409857. 3.通过摄像头实时在获取的帧上进行人脸识别(较卡顿). basefacefilespath ="images"#faces文件夹中放待识别任务正面图,文件名为人名,将显示于结果中 baseface_titles=[] #图片名字列表 baseface_face_encodings=[] #识别所需人脸编码结构集 #读取人脸资源 for fn in os.listdir(basefacefilespath): #fn 人脸文件名.

人脸识别发展史与算法综述

- king - CSDN博客推荐文章
      在我们生存的这个地球上,居住着近 65 亿人. 每个人的面孔都由额头、眉毛、眼睛、鼻子、嘴巴、双颊等少数几个区域组合而成,它们之间的大体位置关系也是固定的,并且每张脸的大小不过七八寸见方. 然而,它们居然就形成了那么复杂的模式,即使是面容极其相似的双胞胎,其家人通常也能够非常容易地根据他们面孔上的细微差异将他们区分开来.

温习传闻:Facebook收购人脸识别创业公司Face.com

- - 业界
导读:准备好再听一个后IPO 时代的Facebook 收购的传闻吗. 事实上,Face.com 传言将成为Facebook 的收购目标由来已久. 虽然我们还不能确定这次收购能否成真,但本文给出的一些分析还是饶意义的. 据以色列商业报纸Calcalist披露,社交网络巨人将要收购人脸识别科技公司Face.com.

人脸识别算法终于超过了人类本身

- - 博客 - 伯乐在线
计算机科学家已经开发出一种新的人脸识别算法,在识别人脸的能力上比人类本身更加强大. 我们每个人都有过认不出某个自己曾经认识的人的经历,在不同的姿势、光照和表情下,这其实是一件比较困难的事情. 计算机识别系统同样存在这些问题. 事实上,尽管全世界的计算机科学家努力了这么多年,还是没有任何一种计算机识别系统在识别人脸方面能够像人类一样强大.

利用python打造自己的人脸识别系统 - 简书

- -
正像著名物理学家,理查德•费曼说的一样,如果要真正理解一个东西,我们必须要能够把它创造出来. 动手去做,永远比被动地听有用,我就是这么想并这么实践的. 本文介绍了我自己动手做的一种基于卷积神经网络的人脸识别系统,以python为语言基础,综合应用了keras、opencv、numpy、sklearn等多种技术.

深入浅出人脸识别原理 · Martin's Blog

- -
Iphone X发布,革命性的取消了. TouchID(指纹识别),而添加了更酷的. FaceID(人脸识别)模块,. FaceID不简单的运用在解锁上,还可以在支付,表情等场景中应用,给开发者带来更酷更丰富的应用,. Iphone X在多个硬件传感器的加持下,可以采集3万个点来感知用户的面部特征.

人脸识别模型和源代码 Welcome to Yu Qiao's homepage!

- -