网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别
今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别。在网页内进行人脸识别,很好很强大!
“现代Web”不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内容。例如我一直特别关注Canvas特性。它对游戏和绘图意义重大 – 但是仅此而已。它并不是一个不好的特性,我只是不会经常用到它。每当看到一些开发中酷炫的新功能,我的大脑里都会思考它们可以产生哪些实际用途。显然对你有价值的内容可能对我来说并不一定,但搞清楚我如何实际使用一个功能是我学习它的一部分。
其中的一个特性是getUserMedia(
//a video tag
var video = document.getElementById(‘monitor’);
//request it
navigator.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,我突然想到可以用网络摄像头的照片做一些很酷的东西。我记得
这有这几个重大问题。 第一 – Face.com有一个很好的REST API,我们将如何从JavaScript应用程序里面来调用它?其次 – Face.com需要你可以上传图片,或给它一个网址。 我知道可以把一个Canvas图片发送给服务器,并通过我的后台上传到Face.com,但有没有办法绕过服务器来把图片发送给这个API?
第一个实际上并不是问题。Face.com实现了
更复杂的问题则是如何把画布上的数据发送到Face.com(注:还可以参考我的这篇文章《
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一些不同程度的结果。有时相当准确,有时相反。但是总体来说,这相当酷。这里有一些实际测试的图片,看起来有点“可怕”。
识别结果:neutral(无表情)
识别结果:happy(开心)
识别结果:surprised(惊讶)
识别结果:sad(悲伤)
好了,准备自己亲自来试试? 只需点击下面的演示按钮。如果需要源代码,可以直接在页面上查看! 这是100%的纯客户端代码。
网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别相关推荐
- css人脸识别的圆圈,基于HTML5 的人脸识别活体认证的实现方法
html> #container { position : relative; } #canvas { position : absolute; left : 0; top : 0; } 你的浏 ...
- 基于HTML5 的人脸识别活体认证
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- 用HTML5实现人脸识别
注:今天HTML5小组沙龙<论道HTML5>分享时有朋友问到一个问题,getUserMedia是否会支持人脸识别,我当时的答案是这应该是应用来实现的功能,而不是规范要完成的工作.而我之前在 ...
- 用HTML5实现人脸识别-用Javascript实现人脸美容
在人脸识别的基础上,我们将使用纯Javascript来实现如下的功能: 识别和标注人脸以及五官 对人脸进行美容 从本文的内容中,你将意识到,Javascript能做的,能实现的,远远比你想象的多. 演 ...
- php活体检测,基于HTML5 的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- html clm标记,基于HTML5的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了很多应用,例如:支付宝,招行的取款,养老金领取等方面,但在杜绝假冒,认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- 人脸识别资源推荐:20款人脸检测/识别的API、库和软件
人脸识别资源推荐:20款人脸检测/识别的API.库和软件 码上一课导读 人脸识别技术是一种依据人的面部特征,自动进行身份鉴别的一种技术,它综合运用了数字图像.视频处理.模式识别等多种技术.通过人脸特征 ...
- python人脸识别门禁_Python+Opencv+Tkinter指纹识别与人脸识别的门禁兼考勤(一)
一.设计目标:旨在PC端上搭建一款具有指纹识别与人脸识别功能的门禁兼考勤系统.该系统同时具备普通用户模式.管理员模式与超级管理员模式,下面具体介绍每种模式下的功能. 1)普通用户模式 该模式可分为收集 ...
- 人脸服务器如何与门禁系统对接,人脸识别门禁系统终端设备接口说明
1.上传识别结果 人脸识别门禁系统设备识别后把识别结果上传到服务器(单包数据数量小于5条) (一) 人脸识别门禁系统请求(设备->服务器): 1. 人脸识别门禁系统请求命令: 0x19 2. 人 ...
最新文章
- 辨析Page对象的ResolveClientUrl与ResolveUrl
- python 淘宝滑块验证_python2.7+selenium2实现淘宝滑块自动认证功能
- ACM国际大学生程序设计竞赛
- foxmail、outlook发送邮件,进度条很慢
- C# does not contain a constructor that takes no parameter
- R语言GGPlot2
- 20、在Linux中实现类似windows中获取配置文件的函数GetProfileString
- 怎么切换java版本吗_Java切换JDK版本的方法及技巧
- [IOI2005]Riv 河流
- 计算机视觉基础:图像处理 Task 03 - 颜色空间互转
- 【Luogu1588】丢失的牛
- mysql 存储过程使用参数_mysql 存储过程 使用参数
- 【笔记】mac os命令行编译objective-c
- 步骤一:支付宝-查看PID和APPID信息步骤
- 模电设计学习笔记(一)跟随器
- ORA-01045: user lacks CREATE SESSION privilege
- 网络图怎么画?简单专业的网络图绘制方法
- python海龟绘图代码大全-Python中的高级turtle(海龟)作图
- UE4随笔 —— 角色动画的骨骼重定向
- 无限级树状图html5,无限树状列表的实现
热门文章
- gpib安装包 python_ioctl errorno:25在使用pythongpib的GPIB通信中
- 编译器不识别stm指令_编译器简介
- Qt鼠标拖动绘制基本几何图形
- 如何确定CPU是大端字节序还是小端字节序?
- 2013 javaB1 世纪末的日期
- matlab fspeical,matlab的special函数用法
- 软件工程 / 为什么基于接口而非实现编程?
- WebRTC / Jitsi / 架构
- 公办低分二本_山东的5所专科院校,属于本省公办,适合低分学生报考
- richedit line insertion error什么意思_大连 LINE 是怎样的一个公司?