<template>
|
<!-- 人脸登陆弹窗 -->
|
<div>
|
<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>
|
export default {
|
props:{
|
faceShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data(){
|
return {
|
status:true,
|
faceDetect:'请将正脸对准摄像头',
|
imageBase64:'',
|
newstream:'',
|
intTime:null,
|
postTime:null,
|
}
|
},
|
mounted() {
|
this.faceChange();
|
},
|
destroyed:function(){
|
this.status = false;
|
this.clearVideo();
|
},
|
methods: {
|
// 关闭摄像头
|
clearVideo:function(){
|
// 关闭定时器
|
clearInterval(this.intTime);
|
clearInterval(this.postTime);
|
// 关闭摄像头
|
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 = '请将正脸对准摄像头'
|
// vm.faceShow = true;
|
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) {
|
//兼容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(()=>{
|
this.getImg();
|
},100)
|
|
this.facePost();
|
},
|
error:function(error) {
|
console.log(error)
|
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
},
|
// 请求后台验证人脸
|
facePost:function(){
|
let vm = this;
|
vm.$axios({
|
method:'post',
|
url:'FaceIdentifyAction!faceCompare2N',
|
data:'json=' + JSON.stringify({
|
fileData:vm.imageBase64
|
})
|
}).then(res=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
|
}else{
|
vm.faceDetect = result.data.msg;
|
this.$router.push("/home");
|
if(vm.status == true){
|
setTimeout(() => {
|
this.facePost();
|
}, 1000);
|
}
|
}
|
}).catch(err=>{
|
vm.faceDetect = '网络链接失败';
|
if(vm.status == true){
|
// vm.clearVideo();
|
// sessionStorage.setItem('username','汪轩');
|
// this.$router.push("/home");
|
// // 设置用户的权限
|
// this.$store.dispatch('user/getPermits');
|
setTimeout(() => {
|
this.facePost();
|
}, 1000);
|
}
|
})
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.text{
|
text-align:center;
|
padding:10px 0
|
}
|
</style>
|
