怎么在HTML5中使用tracking.js实现一个刷脸支付功能

怎么在HTML5中使用tracking.js实现一个刷脸支付功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

摄像头1.1input获取摄像头

html5中获取用户摄像头，有两种方式，使用input，如下：

<input type="file" capture="camera" accept="image/*"/>

另外如果想打开相册，可以这样：

<input type="file" accept="img/*">

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

2getUserMedia获取摄像图

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 = "你的浏览器不支持访问用户媒体设备"    }}

3播放视屏

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

success(stream) {    this.streamIns = stream    // 设置播放地址，webkit内核浏览器    this.URL = window.URL || window.webkitURL    if ("class="lazy" data-srcObject" in this.$refs.refVideo) {        this.$refs.refVideo.class="lazy" data-srcObject = stream    } else {        this.$refs.refVideo.class="lazy" data-src = this.URL.createObjectURL(stream)    }    this.$refs.refVideo.onloadedmetadata = e => {        // 播放视频        this.$refs.refVideo.play()        this.initTracker()    }},error(e) {    this.scanTip = "访问用户媒体失败" + e.name + "," + e.message}

注意：

1. 播放视屏方法最好写在onloadmetadata回调函数中，否则可能会报错。

2. 播放视频的时候出于安全性考虑，必须在本地环境中测试，也就是http://localhost/xxxx中测试，或者带有https://xxxxx环境中测试，不然的话或有跨域问题。

3. 下面用到的initTracker()方法也好放在这个onloadedmetadata回调函数里，不然也会报错。

捕捉人脸

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)    }}

在页面中画一些方框，标识出人脸：

<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>// 绘制跟踪框plot({x, y, width: w, height: h}) {    // 创建框对象    this.profile.push({ width: w, height: h, left: x, top: y })}

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)}

关于怎么在HTML5中使用tracking.js实现一个刷脸支付功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。