feat(index): 人脸识别优化，新增socketio通信

package.json

@@ -24,9 +24,11 @@
     "path-to-regexp": "2.4.0",
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
+    "socket.io-client": "^4.5.2",
     "tracking": "^1.1.3",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
+    "vue-socket.io": "^3.0.10",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "vuex-persistedstate": "^4.1.0"

src/api/user/user.js

@@ -123,28 +123,37 @@ export function faceStart() {
   })
 }
 
-export function faceStop() {
+export function addStart(data) {
   return request({
-    url: '/face/stoprecognition/',
-    method: 'get',
-    baseURL: process.env.VUE_APP_FACE_API
-  })
-}
-
-export function faceRecognition(data) {
-  return request({
-    url: '/face/recognition/',
+    url: '/face/add/',
     method: 'post',
     baseURL: process.env.VUE_APP_FACE_API,
     data
   })
 }
 
-export function faceAdd(data) {
+export function faceStop() {
   return request({
-    url: '/face/add/',
-    method: 'post',
-    baseURL: process.env.VUE_APP_FACE_API,
-    data
+    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
+//   })
+// }

src/main.js

@@ -28,6 +28,15 @@ import * as echarts from 'echarts'
 
 Vue.prototype.$echarts = echarts // 挂载到Vue实例上面
 
+import VueSocketIO from 'vue-socket.io'
+import SocketIO from 'socket.io-client'
+
+Vue.use(new VueSocketIO({
+  debug: true,
+  connection: SocketIO(process.env.VUE_APP_FACE_API) // options object is Optional
+})
+)
+
 // set ElementUI lang to EN
 Vue.use(ElementUI, { zhCN })
 // 如果想要中文版 element-ui，按如下方式声明

src/views/login/index.vue

@@ -104,9 +104,9 @@
 <script>
 // import { validUsername } from '@/utils/validate'
 import stringify from '@/utils/stringify'
-import { faceRecognition, faceStart, faceStop, login } from '@/api/user/user'
+import { faceStart, faceStop, login } from '@/api/user/user'
 import { client_list } from '@/api/common'
-import { throttle, web_stream as webStream } from '@/utils'
+import { throttle } from '@/utils'
 
 export default {
   name: 'Login',
@@ -155,6 +155,9 @@ export default {
       immediate: true
     }
   },
+  beforeDestroy() {
+    this.sockets.unsubscribe('reco')
+  },
   methods: {
     handleClose: throttle(function() {
       faceStop().then(
@@ -162,7 +165,6 @@ export default {
           console.log(res)
         }
       )
-      this.web_stream.destroy()
       this.play = null
       this.rflag = false
     }, 1000),
@@ -171,25 +173,22 @@ export default {
       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.sockets.subscribe('reco', (res) => {
+            if (res.status === 0) {
+              // 人脸识别成功
+              this.$message.success(res.msg)
+              this.$store.commit('user/SET_TOKEN', res.data.token)
+              this.$store.dispatch('permission/generateRoutes')
+              this.$router.replace('/home')
+              // 登录后立刻获取client数据供后续使用
+              client_list().then(
+                res => {
+                  this.$store.commit('app/SET_COPTS', res.data.data_list)
                 }
+              )
+            } else {
+              // 人脸识别失败
+              this.$message.warning(res.msg)
             }
           })
           this.rflag = true
@@ -452,6 +451,7 @@ $light_gray: #eee;
     text-align: center;
     margin-top: 2rem;
     margin-bottom: 2rem;
+
     img {
       height: 23.4375rem;
       width: 23.4375rem;
@@ -482,7 +482,8 @@ $light_gray: #eee;
     font-weight: 400;
     color: #C0C4CC;
   }
-  .dia-back{
+
+  .dia-back {
     margin-top: 0.5rem;
     text-align: center;
   }

src/views/user/index.vue

@@ -268,9 +268,9 @@
 import UserForm from '@/components/UserForm'
 import {
   add,
-  add_user_power,
-  del, faceStart,
-  faceStop, faceAdd,
+  add_user_power, addStart,
+  del,
+  faceStop,
   get_module_list,
   get_role_name_list,
   get_user_list,
@@ -278,7 +278,7 @@ import {
   update
 } from '@/api/user/user'
 import stringify from '@/utils/stringify'
-import { throttle, web_stream as webStream } from '@/utils'
+import { throttle } from '@/utils'
 
 export default {
   name: 'User',
@@ -345,6 +345,7 @@ export default {
     this.getModelList()
   },
   beforeDestroy() {
+    this.sockets.unsubscribe('add')
     this.handleCancel()
   },
   methods: {
@@ -434,29 +435,15 @@ export default {
     },
     handleFace(index, row) {
       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,
         'user_id': row.user_id
       }
-                faceAdd(data).then((res) => {
-                  this.rflag = false
-                })
-                this.img_list = []
-              }
+      addStart(data).then(res => {
+        setTimeout(() => {
+          this.play = process.env.VUE_APP_FACE_API + '/face/play/'
+          this.sockets.subscribe('add', (res) => {
+            if (res.status === 0) {
+              this.$message.success(res.msg)
             }
           })
           this.rflag = true
@@ -550,7 +537,6 @@ export default {
         }
       )
       this.dialogFaceVisible = false
-      this.web_stream.destroy()
       this.play = null
       this.rflag = false
     }, 1000),
@@ -558,9 +544,6 @@ export default {
       this.play = null
       this.rflag = false
       this.dialogFaceVisible = false
-      if (this.web_stream) {
-        this.web_stream.destroy()
-      }
     }
   }
 }