vue web 抓拍

<template>
    <Div class="video-main">
      <div>
        <canvas v-show="false" ref="canvas" class="canvas-st "></canvas>
        <video ref="video"  class="canvas-st " autoplay></video>
      </div>
    </Div>
</template>

<script>
import { uploadPhoto , } from "@/api/xxxx/xxxxxx";
export default {
 
  data () {
    return {
      timer: {},
      number: 0,
      photoTime: '',
      videoParams: {
        "remark": '',
        "base64": '',
      },
      headImgSrc: ''
    }
  },
  mounted() {

    this.init();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    init() {
        this.callCamera();
        this.runPhotoTime();
    },
    runPhotoTime() {
        this.timer = setInterval(() => {
           this.photograph({});
        }, 3000)
    },
  
    callCamera () {
      navigator.mediaDevices.getUserMedia({
        video: true
      }).then(success => {
        this.$refs['video'].srcObject = success
        this.$refs['video'].play();
        setTimeout(() => {
          this.photograph({});
        },5000)
      }).catch(() => {
        this.videoParams.remark = 'error';
        console.error('摄像头开启失败')
      })
    },
    photograph (params) {
      let ts = this;
      let ctx = this.$refs['canvas'].getContext('2d')
      ctx.drawImage(this.$refs['video'], 0, 0, 300, 200)
      let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
      ts.videoParams.base64 = imgBase64;
      uploadPhoto( Object.assign({},ts.videoParams)) 
    },
    closeCamera () {
      if (!this.$refs['video'].srcObject) {
        this.dialogCamera = false
        return
      }
      let stream = this.$refs['video'].srcObject
      let tracks = stream.getTracks()
      tracks.forEach(track => {
        track.stop()
      })
      this.$refs['video'].srcObject = null
    },
  }
}
</script>

<style>
.canvas-st {
  height: 200px;
  width: 250px;
}
.video-main {
  position: absolute;
  z-index: 99999;
}
</style>