<template>
|
<div class="wrapp">
|
<div class="inpu">
|
<el-input v-model="inputCode" ref="inputRef" id="inputCode" class="inputCode" @change="inputChabge"
|
placeholder="请输入患者卡号或扫描条码" />
|
</div>
|
<div
|
class="status"
|
:style="{ color: msg === '检测到人脸' ? 'green' : 'red' }">
|
{{ msg }}
|
</div>
|
<div class="rWrapp">
|
<video id="myVideo" preload="preload" autoplay loop muted />
|
<canvas ref="myCanvas" id="myCanvas" class="myCanvas" width="200" height="200" ></canvas>
|
</div>
|
<div v-if="imgSrc" class="img_bg_camera">
|
<p>效果预览</p>
|
<img :src="imgSrc" class="tx_img" />
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { onMounted, ref } from "vue";
|
import {faceShibie,base64toFile} from '@/samples/faceApi'
|
import { sendPationCodeApi } from '../../samples/httpApi'
|
import { confingInfoStore } from "@/stores/StoresConfing";
|
|
const msg = ref<string>("没识别到人脸...");
|
|
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');
|
// 转文件
|
base64toFile(imgSrc)
|
setTimeout(() => {
|
console.log('监测到人脸后1s')
|
trackerTask.run();
|
}, 3000);
|
// @ts-ignore
|
if (typeof window.stream === "object") {
|
myVideo.srcObject = null;
|
// @ts-ignore
|
window.stream.getTracks().forEach((track) => track.stop());
|
}
|
}
|
});
|
const inputChabge = () => {
|
sendPationCodeApi(inputCode.value)
|
setTimeout(function () {
|
inputCode.value = ''
|
}, 1000)
|
}
|
onMounted(() => {
|
// 触发人脸检查器
|
console.log('人脸识别初始化')
|
const isUseFaceRecogService = confingInfoStore().confingInfo.isUseFaceRecogService
|
console.log('人脸识别',isUseFaceRecogService)
|
setInterval(function () {
|
inputRef.value.focus();
|
}, 1000)
|
if (isUseFaceRecogService) {
|
console.log('开启人脸识别初始化')
|
setTimeout(()=>{
|
trackerTask = tracking.track("#myVideo", myTracker, { camera: true });
|
},2000)
|
|
}else{
|
console.log('关闭人脸识别')
|
|
}
|
|
|
});
|
</script>
|
<style lang="less" scoped>
|
.wrapp {
|
height: 100%;
|
background-size: 100% 100%;
|
padding-top: 10px;
|
.rWrapp {
|
width: 500px;
|
height: 500px;
|
margin: auto;
|
// margin-top: 30px;
|
position: relative;
|
.myCanvas {
|
position: absolute;
|
top: 0;
|
left: 0;
|
border-radius: 50%;
|
width: 100%;
|
height: 100%;
|
}
|
#myVideo {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
object-fit: cover;
|
}
|
}
|
.status {
|
//margin-top: 100px;
|
text-align: center;
|
}
|
.img_bg_camera{
|
position: absolute;
|
top: -500px;
|
|
z-index: -999;
|
}
|
}
|
</style>
|
