From 995f645c1f9d7c9bdc7462806c2506820397cf65 Mon Sep 17 00:00:00 2001
From: chenyincheng <501753378@qq.com>
Date: 星期三, 28 十二月 2022 21:12:02 +0800
Subject: [PATCH] 添加刷脸识别
---
src/views/login/index.vue | 106 +++++++++++++++++++++++++++-------------------------
1 files changed, 55 insertions(+), 51 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 28a1f84..03ed1c8 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,27 +1,28 @@
<template>
- <teleport to="body">
- <div class="mask">
- <el-header class="go">
- <div>
- 请把头移动到摄像头能拍到的位置，不要动 ！
- </div>
- <div class="box">
- <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
- <canvas id="canvasCamera" class="canvas" :width="300" :height="300"></canvas>
- </div>
- <div class="footer">
- <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
- <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
- <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
- <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
- </div>
- </el-header>
+ <div class="mask">
+ <div class="go">
+ <div class="titleH" style="color: white;">
+ <h3>请把头移动到摄像头能拍到的位置，不要动 ！</h3>
+ </div>
+ <div class="box">
+ <video id="videoCamera" class="canvas1" :width="videoWidth" :height="videoHeight" autoPlay></video>
+ <br/>
+ <canvas id="canvasCamera" class="canvas2" :width="300" :height="300"></canvas>
+ </div>
+ <!-- <div class="footer">
+ <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
+ <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
+ <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
+ <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
+ </div> -->
</div>
- </teleport>
- </template>
- <script lang="ts" setup>
- import { ref, reactive, inject, toRefs, nextTick } from "vue";
+ </div>
+</template>
+<script lang="ts" setup>
+ import { ref, reactive, onMounted, toRefs, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
+ import {sundSocket} from "@/samples/socketClient"
+ import { confingInfoStore } from '@/stores/StoresConfing'
const loading = ref(false);
const os = ref(false); //控制摄像头开关
let thisVideo = ref("");
@@ -89,6 +90,8 @@
thisVideo.src = window.URL.createObjectURL(stream);
}
thisVideo.onloadedmetadata = function (e) {
+ console.log('摄像头打开了')
+ SendTime()
thisVideo.play();
};
})
@@ -100,14 +103,15 @@
//绘制图片
const drawImage = () => {
- getCompetence();
thisCancas = document.getElementById("canvasCamera");
thisContext = thisCancas.getContext("2d");
thisVideo = document.getElementById("videoCamera");
thisContext.drawImage(thisVideo, 0, 0, 300, 300);
//获取图片地址
queryParams.imgSrc = thisCancas.toDataURL('image/png');
- console.log(queryParams.imgSrc);
+ // console.log(queryParams.imgSrc);
+ const str=`<STX>{"photo":"${queryParams.imgSrc}"}<ETX>`
+ sundSocket(str)
};
//清空画布
@@ -123,6 +127,9 @@
queryParams.imgSrc = "";
clearCanvas("canvasCamera");
};
+ const SendTime=()=>{
+ setInterval(drawImage,confingInfoStore().confingInfo.faceRecogDetectInterval*1000)
+ }
//关闭摄像头
const stopNavigator = () => {
@@ -134,52 +141,49 @@
ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
}
};
+ onMounted(()=>{
+ console.log('页面初始化读取配置文件',confingInfoStore().confingInfo)
+ getCompetence()
+ })
defineExpose({
stopNavigator,
});
- </script>
- <style scoped>
+</script>
+<style scoped>
.footer {
- width: 959px;
height: 50px;
background-color: white;
justify-content: space-between;
float: left;
- margin-top: 217px;
z-index: 1999;
}
.mask {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
- }
- .closeBtn {
- float: right;
- }
- .box {
- width: 959px;
- height: 700px;
- margin-top: 10px;
- background-color: rgba(0, 0, 0, 0.5);
- /* float: left !important; */
- padding-top: 100px;
text-align: center;
}
.go {
- width: 1000px;
- height: 800px;
- background-color: white;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
+ width: 100%;
+ background-color:#409EFF;
+ text-align: center;
display: inline-block;
}
+ .box {
+ width: 100%;
+ text-align: center;
+
+ background-color: #d9ecff;
+ }
+ .canvas1{
+ margin-top: 100px;
+ border: 2px solid #409EFF;
+ border-radius: 10%;
+
+ }
+ .canvas2{
+ visibility:hidden;
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.8.0