VueJs用H5原生接口getUserMedia调起摄像头拍照

使用H5原生接口获取视频流，短暂延迟后拍照

在VueJs框架下，利用H5原生接口navigator.mediaDevices.getUserMedia调起摄像头，保存视频和图片

<template>
	<div><button @click="getSnap"></div>
</template>
<script>
export default{
  name: 'Snap',
  data() {
  	width: 640,
  	height: 480,
  },
  methods: {
    getSnap() {
      let video = document.createElement('video');
      video.width = this.width;
      video.height = this.height;
      let canvas= document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      let context = canvas.getContext('2d');
      
      let constains = {
        video: true
      }
      navigator.mediaDevices.getUserMedia(constains )
        .then(async (stream) => {
          video.srcObject = stream;
          video.play();
          // 这里拍照的时候需要延时，等待视频加载播放，否则拿到空base64数据
          setTimeout(() => {
            context.drawImage(video, 0, 0, this.width, this.height);
            let image = canvas.toDataURL('image/jpeg');
            image = image.split(image.indexOf(',')+1);
            await FileUtils.saveImg('D:/snap.jpeg', image);
            // 停止视频流，释放摄像头
            stream.stop();
            video = null;
            canvas = null;
            context = null;
            image = null;
          }, 3000);
        }).catch((error) => {
          console.log(error.code, error.message, error);
        });
    }
  },
}
</script>