HTML5+tracking.js实现刷脸支付

简介:

HTML5+tracking.js实现刷脸支付

最近刷脸支付很火,老板们当然要追赶时代潮流,于是就有了刷脸支付这个项目。前端实现关键的技术是摄像头录像,拍照和人脸比对,本文来探讨一下如何在html5环境中如何实现刷脸支付以及开发过程中遇到的问题。

1.摄像头
1.1 input获取摄像头
html5中获取手机上的图片,有两种方式,使用input,如下可以打开摄像头拍照:


另外如果想打开相册,可以这样:


但是这两种方式都会有兼容性问题,用过的同学可能都知道。

1.2 getUserMedia获取摄像头
getUserMedia是html5一个新的api,官方一点的定义是:

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D转换器等等),也可能是其它轨道类型。

简单一点说就是可以获取到用户摄像头。

同上面input一样,这种方式也有兼容性问题,不过可以使用其他方式解决,这里可以参考MediaDevices.getUserMedia(),文档中有介绍"在旧的浏览器中使用新的API"。我这里在网上也找了一些参考,总结出一个相对全面的getUserMedia版本,代码如下:

// 访问用户媒体设备
getUserMedia(constrains, success, error) {

if (navigator.mediaDevices.getUserMedia) {
    //最新标准API
    navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
    //webkit内核浏览器
    navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia) {
    //Firefox浏览器
    navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(constrains).then(success).catch(error);
} else {
    this.scanTip = "你的浏览器不支持访问用户媒体设备"
}

}

1.3 播放视屏
获取设备方法有两个回调函数,一个是成功,一个是失败。成功了就开始播放视频,播放视屏其实就是给video设置一个url,并调用play方法,这里设置url要考虑不同浏览器兼容性,代码如下:

success(stream) {

this.streamIns = stream
// 设置播放地址,webkit内核浏览器
this.URL = window.URL || window.webkitURL
if ("srcObject" in this.$refs.refVideo) {
    this.$refs.refVideo.srcObject = stream
} else {
    this.$refs.refVideo.src = this.URL.createObjectURL(stream)
}
this.$refs.refVideo.onloadedmetadata = e => {
    // 播放视频
    this.$refs.refVideo.play()
    this.initTracker()
}

},
error(e) {

this.scanTip = "访问用户媒体失败" + e.name + "," + e.message

}

注意:

播放视屏方法最好写在onloadmetadata回调函数中,否则可能会报错。
播放视频的时候出于安全性考虑,必须在本地环境中测试,也就是http://localhost/xxxx中测试,或者带有https://xxxxx环境中测试,不然的话或有跨域问题。
下面用到的initTracker()方法也好放在这个onloadedmetadata回调函数里,不然也会报错。

  1. 捕捉人脸
    2.1 使用tracking.js捕捉人脸

视屏在video中播放成功之后就开始识别人脸了,这里使用到一个第三方的功能tracking.js,是国外的大神写的JavaScript图像识别插件。关键代码如下:

// 人脸捕捉
initTracker() {

this.context = this.$refs.refCanvas.getContext("2d")    // 画布
this.tracker = new tracking.ObjectTracker(['face'])     // tracker实例
this.tracker.setStepSize(1.7)                           // 设置步长
this.tracker.on('track', this.handleTracked)            // 绑定监听方法
try {
    tracking.track('#video', this.tracker)      // 开始追踪
} catch (e) {
    this.scanTip = "访问用户媒体失败,请重试"
}

}

捕获到人脸之后,可以在页面上用一个小方框标注出来,这样有点交互效果。

// 追踪事件
handleTracked(e) {

if (e.data.length === 0) {
    this.scanTip = '未检测到人脸'
} else {
    if (!this.tipFlag) {
        this.scanTip = '检测成功,正在拍照,请保持不动2秒'
    }
    // 1秒后拍照,仅拍一次
    if (!this.flag) {
        this.scanTip = '拍照中...'
        this.flag = true
        this.removePhotoID = setTimeout(() => {
            this.tackPhoto()
            this.tipFlag = true
        }, 2000)
    }
    e.data.forEach(this.plot)
}

}

在页面中画一些方框,标识出人脸:

         :style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}"></div>

// 绘制跟踪框
plot({x, y, width: w, height: h}) {

// 创建框对象
this.profile.push({ width: w, height: h, left: x, top: y })

}
2.2 拍照
拍照,就是使用video作为图片源,在canvas中保存一张图片下来,注意这里使用toDataURL方法的时候可以设置第二个参数quality,从0到1,0表示图片比较粗糙,但是文件比较小,1表示品质最好。

// 拍照
tackPhoto() {

this.context.drawImage(this.$refs.refVideo, 0, 0, this.screenSize.width, this.screenSize.height)
// 保存为base64格式
this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
// this.compare(imgUrl)
this.close()

},
// Base64转文件
getBlobBydataURI(dataURI, type) {

var binary = window.atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
    type: type
});

},
// 保存为png,base64格式图片
saveAsPNG(c) {

return c.toDataURL('image/png', 0.3)

}

拍照完成之后就可以把文件发送给后端,让后端进行对比验证,这里后端使用的是阿里云的接口。

3. 最后效果
3.1 参考代码demo
最后,demo我已经放在github上了,感兴趣可以打开看一下。

效果如下:

3.2 在项目中落地
最后放在项目中,无非就是最后一个步骤,去调用接口比对,根据比对结果成功是成功还是失败,决定是人脸支付还是继续使用原来的密码支付,效果如下:

ps:这里人脸比对失败了,是因为我带着口罩,就不呲牙露脸了。后端调用阿里云的接口地址:https://help.aliyun.com/document_detail/154615.html?spm=a2c4g.11186623.6.625.632a37b9brzAoi

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/

相关文章
|
18天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
82 1
|
23天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
38 3
|
26天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
39 4
|
25天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
96 6
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
117 1
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
34 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐