<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>
|
