<template>
|
<div class="face-check">
|
<video ref="video" width="480" height="320" style="display: none"></video>
|
<canvas ref="canvas" width="480" height="320"></canvas>
|
<p class="text">{{ faceDetect }}</p>
|
</div>
|
</template>
|
<script>
|
import faceManager from "@/views/login/components/face/faceManager.js";
|
export default {
|
name: "checkFace",
|
props: {
|
faceShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
status: true,
|
faceDetect: "请将正脸对准摄像头",
|
imageBase64: "",
|
newstream: "",
|
intTime: null,
|
postTime: null,
|
setTime: null
|
};
|
},
|
mounted() {
|
this.faceChange();
|
},
|
destroyed: function() {
|
this.status = false;
|
this.clearVideo();
|
},
|
methods: {
|
// 关闭摄像头
|
clearVideo: function() {
|
// 关闭定时器
|
clearInterval(this.intTime);
|
clearInterval(this.postTime);
|
clearTimeout(this.setTime);
|
// 关闭摄像头
|
for (let track of this.newstream.getTracks()) {
|
track.stop();
|
}
|
},
|
// 获取图片
|
getImg: function() {
|
let vm = this;
|
let video = vm.$refs.video;
|
let canvas = vm.$refs.canvas;
|
let context = canvas.getContext("2d");
|
context.drawImage(video, 0, 0, 480, 320);
|
// 获取图片base64链接
|
vm.imageBase64 = canvas.toDataURL("image/png");
|
},
|
// 人脸检测
|
faceChange: function() {
|
let vm = this;
|
// 恢复提示语
|
vm.faceDetect = "请将正脸对准摄像头";
|
if (
|
navigator.mediaDevices.getUserMedia ||
|
navigator.getUserMedia ||
|
navigator.webkitGetUserMedia ||
|
navigator.mozGetUserMedia
|
) {
|
//调用用户媒体设备, 访问摄像头
|
this.getUserMedia(
|
{ video: { width: 480, height: 320 } },
|
this.success,
|
this.error
|
);
|
} else {
|
alert("不支持访问用户媒体");
|
}
|
},
|
//访问用户媒体设备的兼容方法
|
getUserMedia: function(constraints, success, error) {
|
if (navigator.mediaDevices.getUserMedia) {
|
//最新的标准API
|
navigator.mediaDevices
|
.getUserMedia(constraints)
|
.then(success)
|
.catch(error);
|
} else if (navigator.webkitGetUserMedia) {
|
//webkit核心浏览器
|
navigator.webkitGetUserMedia(constraints, success, error);
|
} else if (navigator.mozGetUserMedia) {
|
//firfox浏览器
|
navigator.mozGetUserMedia(constraints, success, error);
|
} else if (navigator.getUserMedia) {
|
//旧版API
|
navigator.getUserMedia(constraints, success, error);
|
}
|
},
|
// 成功回调
|
success: function(stream) {
|
let vm = this;
|
//兼容webkit核心浏览器
|
let CompatibleURL = window.URL || window.webkitURL;
|
//将视频流设置为video元素的源
|
// console.log(stream);
|
// stream = stream;
|
this.newstream = stream;
|
//video.src = CompatibleURL.createObjectURL(stream);
|
let video = this.$refs.video;
|
video.srcObject = stream;
|
video.play();
|
this.intTime = setInterval(() => {
|
vm.getImg();
|
}, 0);
|
setTimeout(function() {
|
vm.facePost();
|
}, 0);
|
},
|
error: function(error) {
|
console.log(error);
|
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
},
|
// 请求后台验证人脸
|
facePost: function() {
|
if (!this.imageBase64) {
|
this.faceDetect = "人脸识别中...";
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 500);
|
} else {
|
let vm = this;
|
faceManager
|
.faceVerify('"' + vm.imageBase64 + '"', this.$store.state.ukey.id)
|
.then(res => {
|
let result = res.data;
|
if (result.code == 1 && result.data) {
|
vm.faceDetect = "匹配成功";
|
setTimeout(() => {
|
// vm.onLogin();
|
vm.$emit("checkSuccess");
|
}, 1000);
|
} else {
|
vm.faceDetect = result.msg;
|
if (vm.status == true) {
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 3000);
|
}
|
}
|
})
|
.catch(err => {
|
vm.faceDetect = "网络链接失败";
|
if (vm.status == true) {
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 3000);
|
}
|
});
|
}
|
},
|
// 登陆设置sessionStorage
|
onLogin: function() {
|
let vm = this;
|
faceManager
|
.getUserName()
|
.then(res => {
|
let result = res.data;
|
if (result.code == 1) {
|
let loginUser = sessionStorage.getItem("username");
|
if (loginUser == result.data.uname) {
|
vm.faceDetect = "验证成功";
|
setTimeout(() => {
|
vm.$emit("checkSuccess");
|
}, 2000);
|
} else {
|
vm.faceDetect = "人脸和登录用户不匹配";
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 3000);
|
}
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.face-check {
|
background-color: #ffffff;
|
}
|
.text {
|
text-align: center;
|
}
|
</style>
|
