HTML5+tracking.js实现刷脸支付

该死的石头 發表於 2020-4-16 14:03:00

最近刷脸支付很火，老板们当然要追赶时代潮流，于是就有了刷脸支付这个项目。前端实现关键的技术是摄像头录像，拍照和人脸比对，本文来探讨一下如何在html5环境中如何实现刷脸支付以及开发过程中遇到的问题。
<h1>1.摄像头</h1>
<h2>1.1 input获取摄像头</h2>
html5中获取手机上的图片，有两种方式，使用input，如下可以打开摄像头拍照：
<div class="cnblogs_code">
<pre><input type="file" capture="camera" accept="image/*"/></pre>
</div>
另外如果想打开相册，可以这样：
<div class="cnblogs_code">
<pre><input type="file" accept="img/*"></pre>
</div>
但是这两种方式都会有兼容性问题，用过的同学可能都知道。
<h2>1.2 getUserMedia获取摄像头</h2>
getUserMedia是html5一个新的api，官方一点的定义是：
<blockquote>
<code>MediaDevices.getUserMedia()</code> 会提示用户给予使用媒体输入的许可，媒体输入会产生一个<code>MediaStream</code>，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
</blockquote>
简单一点说就是可以获取到用户摄像头。
同上面input一样，这种方式也有兼容性问题，不过可以使用其他方式解决，这里可以参考MediaDevices.getUserMedia()，文档中有介绍"在旧的浏览器中使用新的API"。我这里在网上也找了一些参考，总结出一个相对全面的getUserMedia版本，代码如下：
<div class="cnblogs_code">
<pre>// 访问用户媒体设备
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 = "你的浏览器不支持访问用户媒体设备"
}
}</pre>
</div>
<h2>1.3 播放视屏</h2>
获取设备方法有两个回调函数，一个是成功，一个是失败。成功了就开始播放视频，播放视屏其实就是给video设置一个url，并调用play方法，这里设置url要考虑不同浏览器兼容性，代码如下：
<div class="cnblogs_code">
<pre>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
}</pre>
</div>
注意：
<ol>
<li>播放视屏方法最好写在onloadmetadata回调函数中，否则可能会报错。</li>
<li>播放视频的时候出于安全性考虑，必须在本地环境中测试，也就是http://localhost/xxxx中测试，或者带有https://xxxxx环境中测试，不然的话或有跨域问题。</li>
<li>下面用到的initTracker()方法也好放在这个onloadedmetadata回调函数里，不然也会报错。</li>
</ol>
<h1>2. 捕捉人脸</h1>
<h2>2.1 使用tracking.js捕捉人脸</h2>
视屏在video中播放成功之后就开始识别人脸了，这里使用到一个第三方的功能tracking.js，是国外的大神写的JavaScript图像识别插件。关键代码如下：
<div class="cnblogs_code">
<pre>// 人脸捕捉
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 = "访问用户媒体失败，请重试"
}
}</pre>
</div>
捕获到人脸之后，可以在页面上用一个小方框标注出来，这样有点交互效果。
<div class="cnblogs_code">
<pre>// 追踪事件
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)
}
}</pre>
</div>
在页面中画一些方框，标识出人脸：
<div class="cnblogs_code">
<pre><div class="rect" v-for="item in profile"
 :style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}"></div></pre>
</div>
<div class="cnblogs_code">
<pre>// 绘制跟踪框
plot({x, y, width: w, height: h}) {
// 创建框对象
this.profile.push({ width: w, height: h, left: x, top: y })
}</pre>
</div>
<h2>2.2 拍照</h2>
拍照，就是使用video作为图片源，在canvas中保存一张图片下来，注意这里使用toDataURL方法的时候可以设置第二个参数quality，从0到1，0表示图片比较粗糙，但是文件比较小，1表示品质最好。
<div class="cnblogs_code">
<pre>// 拍照
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(','));
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)
}</pre>
</div>
拍照完成之后就可以把文件发送给后端，让后端进行对比验证，这里后端使用的是阿里云的接口。
<h1>3. 最后效果</h1>
<h2>3.1 参考代码demo</h2>
最后，demo我已经放在github上了，感兴趣可以打开看一下。
效果如下：
<img src="https://img2020.cnblogs.com/blog/72678/202004/72678-20200416135617942-133503375.gif" alt="">
<h2>3.2 在项目中落地</h2>
最后放在项目中，无非就是最后一个步骤，去调用接口比对，根据比对结果成功是成功还是失败，决定是人脸支付还是继续使用原来的密码支付，效果如下：
<img src="https://img2020.cnblogs.com/blog/72678/202004/72678-20200418115227540-927737288.gif" alt="">
ps：这里人脸比对失败了，是因为我带着口罩，就不呲牙露脸了。后端调用阿里云的接口地址：https://help.aliyun.com/document_detail/154615.html?spm=a2c4g.11186623.6.625.632a37b9brzAoi
 

</div>
<div id="MySignature" role="contentinfo">
<p style="background-position: 1% 50%; border-top: #e0e0e0 1px dashed; border-right: #e0e0e0 1px dashed; border-bottom: #e0e0e0 1px dashed; border-left: #e0e0e0 1px dashed; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 60px; background: #969696 url("https://images.cnblogs.com/cnblogs_com/lloydsheng/239039/o_copyright.gif") no-repeat 1% 50%; font-family: 微软雅黑; font-size: 12px; color: #FFFFFF">
 作者：Tyler Ning
 
 出处：http://www.cnblogs.com/tylerdonet/
 
 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，请微信联系冬天里的一把火
 
<div class="van-overlay" style="display: none;z-index: 1;position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);"></div>
<imgid="pop-contect-wechat" style="display:none;width:20em;position: fixed;max-height: 100%;overflow-y: auto;transition: transform 0.3s;" src="https://files-cdn.cnblogs.com/files/tylerdonet/shouwangzhe059187.bmp"/>
 
来源：https://www.cnblogs.com/tylerdonet/p/12711086.html

頁: [1]

琼殿技术论坛's Archiver

HTML5+tracking.js实现刷脸支付