人脸采集-springboot+vue企业排班

 <!--采集人脸特征窗口-->
        <el-dialog customClass="customWidth" :visible.sync="cameraVisible" >
            <div slot="title" class="header-title">
                <span class="header-title-span"><i class="el-icon-edit"></i>采集人脸特征窗口</span>
            </div>
            <div class="container" style="text-align: center;">
                <video id="video" width="480" height="320">  </video>
                <p id="video_tip" >脸部特征采集中，请正脸看向摄像头</p>
                <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
                <p id="result"></p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cameraVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveFaceData()">开始采集</el-button>
            </div>
        </el-dialog>

 video: null, // 存储 video 元素引用
      canvas : null, // 存储 canvas 元素引用
      context : null, // canvas 上下文
      cameraVisible: false, // 控制采集人脸窗口是否可见
      faceData:{ // 人脸识别数据对象
        id: '', // 员工 ID
        img: '' // 图像 base64 数据
      },

   getFace() { // 截取当前视频帧为图片
      this.context.drawImage(this.video,0,0,150,150);
      let imgSrc=this.canvas.toDataURL('image/jpg');
      imgSrc=imgSrc.split(',')[1]; // 取出 base64 编码部分
      return imgSrc;
    },
    getCompetence(index,row) { // 获取摄像头权限，准备采集人脸
      const that=this
      this.cameraVisible =true // 显示采集窗口
      this.$nextTick(()=>{
        that.faceData.id= row.id // 设置员工 ID
        that.canvas = document.getElementById('canvas'); // 获取 canvas 引用
        that.context=this.canvas.getContext('2d') // 获取上下文

        that.video = document.getElementById('video'); // 获取 video 元素
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
            }
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject)
            })
          }
        }
        var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
          if ('srcObject' in that.video) {
            that.video.srcObject = stream
          } else {
            that.video.src = window.URL.createObjectURL(stream)
          }
          that.video.onloadedmetadata = function (e) {
            that.video.play()
          }
        }).catch(err => {
          console.log(err)
        })
      })

    },
    saveFaceData(){ // 保存人脸信息到后台
      this.faceData.img=this.getFace()
      employees_addFaceData(this.faceData).then((res) => {
        if (res.data.status == 1) {
          this.$message({ duration:3000, message:res.data.msg, type: 'success' })
          this.getPage()
        } else {
          this.$message.error(res.data.msg)
        }

      })
    },