<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>
|
import faceManager from '../../assets/js/apis/faceManager/faceManager.js'
|
import {uKeyLogin} from "@/assets/js/api";
|
import const_num from "@/assets/js/const/const_num";
|
import sysConfig from "@/assets/js/config";
|
import RSA from "@/assets/js/tools/RSA";
|
export default {
|
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 = '请将正脸对准摄像头'
|
// 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) {
|
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.$store.state.ukey.isIn && sysConfig.uKey.value) {
|
this.faceDetect = '请先插入ukey';
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 500);
|
}else {
|
let vm = this;
|
faceManager.faceVerify({fileData: vm.imageBase64}).then(res => {
|
let result = JSON.parse(res.data.result);
|
if (result.code == 1) {
|
vm.faceDetect = "匹配成功";
|
setTimeout(() => {
|
vm.onLogin();
|
}, 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 = JSON.parse(res.data.result);
|
if (result.code == 1) {
|
let password = RSA.decrypt(result.data.USnId, const_num.privateKey);
|
if(sysConfig.uKey.value) {
|
this.uKeyLogin(result.data.UName, password);
|
}else {
|
this.faceSuccessLogin(result.data.UName, password);
|
}
|
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
},
|
uKeyLogin(username, password) {
|
// ukey登录
|
uKeyLogin(username, password, this.$store.state.ukey.id).then(res=>{
|
// 对结果进行处理
|
this.handleLogin(res, username);
|
}).catch(error => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.faceDetect = "网络异常";
|
this.facePost();
|
});
|
},
|
faceSuccessLogin(username, password) {
|
this.$emit("successLogin", {
|
username,
|
password
|
});
|
},
|
handleLogin(res, username) {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$message.success("登录成功");
|
sessionStorage.setItem('username', username);
|
sessionStorage.setItem('userId', rs.data);
|
this.$router.push("/home");
|
// 设置用户的权限
|
this.$store.dispatch('user/getPermits');
|
} else {
|
this.faceDetect = rs.msg;
|
this.facePost();
|
}
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.text {
|
text-align: center;
|
padding: 10px 0
|
}
|
</style>
|
