VUE 实现浏览器连接摄像头拍摄

<video ref="video" width="532" height="370" autoplay>

          <canvas v-show="false" ref="canvas" width="532" height="370" />

</video>

 <img style="width:280px;height:280px;left:10px;position: absolute;" src="mask.png" >//图片遮罩

openedCamera() {

      navigator.mediaDevices.getUserMedia({ video: true }).then(success => {

        // 摄像头开启成功

        this.$refs.video.srcObject = success

        // 实时拍照效果

        this.$refs.video.play()

      })

      // .catch(error => {

      //   this.popup = false

      //   this.$message({ showClose: true, duration: 3000, message: '摄像头开启失败，请检查摄像头是否可用！', type: 'error' })

      // })

    },

    photograph() { // 拍摄

      const canvas = this.$refs.canvas

      const ctx = canvas.getContext('2d')

      // const ctx = this.$refs.canvas.getContext('2d')

      // 把当前视频帧内容渲染到canvas上

      ctx.drawImage(this.$refs.video, 0, 0, 640, 480)

      // 转base64格式、图片格式转换、图片质量压缩

      imgBase64 = this.$refs.canvas.toDataURL('image/jpeg', 0.7)

      this.$forceUpdate()//实时更新

      this.gatherPhotograph = false

      // console.log('imgBase64')

      // console.log(imgBase64)

      // // 如需上传图篇 可以吧base64转换文件流 进行上传

      // const a = this.base64toFile(imgBase64)

      // this.img_base = this.blobToFile(a)

      // // 由字节转换为KB 判断大小

      // const str = imgBase64.replace('data:image/jpeg;base64,', '')

      // const strLength = str.length

      // const fileLength = parseInt(strLength - (strLength / 8) * 2)

      // // 图片尺寸  用于判断

      // const size = (fileLength / 1024).toFixed(2)

      // console.log(size + '4')

    },

    // base64转File

    // base64toFile(dataurl, filename = 'file') {

    //   const arr = dataurl.split(',')

    //   const mime = arr[0].match(/:(.*?);/)[1]

    //   const suffix = mime.split('/')[1]

    //   const bstr = atob(arr[1])

    //   let n = bstr.length

    //   const u8arr = new Uint8Array(n)

    //   while (n--) {

    //     u8arr[n] = bstr.charCodeAt(n)

    //   }

    //   // return new File([u8arr], `${filename}.${suffix}`, {

    //   //      type: mime

    //   // }) //转File流

    //   return new Blob([u8arr], { type: mime }) // 转Blob流

    // },

    // // Blob流转File

    // blobToFile(theBlob, fileName = 'ocr1.jpeg') {

    //   theBlob.lastModifiedDate = new Date()

    //   theBlob.name = fileName

    //   return theBlob

    // },

    // 关闭摄像头

    // stopNavigator() {

    //   this.$refs.video.srcObject.getTracks()[0].stop()

    // },