function

src/components/function.vue

@@ -1,11 +1,19 @@
 <template>
   <div style="width: 100%; height: 100%">
+    <h1>{{ isdetected }}</h1>
     <div class="img">
       <div class="controlZ">
         <div id="screan" ref="dv">
           <img :src="img[0]" alt v-show="!isCamera" />
           <!--图片展示-->
-          <video ref="video" width="130" height="130" autoplay v-show="isCamera"></video>
+          <video
+            ref="video"
+            id="video_cam"
+            width="180"
+            height="180"
+            autoplay
+            v-show="isCamera"
+          ></video>
         </div>
         <div id="tou" ref="dv1">
           <img :src="img[2]" alt />
@@ -21,20 +29,51 @@
       <div class="cameraZ">
         <!--开启摄像头-->
         <div class="cameraBtn">
-          <el-button size="mini" type="primary" @click="callCamera" v-if="!isCamera">开启摄像头</el-button>
-          <el-button size="mini" type="primary" @click="closeCamera" v-else>关闭摄像头</el-button>
-          <el-button size="mini" type="primary" @click="photograph" v-if="isCamera">确认保存</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="callCamera"
+            v-if="!isCamera"
+            >开启摄像头</el-button
+          >
+          <el-button size="mini" type="primary" @click="closeCamera" v-else
+            >关闭摄像头</el-button
+          >
+          <el-button
+            size="mini"
+            type="primary"
+            @click="photograph"
+            v-if="isCamera"
+            >确认保存</el-button
+          >
         </div>
         <!--确认-->
         <div>
           <!--canvas截取流-->
-          <canvas ref="canvas" width="300" height="240" v-if="isCamera"></canvas>
+          <canvas
+            ref="canvas"
+            width="300"
+            height="240"
+            v-if="isCamera"
+          ></canvas>
+        </div>
+        <div>
+          <!--canvas截取流-->
+          <canvas
+            ref="canvasDOM"
+            width="300"
+            height="240"
+            v-show="isCamera"
+          ></canvas>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import tracking from "@/assets/js/tracking-min.js";
+import "@/assets/js/face-min.js";
+
 export default {
   data() {
     return {
@@ -43,9 +82,13 @@ export default {
         require("../assets/img/screan.png"),
         require("../assets/img/ai.png"),
         require("../assets/img/tou.png"),
-        require("../assets/img/police.png")
+        require("../assets/img/police.png"),
       ],
-      isCamera: false
+      isCamera: false,
+      count: 0,
+      isdetected: "请您保持脸部在画面中央",
+      videoEl: {},
+      canvasEL: {},
     };
   },
   methods: {
@@ -55,16 +98,50 @@ export default {
       // H5调用电脑摄像头API
       navigator.mediaDevices
         .getUserMedia({
-          video: true
+          video: true,
         })
-        .then(success => {
+        .then((success) => {
           _this.isCamera = true;
           // 摄像头开启成功
           _this.$refs["video"].srcObject = success;
           // 实时拍照效果
           _this.$refs["video"].play();
+
+          const video = this.videoEl;
+          const canvas = this.canvasEL;
+          const canvasContext = canvas.getContext("2d");
+          let tracker = new window.tracking.ObjectTracker("face");
+
+          // video.pause();
+          // video.src = "";
+          tracker.setInitialScale(4);
+          tracker.setStepSize(2);
+          tracker.setEdgesDensity(0.1);
+          window.tracking.track("#video_cam", tracker, { camera: true });
+          tracker.on("track", function (event) {
+            const { autoCaptureTrackTraking } = _this;
+            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+            event.data.forEach(function ({ x, y, width, height }) {
+              canvasContext.strokeStyle = "#a64ceb";
+              canvasContext.strokeRect(x, y, width, height);
+              canvasContext.font = "11px Helvetica";
+              canvasContext.fillStyle = "#fff";
+            });
+
+            if (!(event.data.length == 0) && _this.count <= 10) {
+              if (_this.count < 0) _this.count = 0;
+              _this.count += 1;
+              if (_this.count > 10) {
+                _this.isdetected = "已检测到人脸";
+              }
+            } else {
+              _this.count -= 1;
+              if (_this.count < 0) _this.isdetected = "请您保持脸部在画面中央";
+              //this.isdetected = '已检测到人脸，正在登录'
+            }
+          });
         })
-        .catch(error => {
+        .catch((error) => {
           // console.error("摄像头开启失败，请检查摄像头是否可用！");
           _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
         });
@@ -91,7 +168,7 @@ export default {
       ADOM.click();
       this.$message({
         message: "保存成功",
-        type: "success"
+        type: "success",
       });
     },
     // 关闭摄像头
@@ -102,12 +179,12 @@ export default {
       }
       let stream = this.$refs["video"].srcObject;
       let tracks = stream.getTracks();
-      tracks.forEach(track => {
+      tracks.forEach((track) => {
         track.stop();
       });
       this.$refs["video"].srcObject = null;
       this.isCamera = false;
-    }
+    },
   },
   mounted() {
     // console.log(this.$store.state.function);
@@ -123,12 +200,13 @@ export default {
     // _s1.src = "/static/bundle.js";
     // _s1.type = "text/javascript";
     // document.head.appendChild(_s1);
-
     // console.log(this.$store.state.function);
     // if (this.$store.state.function == 1) {
     //   this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
     // }
-  }
+    this.videoEl = this.$refs.video;
+    this.canvasEL = this.$refs.canvasDOM;
+  },
 };
 </script>
 
@@ -169,31 +247,31 @@ body {
 }
 
 #screan {
-  width: 130px;
+  width: 180px;
   position: absolute;
   z-index: 4;
-  top: 85px;
-  left: 55.3px;
+  top: 116px;
+  left: 75.3px;
 }
 
 #ai {
-  width: 130px;
+  width: 180px;
   position: absolute;
   z-index: 1;
-  top: 82px;
-  left: 55.3px;
+  top: 112px;
+  left: 75.3px;
 }
 
 #tou {
-  width: 45px;
+  width: 58px;
   position: absolute;
   z-index: 3;
-  top: 56px;
-  left: 97.5px;
+  top: 78px;
+  left: 136px;
 }
 
 #police {
-  width: 240px;
+  width: 330px;
   position: absolute;
   z-index: 2;
 }
@@ -227,8 +305,8 @@ body {
 }
 
 .controlZ {
-  width: 240px;
-  height: 450px;
+  width: 330px;
+  height: 605px;
   margin-left: 10%;
   position: relative;
 }