feat(src/views/login/index.vue): 登录添加人脸识别功能

src/icons/svg/face.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662341853273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2461" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M682.666667 554.666667v21.333333c0 81.066667-68.266667 149.333333-149.333334 149.333333S384 657.066667 384 576V554.666667h42.666667v21.333333c0 59.733333 46.933333 106.666667 106.666666 106.666667s106.666667-46.933333 106.666667-106.666667V554.666667h42.666667zM213.333333 426.666667V213.333333h213.333334v42.666667H256v170.666667H213.333333z m0 213.333333h42.666667v170.666667h170.666667v42.666666H213.333333v-213.333333z m640-213.333333h-42.666666V256h-170.666667V213.333333h213.333333v213.333334z m0 213.333333v213.333333h-213.333333v-42.666666h170.666667v-170.666667h42.666666z m-384-256v85.333333h-42.666666V384h42.666666z m170.666667 0v85.333333h-42.666667V384h42.666667z" fill="#409EFF" p-id="2462"></path></svg>

src/views/login/index.vue

@@ -67,24 +67,46 @@
           <el-button
             :loading="loading"
             type="primary"
-            style="width:100%;margin-bottom:30px;"
+            style="width:100%;margin-bottom:20px;padding: 1rem"
             @click.native.prevent="handleLogin"
           >登录
           </el-button>
-
         </el-form>
+        <el-button style="width:100%;margin-bottom:20px;" @click="handleOpen">
+          <svg-icon class="svg-icon-data" icon-class="face" />
+          人脸识别登录
+        </el-button>
         <div class="forget-pwd"><a>忘记密码？</a></div>
       </el-card>
     </div>
     <div class="statement">COPYRIGHT © 2022 杭州研一智控科技有限公司 版权所有</div>
+    <!--    人脸识别    -->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :show-close="false"
+      :close-on-click-modal="false"
+      @close="handleClose"
+    >
+      <div class="dia-title">人脸识别登录</div>
+      <div class="dia-img"><img :src="play" alt=""></div>
+      <div class="dia-desc">人脸识别登录</div>
+      <div class="dia-act">正在识别</div>
+      <div class="dia-info">请保持您的正脸在取景框内...</div>
+      <div class="dia-back">
+        <el-button @click="handleBack">返回</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // import { validUsername } from '@/utils/validate'
 import stringify from '@/utils/stringify'
-import { login } from '@/api/user/user'
+import { faceRecognition, faceStart, faceStop, login } from '@/api/user/user'
 import { client_list } from '@/api/common'
+import { throttle, web_stream as webStream } from '@/utils'
 
 export default {
   name: 'Login',
@@ -104,6 +126,7 @@ export default {
     //   }
     // }
     return {
+      dialogVisible: false,
       backgrounddiv: {
         'background-image': 'url(' + require('@/assets/login/login.png') + ')'
       },
@@ -117,7 +140,11 @@ export default {
       },
       loading: false,
       passwordType: 'password',
-      redirect: undefined
+      redirect: undefined,
+      web_stream: null,
+      img_list: [],
+      play: null,
+      rflag: false
     }
   },
   watch: {
@@ -129,6 +156,50 @@ export default {
     }
   },
   methods: {
+    handleClose: throttle(function() {
+      faceStop().then(
+        res => {
+          console.log(res)
+        }
+      )
+      this.web_stream.destroy()
+      this.play = null
+      this.rflag = false
+    }, 1000),
+    handleOpen() {
+      this.$forceUpdate()
+      faceStart().then(res => {
+        setTimeout(() => {
+          this.play = process.env.VUE_APP_FACE_API + '/face/play/'
+          this.web_stream = webStream.get(process.env.VUE_APP_FACE_API + '/face/play/', (data) => {
+            if (data.length > 41) {
+              const buffer = Buffer.allocUnsafe(data.byteLength - 41)
+              data.copy(buffer, 0, 37)
+              this.img_src = buffer.toString('base64')
+              const count = Math.floor(Math.random() * 10 + 1)
+              //  随机抽样
+              if (count < 2) {
+                this.img_list.push('data:image/png;base64,' + this.img_src)
+              }
+              if (this.img_list.length > 10 && this.rflag) {
+                const data = {
+                  'images': this.img_list
+                }
+                faceRecognition(data).then((res) => {
+                  this.rflag = false
+                })
+                this.img_list = []
+              }
+            }
+          })
+          this.rflag = true
+          this.dialogVisible = true
+        }, 200)
+      })
+    },
+    handleBack() {
+      this.dialogVisible = false
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -193,7 +264,7 @@ export default {
 .login-form-container {
   color: #C0C4CC;
   width: 27.5rem;
-  height: 33.75rem;
+  /*height: 36rem;*/
   position: absolute;
   right: 8.0625rem;
   top: 50%;
@@ -314,8 +385,8 @@ $light_gray: #eee;
     position: relative;
     width: 27.5rem;
     max-width: 100%;
-    padding-top: 4rem;
+    padding-top: 2rem;
-    padding-left: 1rem;
+    //padding-left: 1rem;
     overflow: hidden;
   }
 
@@ -361,5 +432,59 @@ $light_gray: #eee;
     cursor: pointer;
     user-select: none;
   }
+
+  .svg-icon-data {
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: -0.3rem;
+    fill: currentColor;
+    overflow: hidden;
+  }
+
+  .dia-title {
+    text-align: center;
+    font-size: 2.3125rem;
+    font-weight: bold;
+    color: #303133;
+  }
+
+  .dia-img {
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    img {
+      height: 23.4375rem;
+      width: 23.4375rem;
+      border-radius: 50%;
+      border: 2px solid #707070;
+    }
+  }
+
+  .dia-desc {
+    text-align: center;
+    font-size: 2.3125rem;
+    font-weight: 400;
+    color: #000000;
+  }
+
+  .dia-act {
+    text-align: center;
+    font-size: 1.625rem;
+    font-weight: 400;
+    color: #409EFF;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .dia-info {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #C0C4CC;
+  }
+  .dia-back{
+    margin-top: 0.5rem;
+    text-align: center;
+  }
 }
 </style>

src/views/user/index.vue

@@ -251,7 +251,7 @@
     >
       <div>
         <div class="face-content">
-          <img v-if="play" id="video" ref="$img" width="200px" height="200px" :src="play" alt="">
+          <img v-if="play" id="video" ref="img" width="200px" height="200px" :src="play" alt="">
         </div>
         <div class="name">程小红</div>
         <div class="code">工号：779</div>