人脸识别html5效果,用HTML5实现人脸识别

注：今天 HTML5 小组沙龙《论道 HTML5 》分享时有朋友问到一个问题， getUserMedia 是否会支持人脸识别，我当时的答案是这应该是应用来实现的功能，而不是规范要完成的工作。而我之前在网上看到过一篇关于 getUserMedia 和人脸识别的相关文章，觉得很有趣，正好趁这个机会分享给大家。

转载请注明出处：蒋宇捷的博客

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

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

//a video tagvar video = document.getElementById('monitor');//request itnavigator.webkitGetUserMedia('video', gotStream, noStream);function gotStream(stream) {video.src = webkitURL.createObjectURL(stream);video.onerror = function () {stream.stop();streamError();};}function noStream() {document.getElementById('errorMessage').textContent = 'No camera available.';}function streamError() {document.getElementById('errorMessage').textContent = 'Camera error.';}

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

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

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

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

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

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

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

function snapshot() {$("#result").html("

Working hard for the money...

");canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext('2d').drawImage(video, 0, 0);var data = canvas.toDataURL('image/jpeg', 1.0);newblob = dataURItoBlob(data);var formdata = new FormData();formdata.append("api_key", faceKey);formdata.append("api_secret", faceSecret);formdata.append("filename","temp.jpg"); formdata.append("file",newblob); $.ajax({ url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses', data: formdata, cache: false, contentType: false, processData: false, dataType:"json", type: 'POST', success: function (data) { handleResult(data.photos[0]); }}); }

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

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

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

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