H5做人脸识别

H5做人脸识别，采用的商汤的SDK

公司要做一个有关交易的h5网站,我用的vue框架，其中要用人脸识别功能，app采用的是商汤的sdk，我就去扒拉文档，发现有h5的接口，哈哈，令我舒心一笑~

js部分

<div class="video_btn">
 	<input id="imgFile" type="file" accept="video/*" capture="camcorder" @change="uploadVideo()">
</div>

这里采用input的方法调用起手机的摄像头，在手机上（ios/Android）都可以调起摄像头，在电脑上开启浏览器中的那个手机模拟器，就只能将文件框调起。
input 这个方法兼容性好，我之前用的getUserMedia，这个方法ios不支持，查了好久文档没找到解决办法，故采用input方法。

uploadVideo() {
var file = document.getElementById("imgFile").files[0];
                const isLt20M = file.size / 1024 / 1024 < 20;
                if (!isLt20M) {
                    this.$message.error('上传视频大小不能超过20MB!');
                    return false;
                } else {
                    this.saver(file);
                }
            }

saver 方法就是去请求商汤的h5人脸识别接口，我用的是活体读数字那个，商汤的接口我就不再这里详细的写了，如果要用的话，可以按照我这个接着往下写。

再分享个将basa64图片转成file文件的方法，我在项目中搭配人脸识别用到了，也在这记录下：

dataURLtoBlob(dataurl) {
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                var a = new Blob([u8arr], {type: mime});
                this.blobToFile(a, 'avatar.jpg');
            },
            blobToFile(theBlob, fileName) {
                theBlob.lastModifiedDate = new Date();
                theBlob.name = fileName;
                return theBlob;
            },

这个方法没有什么兼容的问题，个人觉得很好用