From 768f4ce1141015ef79d9143fbf4754ffe5b0e8a9 Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Mon, 29 Aug 2022 18:44:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/user):=20=E4=BA=BA=E8=84=B8?=
 =?UTF-8?q?=E8=AF=86=E5=88=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development         |   1 +
 .env.production          |   1 +
 .env.staging             |   1 +
 src/api/user/user.js     |  48 ++++++++++++-----
 src/utils/index.js       |  37 +++++++++++++-
 src/views/user/index.vue | 108 ++++++++++++++++++++-------------------
 6 files changed, 129 insertions(+), 67 deletions(-)

diff --git a/.env.development b/.env.development
index 594e95f..f40f389 100644
--- a/.env.development
+++ b/.env.development
@@ -3,3 +3,4 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = 'http://111.231.67.55:9001'
+VUE_APP_FACE_API =  'http://127.0.0.1:5000'
diff --git a/.env.production b/.env.production
index 80c8103..b138f14 100644
--- a/.env.production
+++ b/.env.production
@@ -3,4 +3,5 @@ ENV = 'production'
 
 # base api
 VUE_APP_BASE_API = '/prod-api'
+VUE_APP_FACE_API ='http://127.0.0.1:5000'
 
diff --git a/.env.staging b/.env.staging
index 183130f..d83a89f 100644
--- a/.env.staging
+++ b/.env.staging
@@ -5,4 +5,5 @@ ENV = 'staging'
 
 # base api
 VUE_APP_BASE_API = 'http://111.231.67.55:9001'
+VUE_APP_FACE_API='http://127.0.0.1:5000'
 
diff --git a/src/api/user/user.js b/src/api/user/user.js
index 944898d..da08801 100644
--- a/src/api/user/user.js
+++ b/src/api/user/user.js
@@ -114,17 +114,37 @@ export function get_role_name_list(data) {
     data
   })
 }
-// export function getInfo(token) {
-//   return request({
-//     url: '/vue-admin-template/userinfo/info',
-//     method: 'get',
-//     params: { token }
-//   })
-// }
-//
-// export function logout() {
-//   return request({
-//     url: '/api/userinfo/logout',
-//     method: 'post'
-//   })
-// }
+
+export function faceStart() {
+  return request({
+    url: '/face/startrecognition/',
+    method: 'get',
+    baseURL: process.env.VUE_APP_FACE_API
+  })
+}
+
+export function faceStop() {
+  return request({
+    url: '/face/stoprecognition/',
+    method: 'get',
+    baseURL: process.env.VUE_APP_FACE_API
+  })
+}
+
+export function faceRecognition(data) {
+  return request({
+    url: '/face/recognition/',
+    method: 'post',
+    baseURL: process.env.VUE_APP_FACE_API,
+    data
+  })
+}
+
+export function faceAdd(data) {
+  return request({
+    url: '/face/add/',
+    method: 'post',
+    baseURL: process.env.VUE_APP_FACE_API,
+    data
+  })
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 2c6c40c..6f16d2a 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -48,7 +48,9 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
     const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
     return value.toString().padStart(2, '0')
   })
   return time_str
@@ -208,3 +210,36 @@ export let userMedia = function(constraints, success, error) {
   userMedia(constraints, success, error)
 }
 
+export const web_stream = {
+  get: function(url, callback) {
+    let webClient
+
+    if (url.startsWith('http://')) {
+      webClient = require('http')
+    } else if (url.startsWith('https://')) {
+      webClient = require('https')
+    } else {
+      // eslint-disable-next-line no-throw-literal
+      throw 'Unsupported protocol.'
+    }
+
+    const clientRequest = webClient.get(url, function(response) {
+      response.on('data', function(chunk) {
+        // let data = chunk.toString().split(/\r\n/);
+        callback(chunk)
+      })
+    })
+
+    return {
+      url: url,
+      handler: clientRequest,
+      on: function(type, listener) {
+        clientRequest.on(type, listener)
+      },
+      destroy: function() {
+        clientRequest.destroy()
+      }
+    }
+  }
+}
+
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index cb01efb..5c03948 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -183,13 +183,14 @@
     <el-dialog
       :close-on-click-modal="false"
       title="录入人脸"
-      :visible.sync="dialogFaceVisible"
+      destroy-on-close
+      :visible="dialogFaceVisible"
       width="400px"
       @close="handleCancel"
     >
       <div>
         <div class="face-content">
-          <video id="video" width="200px" height="200px" style="transform:rotateY(180deg)" autoplay />
+          <img v-if="play" id="video" width="200px" height="200px" :src="play" alt="">
           <canvas id="canvas" width="200px" height="200px" style="transform:rotateY(180deg)" />
         </div>
         <div class="name">程小红</div>
@@ -205,11 +206,19 @@
 
 <script>
 import UserForm from '@/components/UserForm'
-import { get_user_list, add, update, del, get_module_list, get_user_power_list, add_user_power, get_role_name_list } from '@/api/user/user'
+import {
+  add,
+  add_user_power,
+  del, faceStart,
+  faceStop, faceAdd,
+  get_module_list,
+  get_role_name_list,
+  get_user_list,
+  get_user_power_list,
+  update
+} from '@/api/user/user'
 import stringify from '@/utils/stringify'
-import { userMedia } from '@/utils'
-require('tracking/build/tracking-min.js')
-require('tracking/build/data/face-min.js')
+import { web_stream as webStream } from '@/utils'
 
 export default {
   name: 'User',
@@ -264,7 +273,11 @@ export default {
       // 人脸识别
       dialogFaceVisible: false,
       videoObj: null,
-      trackerTask: null
+      trackerTask: null,
+      web_stream: null,
+      img_list: [],
+      play: null,
+      rflag: false
     }
   },
   created() {
@@ -361,8 +374,33 @@ export default {
       this.dialogVisible = true
     },
     handleFace(index, row) {
+      faceStart().then(res => {
+        setTimeout(() => { this.play = process.env.VUE_APP_FACE_API + '/face/play/' }, 200)
+      })
+      this.rflag = true
       this.dialogFaceVisible = true
-      this.openCamera()
+      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 < 7) {
+            this.img_list.push('data:image/png;base64,' + this.img_src)
+          }
+          if (this.img_list.length > 200 && this.rflag) {
+            const data = {
+              'images': this.img_list,
+              'user_id': row.user_id
+            }
+            faceAdd(data).then((res) => {
+              this.rflag = false
+            })
+            this.img_list = []
+          }
+        }
+      })
     },
     handleRole(index, row) {
       this.roleDialogVisible = true
@@ -441,51 +479,17 @@ export default {
         instrument_module_id: []
       }
     },
-    /*
-      人脸识别相关
-    */
-    openCamera() {
-      // 有可能触发一些其他的按钮会重新获取
-      this.$nextTick(() => {
-        const canvas = document.getElementById('canvas')
-        const context = canvas.getContext('2d')
-        this.videoObj = document.getElementById('video')
-        // eslint-disable-next-line no-undef
-        const tracker = new tracking.ObjectTracker('face') // 检测人脸
-        tracker.setInitialScale(4)
-        tracker.setStepSize(2)
-        tracker.setEdgesDensity(0.1)
-
-        // eslint-disable-next-line no-undef
-        this.trackerTask = tracking.track('#video', tracker, { camera: true })
-
-        const constraints = {
-          video: { width: 200, height: 200 },
-          audio: false
-        }
-
-        userMedia(constraints, this.success, this.error)
-
-        tracker.on('track', (event) => {
-          event.data.forEach((rect) => {
-            // 绘制到 canvas
-            context.drawImage(this.videoObj, 0, 0, canvas.width, canvas.height)
-            context.font = '16px Helvetica'
-            context.strokeStyle = '#1890ff'
-            context.strokeRect(rect.x, rect.y, rect.width, rect.height)
-          })
-
-          if (event.data.length !== 0) {
-            // 有人脸数据了，此时就可以截取图片传递给后端
-            // canvas 调用 toDataURL
-            const base64Img = canvas.toDataURL('image/jpeg')
-            console.log(base64Img)
-          }
-        })
-      })
-    },
 
     handleCancel() {
+      faceStop().then(
+        res => {
+          console.log(res)
+        }
+      )
+      this.web_stream.destroy()
+      this.play = null
+      this.rflag = false
+      this.dialogFaceVisible = false
       this.videoObj.srcObject.getTracks()[0].stop()
       this.trackerTask.stop()
     },
@@ -529,7 +533,7 @@ export default {
       float: right;
     }
   }
-  video,canvas{
+  #video,canvas{
     position: absolute;
     top: 100px;
     left: 120px;