|
|
@@ -10,7 +10,7 @@
|
|
|
<div ref="wrapper" class="camera wrapper">
|
|
|
<!-- 视频元素容器 -->
|
|
|
<video
|
|
|
- v-show="!takeOver && first"
|
|
|
+ v-show="!takeOver"
|
|
|
id="video"
|
|
|
ref="videoEl"
|
|
|
class="camera"
|
|
|
@@ -30,6 +30,7 @@
|
|
|
</div>
|
|
|
<span v-if="takeOver && !lose" class="text">扫描中...</span>
|
|
|
<span v-if="!takeOver && !first && !lose" class="text">人脸识别成功</span>
|
|
|
+ <span v-if="!first && lose" class="text loseFont">人脸识别失败</span>
|
|
|
<div v-if="takeOver && !lose" class="loading">
|
|
|
<div
|
|
|
v-for="item in 16"
|
|
|
@@ -39,12 +40,12 @@
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="noface" class="noface err">
|
|
|
- <img src="../../assets/img/close.png" @click="closeErr" alt="" />
|
|
|
- </div>
|
|
|
- <div v-if="badface" class="badface err">
|
|
|
- <img src="../../assets/img/close.png" @click="closeErr" alt="" />
|
|
|
- </div>
|
|
|
+ <!-- <div v-if="noface" class="noface err">
|
|
|
+ <img src="../../assets/img/close.png" @click="closeErr" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-if="badface" class="badface err">
|
|
|
+ <img src="../../assets/img/close.png" @click="closeErr" alt="" />
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -73,7 +74,7 @@ const noface = ref(false); //未检测到脸
|
|
|
const badface = ref(false); //未注册的脸
|
|
|
// 存储拍摄后的图片路径
|
|
|
const imageUrl = ref(null);
|
|
|
-const errNum = ref(0); //错误次数
|
|
|
+// const errNum = ref(0); //错误次数
|
|
|
const lose = ref(false); // 识别失败
|
|
|
|
|
|
const video = ref(null);
|
|
|
@@ -81,6 +82,8 @@ let mediaStreamTrack = null;
|
|
|
let trackerTask = null;
|
|
|
const screenshotCanvas = ref(null);
|
|
|
const uploadLock = ref(true); // 上传锁
|
|
|
+let backTimer = null; // 返回计时器
|
|
|
+const canUpload = ref(true); // 是否可以上传
|
|
|
let tracker;
|
|
|
// 检查摄像头并设置视频流
|
|
|
async function checkCamera() {
|
|
|
@@ -117,41 +120,41 @@ async function checkCamera() {
|
|
|
function shoot() {
|
|
|
// console.log(111);
|
|
|
// 上锁避免重复发送请求
|
|
|
- uploadLock.value = false;
|
|
|
- // 检查视频元素和页面容器是否存在
|
|
|
- if (!videoEl.value || !wrapper.value) return;
|
|
|
- takeOver.value = true;
|
|
|
+ // uploadLock.value = false;
|
|
|
+ // // 检查视频元素和页面容器是否存在
|
|
|
+ // if (!videoEl.value || !wrapper.value) return;
|
|
|
+ // takeOver.value = true;
|
|
|
first.value = false;
|
|
|
- // 创建一个画布元素，设置画布尺寸为视频流的尺寸
|
|
|
- const canvas = document.createElement("canvas");
|
|
|
- console.log(canvas, "canvas");
|
|
|
- canvas.width = videoEl.value.videoWidth;
|
|
|
- canvas.height = videoEl.value.videoHeight;
|
|
|
+ // // 创建一个画布元素，设置画布尺寸为视频流的尺寸
|
|
|
+ // const canvas = document.createElement("canvas");
|
|
|
+ // console.log(canvas, "canvas");
|
|
|
+ // canvas.width = videoEl.value.videoWidth;
|
|
|
+ // canvas.height = videoEl.value.videoHeight;
|
|
|
|
|
|
- // 获取画布上下文对象
|
|
|
- const ctx = canvas.getContext("2d");
|
|
|
+ // // 获取画布上下文对象
|
|
|
+ // const ctx = canvas.getContext("2d");
|
|
|
|
|
|
- // 绘制当前视频帧到画布上
|
|
|
- ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
|
|
|
- // console.log(222);
|
|
|
+ // // 绘制当前视频帧到画布上
|
|
|
+ // ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
|
|
|
+ // // console.log(222);
|
|
|
|
|
|
// 将画布内容转为 Base64 数据
|
|
|
const imageDataUrl = canvas.toDataURL("image/png");
|
|
|
// console.log(333);
|
|
|
|
|
|
- // 存储图片路径
|
|
|
- imageUrl.value = imageDataUrl;
|
|
|
- // console.log(imageDataUrl, "imageDataUrl");
|
|
|
+ // // 存储图片路径
|
|
|
+ // imageUrl.value = imageDataUrl;
|
|
|
+ // // console.log(imageDataUrl, "imageDataUrl");
|
|
|
|
|
|
- // 创建一个图片元素
|
|
|
- const imageElement = new Image();
|
|
|
- imageElement.style.borderRadius = "50%";
|
|
|
+ // // 创建一个图片元素
|
|
|
+ // const imageElement = new Image();
|
|
|
+ // imageElement.style.borderRadius = "50%";
|
|
|
|
|
|
- // 将 Base64 数据设置为图片的 src 属性
|
|
|
- imageElement.src = imageDataUrl;
|
|
|
+ // // 将 Base64 数据设置为图片的 src 属性
|
|
|
+ // imageElement.src = imageDataUrl;
|
|
|
|
|
|
- // 将图片元素添加到页面容器中
|
|
|
- wrapper.value.appendChild(imageElement);
|
|
|
+ // // 将图片元素添加到页面容器中
|
|
|
+ // wrapper.value.appendChild(imageElement);
|
|
|
// console.log(444);
|
|
|
timer = setInterval(() => {
|
|
|
if (loadingNum.value <= 16) {
|
|
|
@@ -170,28 +173,22 @@ function shoot() {
|
|
|
// }, 4000);
|
|
|
}
|
|
|
// 关闭错误提示
|
|
|
-const closeErr = () => {
|
|
|
- if (errNum.value >= 2) {
|
|
|
- router.push("/");
|
|
|
- }
|
|
|
- console.log(errNum.value, "errNum");
|
|
|
- noface.value = false;
|
|
|
- badface.value = false;
|
|
|
+const errfn = () => {
|
|
|
+ // console.log(errNum.value, "errNum");
|
|
|
loadingNum.value = ref(0);
|
|
|
- errNum.value += 1;
|
|
|
- lose.value = false;
|
|
|
+ // errNum.value += 1;
|
|
|
takeOver.value = false;
|
|
|
- first.value = true;
|
|
|
+ // first.value = true;
|
|
|
uploadLock.value = true;
|
|
|
- var box = document.querySelectorAll("img")[1];
|
|
|
- // console.log(box, "box");
|
|
|
+ // var box = document.querySelectorAll("img")[1];
|
|
|
+ // // console.log(box, "box");
|
|
|
|
|
|
- box.remove();
|
|
|
+ // box?.remove();
|
|
|
// console.log(mediaStreamTrack.srcObject, "mediaStreamTrack");
|
|
|
// console.log(trackerTask, "trackerTask");
|
|
|
// mediaStreamTrack.srcObject.getTracks()[0].stop();
|
|
|
- trackerTask.stop();
|
|
|
- checkCamera();
|
|
|
+ // trackerTask.stop();
|
|
|
+ // checkCamera();
|
|
|
init();
|
|
|
};
|
|
|
// 初始化 PAG
|
|
|
@@ -246,7 +243,7 @@ const successInit = () => {
|
|
|
|
|
|
// tracjking初始化
|
|
|
const init = () => {
|
|
|
- console.log("init");
|
|
|
+ // 识别失败一直识别 失败提示字体闪烁，30s未识别到人脸就返回主页
|
|
|
video.value = mediaStreamTrack = document.getElementById("video");
|
|
|
screenshotCanvas.value = document.getElementById("screenshotCanvas");
|
|
|
|
|
|
@@ -294,23 +291,34 @@ const init = () => {
|
|
|
//调接口把图片传到后端
|
|
|
const uploadImgFn = (imageDataUrl) => {
|
|
|
// 发送原生axios请求地址为192.168.101.13/face-login
|
|
|
- // console.log("imageDataUrl", imageDataUrl);
|
|
|
+ if(!canUpload.value) {
|
|
|
+ uploadImgFn()
|
|
|
+ return
|
|
|
+ };
|
|
|
+ canUpload.value = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ canUpload.value = true;
|
|
|
+ }, 500);
|
|
|
axios
|
|
|
.post("/dev-api/face-login-base64", {
|
|
|
img: imageDataUrl,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
- console.log(response.data);
|
|
|
+ // console.log(response.data);
|
|
|
if (response.data.code === 200) {
|
|
|
// 识别成功 进入扫描入口
|
|
|
clearInterval(timer);
|
|
|
+ clearTimeout(backTimer);
|
|
|
takeOver.value = false;
|
|
|
successInit();
|
|
|
} else {
|
|
|
- // 识别失败 失败3次返回主页
|
|
|
-
|
|
|
- badface.value = true;
|
|
|
+ // console.log("lose");
|
|
|
+ // 识别失败
|
|
|
+ // badface.value = true;
|
|
|
+ // lose.value = true;
|
|
|
+ // takeOver.value = true;
|
|
|
lose.value = true;
|
|
|
+ errfn();
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
@@ -346,6 +354,9 @@ onMounted(() => {
|
|
|
// }, 3000);
|
|
|
pagInit();
|
|
|
init();
|
|
|
+ backTimer = setTimeout(() => {
|
|
|
+ router.push("/");
|
|
|
+ }, 30000);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -451,4 +462,66 @@ onMounted(() => {
|
|
|
height: 450px;
|
|
|
}
|
|
|
}
|
|
|
+.loseFont {
|
|
|
+ animation: blink 2s linear infinite;
|
|
|
+ -webkit-animation: blink 2s linear infinite;
|
|
|
+ -moz-animation: blink 2s linear infinite;
|
|
|
+ -ms-animation: blink 2s linear infinite;
|
|
|
+ -o-animation: blink 2s linear infinite;
|
|
|
+}
|
|
|
+@keyframes blink {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes blink {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-moz-keyframes blink {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-ms-keyframes blink {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-o-keyframes blink {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
liuqiang