<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 "./faceManager.js";
|
import { uKeyLogin } from "@/api/user";
|
import store from '@/store';
|
import { mapState } from 'pinia';
|
import useElement from '@/hooks/useElement.js';
|
import { getToken, removeToken, setToken, getUname, setUname, removeUname, getUrole, setUrole, removeUrole } from '@/utils/auth';
|
|
const { $loading, $confirm, $message } = useElement();
|
// import const_num from "@/assets/js/const/const_num";
|
// 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,
|
redirect: undefined,
|
otherQuery: {}
|
};
|
},
|
watch: {
|
$route: {
|
handler: function (route) {
|
const query = route.query;
|
if (query) {
|
this.redirect = query.redirect;
|
this.otherQuery = this.getOtherQuery(query);
|
}
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
...mapState(store.ukey, ['isIn', 'connect', 'id']),
|
},
|
mounted() {
|
this.faceChange();
|
},
|
beforeUnmount() {
|
// console.log('beforeUnmount ', '=============');
|
|
this.status = false;
|
this.clearVideo();
|
},
|
methods: {
|
getOtherQuery(query) {
|
return Object.keys(query).reduce((acc, cur) => {
|
if (cur !== 'redirect') {
|
acc[cur] = query[cur];
|
}
|
return acc;
|
}, {});
|
},
|
// 关闭摄像头
|
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.isIn) {
|
this.faceDetect = "请先插入ukey";
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 500);
|
} else if (!this.imageBase64) {
|
this.faceDetect = "人脸识别中...";
|
this.setTime = setTimeout(() => {
|
this.facePost();
|
}, 500);
|
} else {
|
let vm = this;
|
faceManager
|
.faceVerify('"' + vm.imageBase64 + '"', this.id)
|
.then((result) => {
|
let res = result;
|
console.log(res);
|
if (res.code === 1 && res.data) {
|
vm.faceDetect = "匹配成功";
|
let user = res.data2[0];
|
setTimeout(() => {
|
// vm.onLogin();
|
// $message.success("登录成功");
|
setUname(user.uname);
|
setToken('admin');
|
setUrole(user.urole);
|
this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
|
// this.$router.push("/home");
|
// // // 设置用户的权限
|
// // this.$store.dispatch("user/getPermits");
|
}, 1000);
|
} else {
|
vm.faceDetect = res.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 () {
|
faceManager
|
.getUserName()
|
.then((res) => {
|
let { code, data } = res;
|
if (code == 1) {
|
this.uKeyLogin(data.uname, data.usnid);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
uKeyLogin(username, password) {
|
// ukey登录
|
uKeyLogin(username, password, this.id, true)
|
.then((res) => {
|
console.log('res', res, '=============');
|
|
// 对结果进行处理
|
this.handleLogin(res, username);
|
})
|
.catch((error) => {
|
// 关闭等待
|
this.loading = false;
|
this.faceDetect = "网络异常";
|
this.facePost();
|
});
|
},
|
handleLogin(res, username) {
|
let rs = res.data;
|
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="scss" scoped>
|
.text {
|
text-align: center;
|
padding: 10px 0;
|
}
|
</style>
|
