添加刷脸识别

chenyincheng

2022-12-28 995f645c1f9d7c9bdc7462806c2506820397cf65

 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>