首页 发现 帮助
注册 登录
wukai
/
doc-scanner-ui
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

登录识别完成

liuqiang 1 年之前
父节点
7d8846a9c9
当前提交
6e40486637
共有 11 个文件被更改，包括 609 次插入 和 173 次删除
合并视图 显示文件统计
  1. 3 1
      .env.development
  2. 3 1
      .env.production
  3. 3 1
      .env.staging
  4. 2 2
      index.html
  5. 506 49
      package-lock.json
  6. 1 0
      package.json
  7. 二进制
      public/favicon.ico
  8. 0 1
      public/vite.svg
  9. 4 2
      src/components/TopLogo/TopLogo.vue
  10. 79 91
      src/views/SacnPage/SacnPage.vue
  11. 8 25
      vite.config.js

+ 3 - 1
.env.development
查看文件 

@@ -5,4 +5,6 @@ VITE_APP_TITLE = 聚合智慧文档
 
 VITE_APP_ENV = 'development'
 
 VITE_APP_ENV = 'development'
 
 
 
 # 聚合智慧文档/开发环境
 
 # 聚合智慧文档/开发环境
 
-VITE_APP_BASE_API = '/dev-api'
 
+VITE_APP_BASE_API = '/dev-api'
 
+# LOGO
 
+VITE_APP_LOGO = '/img/logo.png'

+ 3 - 1
.env.production
查看文件 

@@ -8,4 +8,6 @@ VITE_APP_ENV = 'production'
 
 VITE_APP_BASE_API = '/prod-api'
 
 VITE_APP_BASE_API = '/prod-api'
 
 
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 
-VITE_BUILD_COMPRESS = gzip
 
+VITE_BUILD_COMPRESS = gzip
 
+# LOGO
 
+VITE_APP_LOGO = '/img/logo.png'

+ 3 - 1
.env.staging
查看文件 

@@ -8,4 +8,6 @@ VITE_APP_ENV = 'staging'
 
 VITE_APP_BASE_API = '/stage-api'
 
 VITE_APP_BASE_API = '/stage-api'
 
 
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 
-VITE_BUILD_COMPRESS = gzip
 
+VITE_BUILD_COMPRESS = gzip
 
+# LOGO
 
+VITE_APP_LOGO = '/img/logo.png'

+ 2 - 2
index.html
查看文件 

@@ -2,9 +2,9 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+		<link rel="icon" href="/favicon.ico">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + Vue</title>
 
+    <title><%= title %></title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

文件差异内容过多而无法显示
+ 506 - 49
package-lock.json


+ 1 - 0
package.json
查看文件 

@@ -13,6 +13,7 @@
 
     "libpag": "^4.2.84",
 
     "libpag": "^4.2.84",
 
     "rollup-plugin-copy": "^3.5.0",
 
     "rollup-plugin-copy": "^3.5.0",
 
     "tracking": "^1.1.3",
 
     "tracking": "^1.1.3",
 
+    "vite-plugin-html": "^3.2.2",
 
     "vue": "^3.4.21",
 
     "vue": "^3.4.21",
 
     "vue-router": "^4.3.0"
 
     "vue-router": "^4.3.0"
 
   },
 
   },

二进制
public/favicon.ico
查看文件


+ 0 - 1
public/vite.svg
查看文件 

@@ -1 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

+ 4 - 2
src/components/TopLogo/TopLogo.vue
查看文件 

@@ -1,12 +1,14 @@
 
 <template>
 
 <template>
 
     <div class="main" @click="toIndex">
 
     <div class="main" @click="toIndex">
 
-        <img src="/img/logo.png" alt="">
 
-        <span>聚合智慧文档</span>
 
+        <img :src="LOGO" alt="">
 
+        <span>{{ TITLE }}</span>
 
     </div>
 
     </div>
 
 </template>
 
 </template>
 
 
 
 <script setup>
 
 <script setup>
 
 import { useRouter } from "vue-router";
 
 import { useRouter } from "vue-router";
 
+const LOGO = import.meta.env.VITE_APP_LOGO;
 
+const TITLE = import.meta.env.VITE_APP_TITLE;
 
 const router = useRouter();
 
 const router = useRouter();
 
 const toIndex = ()=>{
 
 const toIndex = ()=>{
 
     router.push('/')
 
     router.push('/')

+ 79 - 91
src/views/SacnPage/SacnPage.vue
查看文件 

@@ -13,13 +13,22 @@
 
             v-show="!takeOver"
 
             v-show="!takeOver"
 
             id="video"
 
             id="video"
 
             ref="videoEl"
 
             ref="videoEl"
 
+            style="width: 500px; height: 500px"
 
+            width="500"
 
+            height="500"
 
             class="camera"
 
             class="camera"
 
             preload
 
             preload
 
             autoplay
 
             autoplay
 
             loop
 
             loop
 
             muted
 
             muted
 
           />
 
           />
 
-          <canvas id="canvas" width="320" height="240"></canvas>
 
+          <canvas
 
+            v-show="false"
 
+            id="canvas"
 
+            style="width: 100%; height: 100%"
 
+            width="280"
 
+            height="280"
 
+          ></canvas>
 
           <!-- 识别成功的动图 -->
 
           <!-- 识别成功的动图 -->
 
           <canvas
 
           <canvas
 
             v-if="!takeOver && !first"
 
             v-if="!takeOver && !first"
 
@@ -51,7 +60,7 @@
 
 
 
 <script setup>
 
 <script setup>
 
 import TopLogoVue from "../../components/TopLogo/TopLogo.vue";
 
 import TopLogoVue from "../../components/TopLogo/TopLogo.vue";
 
-import { ref, onMounted } from "vue";
 
+import { ref, onMounted ,onBeforeUnmount} from "vue";
 
 import { PAGInit } from "libpag";
 
 import { PAGInit } from "libpag";
 
 import axios from "axios";
 
 import axios from "axios";
 
 import { useRouter } from "vue-router";
 
 import { useRouter } from "vue-router";
 
@@ -86,37 +95,43 @@ let backTimer = null; // 返回计时器
 
 const canUpload = ref(true); // 是否可以上传
 
 const canUpload = ref(true); // 是否可以上传
 
 let tracker;
 
 let tracker;
 
 
 
-// ------------------- NVR 相关配置 ------------------- 
+// ------------------- NVR 相关配置 -------------------
 
 const NVRInit = () => {
 
 const NVRInit = () => {
 
   let options = {
 
   let options = {
 
     wsURL: "ws://" + "192.168.101.108" + ":" + "80" + "/rtspoverwebsocket",
 
     wsURL: "ws://" + "192.168.101.108" + ":" + "80" + "/rtspoverwebsocket",
 
     rtspURL:
 
     rtspURL:
 
-    "rtsp://" +
 
-    "192.168.101.108"+":" +
 
-    "80" +
 
-    "/cam/realmonitor?channel=" +
 
-    1 +
 
-    "&subtype=" +
 
-    0 +
 
-    "&proto=Private3",
 
+      "rtsp://" +
 
+      "192.168.101.108" +
 
+      ":" +
 
+      "80" +
 
+      "/cam/realmonitor?channel=" +
 
+      1 +
 
+      "&subtype=" +
 
+      0 +
 
+      "&proto=Private3",
 
     username: "admin",
 
     username: "admin",
 
     password: "admin123",
 
     password: "admin123",
 
   };
 
   };
 
   let videoObj = document.getElementById("video");
 
   let videoObj = document.getElementById("video");
 
   let canvasObj = document.getElementById("canvas");
 
   let canvasObj = document.getElementById("canvas");
 
   const player = new PlayerControl(options);
 
   const player = new PlayerControl(options);
 
-  console.log(player, "player");
 
+  // console.log(player, "player");
 
   player.on("WorkerReady", function () {
 
   player.on("WorkerReady", function () {
 
     //当文件准备完成后，开始拉流。
 
     //当文件准备完成后，开始拉流。
 
     player.connect();
 
     player.connect();
 
+    setTimeout(() => {
 
+      init();
 
+    }, 1000);
 
   });
 
   });
 
-  player.init(videoObj, canvasObj); // 初始化播放器
 
+  // player.on("DecodeStart", (rs) => {
 
+  //   console.log(rs, "rs");
 
+  // });
 
+  player.init(canvasObj, videoObj); // 初始化播放器
 
   // RPC.login('admin', 'admin123', false).then((res)=>{
 
   // RPC.login('admin', 'admin123', false).then((res)=>{
 
   //   console.log(res,'res');
 
   //   console.log(res,'res');
 
   // })
 
   // })
 
 };
 
 };
 
 
 
-
 
 //-----------------------------------------------
 
 //-----------------------------------------------
 
 // 检查摄像头并设置视频流
 
 // 检查摄像头并设置视频流
 
 // async function checkCamera() {
 
 // async function checkCamera() {
 
@@ -151,44 +166,22 @@ const NVRInit = () => {
 
 
 
 // 拍摄函数，截取摄像头当前帧并显示在页面上
 
 // 拍摄函数，截取摄像头当前帧并显示在页面上
 
 function shoot() {
 
 function shoot() {
 
-  // console.log(111);
 
-  // 上锁避免重复发送请求
 
-  // uploadLock.value = false;
 
-  // // 检查视频元素和页面容器是否存在
 
-  // if (!videoEl.value || !wrapper.value) return;
 
-  // takeOver.value = true;
 
+  // console.log('shoot',shoot);
 
+  const canvas = document.createElement("canvas");
 
   first.value = false;
 
   first.value = false;
 
-  // // 创建一个画布元素，设置画布尺寸为视频流的尺寸
 
-  // const canvas = document.createElement("canvas");
 
-  // console.log(canvas, "canvas");
 
-  // canvas.width = videoEl.value.videoWidth;
 
-  // canvas.height = videoEl.value.videoHeight;
 
+   // console.log(canvas, "canvas");
 
+  canvas.width = videoEl.value.videoWidth;
 
+  canvas.height = videoEl.value.videoHeight;
 
 
 
   // // 获取画布上下文对象
 
   // // 获取画布上下文对象
 
-  // const ctx = canvas.getContext("2d");
 
+  const ctx = canvas.getContext("2d");
 
 
 
   // // 绘制当前视频帧到画布上
 
   // // 绘制当前视频帧到画布上
 
-  // ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
 
-  // // console.log(222);
 
-
 
+  ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
 
   // 将画布内容转为 Base64 数据
 
   // 将画布内容转为 Base64 数据
 
   const imageDataUrl = canvas.toDataURL("image/png");
 
   const imageDataUrl = canvas.toDataURL("image/png");
 
-  // console.log(333);
 
-
 
-  // // 存储图片路径
 
-  // imageUrl.value = imageDataUrl;
 
-  // // console.log(imageDataUrl, "imageDataUrl");
 
-
 
-  // // 创建一个图片元素
 
-  // const imageElement = new Image();
 
-  // imageElement.style.borderRadius = "50%";
 
-
 
-  // // 将 Base64 数据设置为图片的 src 属性
 
-  // imageElement.src = imageDataUrl;
 
+  // console.log('imageDataUrl:',imageDataUrl);
 
 
 
-  // // 将图片元素添加到页面容器中
 
-  // wrapper.value.appendChild(imageElement);
 
-  // console.log(444);
 
   timer = setInterval(() => {
 
   timer = setInterval(() => {
 
     if (loadingNum.value <= 16) {
 
     if (loadingNum.value <= 16) {
 
       loadingNum.value += 1;
 
       loadingNum.value += 1;
 
@@ -198,31 +191,13 @@ function shoot() {
 
     // console.log(loadingNum.value, "loadingNum");
 
     // console.log(loadingNum.value, "loadingNum");
 
   }, 500);
 
   }, 500);
 
   uploadImgFn(imageDataUrl);
 
   uploadImgFn(imageDataUrl);
 
-  // setTimeout(() => {
 
-  //   clearInterval(timer);
 
-  //   takeOver.value = false;
 
-  //   noface.value = true;
 
-  //   successInit();
 
-  // }, 4000);
 
 }
 
 }
 
-// 关闭错误提示
 
+// 未识别到人脸，重新识别
 
 const errfn = () => {
 
 const errfn = () => {
 
   // console.log(errNum.value, "errNum");
 
   // console.log(errNum.value, "errNum");
 
   loadingNum.value = ref(0);
 
   loadingNum.value = ref(0);
 
-  // errNum.value += 1;
 
-  takeOver.value = false;
 
-  // first.value = true;
 
   uploadLock.value = true;
 
   uploadLock.value = true;
 
-  // var box = document.querySelectorAll("img")[1];
 
-  // // console.log(box, "box");
 
-
 
-  // box?.remove();
 
-  // console.log(mediaStreamTrack.srcObject, "mediaStreamTrack");
 
-  // console.log(trackerTask, "trackerTask");
 
-  // mediaStreamTrack.srcObject.getTracks()[0].stop();
 
-  // trackerTask.stop();
 
-  // checkCamera();
 
-  init();
 
+  // init();
 
 };
 
 };
 
 // 初始化 PAG
 
 // 初始化 PAG
 
 const pagInit = () => {
 
 const pagInit = () => {
 
@@ -277,8 +252,10 @@ const successInit = () => {
 
 // tracjking初始化
 
 // tracjking初始化
 
 const init = () => {
 
 const init = () => {
 
   // 识别失败一直识别 失败提示字体闪烁，30s未识别到人脸就返回主页
 
   // 识别失败一直识别 失败提示字体闪烁，30s未识别到人脸就返回主页
 
-  video.value = mediaStreamTrack = document.getElementById("video");
 
-  screenshotCanvas.value = document.getElementById("screenshotCanvas");
 
+  if(!video.value || !screenshotCanvas.value){
 
+    video.value = mediaStreamTrack = document.getElementById("video");
 
+    screenshotCanvas.value = document.getElementById("screenshotCanvas");
 
+  }
 
 
 
   let canvas = document.getElementById("canvas");
 
   let canvas = document.getElementById("canvas");
 
   let context = canvas.getContext("2d");
 
   let context = canvas.getContext("2d");
 
@@ -292,25 +269,18 @@ const init = () => {
 
     tracker.setEdgesDensity(0.1);
 
     tracker.setEdgesDensity(0.1);
 
     // console.log("tracker", tracker);
 
     // console.log("tracker", tracker);
 
     trackerTask = window.tracking.track("#video", tracker, {
 
     trackerTask = window.tracking.track("#video", tracker, {
 
-      camera: true,
 
+      camera: false,
 
     });
 
     });
 
   }
 
   }
 
-  // // 固定写法
 
-  // let tracker = new window.tracking.ObjectTracker("face");
 
-  // // console.log(tracker, "tracker");
 
-  // tracker.setInitialScale(4);
 
-  // tracker.setStepSize(2);
 
-  // tracker.setEdgesDensity(0.1);
 
-  // // console.log("tracker", tracker);
 
-  // trackerTask = window.tracking.track("#video", tracker, {
 
-  //   camera: true,
 
-  // });
 
-  // console.log(666);
 
   tracker.on("track", function (event) {
 
   tracker.on("track", function (event) {
 
+    // console.log("track");
 
     // 检测出人脸 绘画人脸位置
 
     // 检测出人脸 绘画人脸位置
 
-    setTimeout(() => {
 
-      context.clearRect(0, 0, canvas.width, canvas.height);
 
-      // console.log(666);
 
+    // setTimeout(() => {
 
+    // console.log("event", event);
 
+    context.clearRect(0, 0, canvas.width, canvas.height);
 
+    // console.log(666);
 
+    if (event.data.length) {
 
+      // 区域内有人脸
 
       event.data.forEach(function (rect) {
 
       event.data.forEach(function (rect) {
 
         context.strokeStyle = "#0764B7";
 
         context.strokeStyle = "#0764B7";
 
         context.strokeRect(rect.x, rect.y, rect.width, rect.height);
 
         context.strokeRect(rect.x, rect.y, rect.width, rect.height);
 
@@ -318,7 +288,10 @@ const init = () => {
 
         // 上传图片
 
         // 上传图片
 
         uploadLock.value && shoot();
 
         uploadLock.value && shoot();
 
       });
 
       });
 
-    }, 1000);
 
+    } else {
 
+      //没有人脸重新开始识别
 
+    }
 
+    // }, 1000);
 
   });
 
   });
 
 };
 
 };
 
 //调接口把图片传到后端
 
 //调接口把图片传到后端
 
@@ -339,9 +312,11 @@ const uploadImgFn = (imageDataUrl) => {
 
       // console.log(response.data);
 
       // console.log(response.data);
 
       if (response.data.code === 200) {
 
       if (response.data.code === 200) {
 
         // 识别成功 进入扫描入口
 
         // 识别成功 进入扫描入口
 
-        clearInterval(timer);
 
+        clearInterval(timer);  // 清除定时器
 
         clearTimeout(backTimer);
 
         clearTimeout(backTimer);
 
+        canUpload.value = false; ///不再掉接口
 
         takeOver.value = false;
 
         takeOver.value = false;
 
+        lose.value = false;
 
         successInit();
 
         successInit();
 
       } else {
 
       } else {
 
         // console.log("lose");
 
         // console.log("lose");
 
@@ -360,17 +335,16 @@ const uploadImgFn = (imageDataUrl) => {
 
 
 
 // 在组件挂载后执行检查摄像头的操作
 
 // 在组件挂载后执行检查摄像头的操作
 
 onMounted(() => {
 
 onMounted(() => {
 
-  // checkCamera();
 
-  // setTimeout(() => {
 
-  //   shoot();
 
-  // }, 3000);
 
   pagInit();
 
   pagInit();
 
-  init();
 
   NVRInit();
 
   NVRInit();
 
-  backTimer = setTimeout(() => {
 
-    router.push("/");
 
-  }, 30000);
 
+  // backTimer = setTimeout(() => {
 
+  //   router.push("/");
 
+  // }, 30000);
 
 });
 
 });
 
+onBeforeUnmount(()=>{
 
+  clearInterval()
 
+  clearTimeout()
 
+})
 
 </script>
 
 </script>
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
@@ -417,6 +391,7 @@ onMounted(() => {
 
     width: 280px;
 
     width: 280px;
 
     height: 280px;
 
     height: 280px;
 
     border-radius: 50%;
 
     border-radius: 50%;
 
+    overflow: hidden;
 
   }
 
   }
 
   .bgcBox {
 
   .bgcBox {
 
     width: 450px;
 
     width: 450px;
 
@@ -482,6 +457,19 @@ onMounted(() => {
 
   -ms-animation: blink 2s linear infinite;
 
   -ms-animation: blink 2s linear infinite;
 
   -o-animation: blink 2s linear infinite;
 
   -o-animation: blink 2s linear infinite;
 
 }
 
 }
 
+#video {
 
+  width: 500px;
 
+  height: 500px;
 
+  border-radius: 50%;
 
+  position: absolute;
 
+  left: -110px;
 
+  top: -110px;
 
+}
 
+#canvas {
 
+  width: 280px;
 
+  height: 280px;
 
+  border-radius: 50%;
 
+}
 
 @keyframes blink {
 
 @keyframes blink {
 
   0% {
 
   0% {
 
     opacity: 1;
 
     opacity: 1;

+ 8 - 25
vite.config.js
查看文件 

@@ -3,31 +3,7 @@ import vue from '@vitejs/plugin-vue'
 
 import path from 'path'
 
 import path from 'path'
 
 
 
 import copy from 'rollup-plugin-copy'
 
 import copy from 'rollup-plugin-copy'
 
-// import createVitePlugins from './vite/plugins'
 
-
 
-// https://vitejs.dev/config/
 
-// export default defineConfig({
 
-//   plugins: [
 
-//     vue(),
 
-//     copy({
 
-//       targets: [
 
-//         { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : 'public/' },
 
-//       ],
 
-//       hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
 
-//     })
 
-//   ],
 
-//   resolve: {
 
-//     // https://cn.vitejs.dev/config/#resolve-alias
 
-//     alias: {
 
-//       // 设置路径
 
-//       '~': path.resolve(__dirname, './'),
 
-//       // 设置别名
 
-//       '@': path.resolve(__dirname, './src')
 
-//     },
 
-//     // https://cn.vitejs.dev/config/#resolve-extensions
 
-//     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
 
-//   },
 
-// })
 
+import { createHtmlPlugin } from 'vite-plugin-html';
 
 export default defineConfig(({
 
 export default defineConfig(({
 
   mode,
 
   mode,
 
   command
 
   command
 
@@ -48,6 +24,13 @@ export default defineConfig(({
 
           { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : 'public/' },
 
           { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : 'public/' },
 
         ],
 
         ],
 
         hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
 
         hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
 
+      }),
 
+      createHtmlPlugin({
 
+        inject: {
 
+          data: {
 
+            title: env.VITE_APP_TITLE || '聚合智慧文档',
 
+          },
 
+        },
 
       })
 
       })
 
     ],
 
     ],
 
     resolve: {
 
     resolve: {

部分文件因为文件数量过多而无法显示