增加通讯

chenyc

2023-11-14 7394e5e60ec25ede11d1ef88358454da8f9c7390

 src/views/login/index.vue

New file
@@ -0,0 +1,75 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import {base64toFile} from '@/samples/faceApi'
import { formatDate } from "@/utils/formatTime";
import { confingInfoStore } from "@/stores/StoresConfing";

const msg = ref<string>("没识别到人脸...");
const dialogVisible=ref(true)
const date=ref('')
let trackerTask: any = null;
const inputCode=ref('')
const inputRef = ref()
// 标识用的画布
const myCanvas = ref<HTMLCanvasElement | null>(null);
let imgSrc:'';
// 实例人脸检查器
const myTracker: any = new tracking.ObjectTracker("face");
myTracker.setInitialScale(4);
myTracker.setStepSize(2);
myTracker.setEdgesDensity(0.1);
// 监听人脸检查器
myTracker.on("track", (event: tracking.TrackEvent) => {
  const context = myCanvas.value?.getContext("2d") as CanvasRenderingContext2D;
  if (myCanvas.value) {
    context.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);
  }
  if (event.data.length === 0) {
    msg.value = "没识别到人脸...";
  } else if(event.data.length === 1) {
    trackerTask.stop();
    msg.value = "检测到人脸";
    const myCanvas = document.getElementById("myCanvas");// 
    const thisContext = myCanvas?.getContext("2d");
    const myVideo = document.querySelector("#myVideo") as HTMLVideoElement;
    thisContext.drawImage(myVideo, 0,0, 250, 200);
    imgSrc = myCanvas?.toDataURL('image/png');
    // 转文件
    // 识别框显示才能到传阿里云识别
    if(dialogVisible.value){
      base64toFile(imgSrc)
    }
    setTimeout(() => {
      console.log('监测到人脸后3s')
      trackerTask.run();
    }, 3000);
    // @ts-ignore
    if (typeof window.stream === "object") {
      myVideo.srcObject = null;
      // @ts-ignore
      window.stream.getTracks().forEach((track) => track.stop());
    }
  }
});
onMounted(() => {
  // 触发人脸检查器
  console.log('人脸识别初始化')
  const  isUseFaceRecogService = confingInfoStore().confingInfo.isUseFaceRecogService
  console.log('人脸识别',isUseFaceRecogService)
  setInterval(function () {
    date.value= formatDate(new Date(),'YYYY-mm-dd HH:MM')
  }, 1000)
  if (isUseFaceRecogService) {
    console.log('开启人脸识别初始化')
    setTimeout(()=>{
      trackerTask = tracking.track("#myVideo", myTracker, { camera: true });
    },2000)
   
  }else{
    console.log('关闭人脸识别')
    
  }
 
 
});
</script>