From a814f6eb98bb1f38a80415abefd61df71a579a8a Mon Sep 17 00:00:00 2001
From: chenyincheng <501753378@qq.com>
Date: 星期三, 12 四月 2023 09:30:43 +0800
Subject: [PATCH] 34
---
src/views/login/index.vue | 304 +++++++++++++++++++++-----------------------------
1 files changed, 129 insertions(+), 175 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 28a1f84..ff1f3c4 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,185 +1,139 @@
<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>
- </teleport>
- </template>
- <script lang="ts" setup>
- import { ref, reactive, inject, toRefs, nextTick } from "vue";
- import { ElMessage, ElMessageBox } from "element-plus";
- const loading = ref(false);
- const os = ref(false); //控制摄像头开关
- let thisVideo = ref("");
- let thisContext = ref("");
- let thisCancas = ref("");
- const videoWidth = ref(500);
- const videoHeight = ref(500);
- const postOptions = ref([]);
- const certCtl = ref("");
- const mask = ref(true);
-
- //查询参数
- const queryParams = reactive({
- pageNum: 1,
- pageSize: 10,
- imgSrc: undefined,
- });
- const closedPhono = ref(null);
-
- const emit = defineEmits(["closed"]);
- const props = defineProps({
- visible: { type: Boolean },
- });
- const { visible } = toRefs(props);
- const handleChange = (val) => {
- console.log(visible);
- };
-
- //调用摄像头权限
- const getCompetence = () => {
- nextTick(() => {
- os.value = false;
- thisCancas = document.getElementById("canvasCamera");
- thisContext = thisCancas.getContext("2d");
- thisVideo = document.getElementById("videoCamera");
- closedPhono.value = thisVideo;
- if (navigator.mediaDevices === undefined) {
- navigator.mediaDevices = {};
- }
-
- if (navigator.mediaDevices.getUserMedia === undefined) {
- navigator.mediaDevices.getUserMedia = function (constraints) {
- // 首先获取现存的getUserMedia(如果存在)
- let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
- if (!getUserMedia) {
- return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
- }
- return new Promise(function (resolve, reject) {
- getUserMedia.call(navigator, constraints, resolve, reject);
- });
- };
- }
-
- const constraints = {
- audio: false,
- video: { width: videoWidth.value, height: videoHeight.value, transform: "scaleX(-1)" },
- };
-
- navigator.mediaDevices
- .getUserMedia(constraints)
- .then(function (stream) {
- if ("srcObject" in thisVideo) {
- thisVideo.srcObject = stream;
- } else {
- thisVideo.src = window.URL.createObjectURL(stream);
- }
- thisVideo.onloadedmetadata = function (e) {
- thisVideo.play();
- };
- })
- .catch((err) => {
- ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
- });
- });
- };
-
- //绘制图片
- 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);
- };
-
- //清空画布
- const clearCanvas = (id) => {
- let c = document.getElementById(id);
- let cxt = c.getContext("2d");
- cxt.clearRect(0, 0, 500, 500);
-
- };
-
- //重置画布
- const resetCanvas = () => {
- queryParams.imgSrc = "";
- clearCanvas("canvasCamera");
- };
-
- //关闭摄像头
- const stopNavigator = () => {
- // thisVideo = document.getElementById("videoCamera");
- if (closedPhono.value && closedPhono.value !== null) {
- thisVideo.srcObject.getTracks()[0].stop();
- os.value = true;
- } else {
- ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
+ <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());
}
- };
- defineExpose({
- stopNavigator,
- });
- </script>
- <style scoped>
- .footer {
- width: 959px;
- height: 50px;
- background-color: white;
- justify-content: space-between;
- float: left;
- margin-top: 217px;
- z-index: 1999;
}
+});
+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)
-
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 999;
+ }else{
+ console.log('关闭人脸识别')
+
}
- .closeBtn {
- float: right;
+
+
+});
+</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;
+ }
}
- .box {
- width: 959px;
- height: 700px;
- margin-top: 10px;
- background-color: rgba(0, 0, 0, 0.5);
- /* float: left !important; */
- padding-top: 100px;
+ .status {
+ //margin-top: 100px;
text-align: center;
}
- .go {
- width: 1000px;
- height: 800px;
- background-color: white;
+ .img_bg_camera{
position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- display: inline-block;
+ top: -500px;
+
+ z-index: -999;
}
-
- </style>
\ No newline at end of file
+}
+</style>
+
--
Gitblit v1.8.0