HTML5调用系统摄像头结合canvas进行拍照以及文件上传，调用结束后关闭浏览器对摄像头的占用

html5部分

 <!-- 摄像头拍照 -->
 <el-button size="mini" type="primary" class="cameraBtn"  @click="confirm_camera">拍照</el-button>
 
 <el-dialog :visible.sync="isShowCamera" title="拍照" width="600px">
  <video ref="video_camera" style="width: 100%;"></video>
   <div slot="footer" class="dialog-footer">
     <el-button type="primary" @click="clic_camera">拍 摄</el-button>
     <el-button @click="isShowCamera = false">取 消</el-button>
   </div>
 </el-dialog>

JS部分

// 拍照
    async confirm_camera() {
      let navigator = window.navigator.mediaDevices;
      navigator
        .getUserMedia({
          video: {
            width: 600,
            height: 400
          },
        })
        .then((mediaStream) => {
          this.isShowCamera = true;
          this.$nextTick(() => {
            this.$refs.video_camera.srcObject = mediaStream;
            let that = this;
            this.$refs.video_camera.onloadedmetadata = function (e) {
              that.$refs.video_camera.play();
            };
          })
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('请连接摄像头并允许浏览器进行拍摄')
          this.isShowCamera = false;
        });
    },
    //拍摄按钮事件
    clic_camera() {
      const canvas = document.createElement("canvas");
      canvas.width = 600;
      canvas.height = 400;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(this.$refs.video_camera, 0, 0, canvas.width, canvas.height);
      let image = canvas.toDataURL("image/png");
      this.isShowCamera = false;  //相机展示画面是弹窗，这里是关闭弹窗
      this.submitUpload(image)
    },
    submitUpload(image) {
      // console.log("image", image)  //base64
      let binaryData = atob(image.split(',')[1]); // base64格式转file格式
      let arrayBuffer = new ArrayBuffer(binaryData.length);
      let uint8Array = new Uint8Array(arrayBuffer);
      for (let i = 0; i < binaryData.length; i++) {
        uint8Array[i] = binaryData.charCodeAt(i);
      }
      let blob = new Blob([uint8Array], { type: 'image/jpeg' }); // 指定文件类型
      this.handleUpload({ file: blob, filename: "camera.jpg", fileMime: "image/jpeg", blob: blob }); //上传的业务代码
      //调用结束后关闭浏览器对摄像头的占用
      this.$refs.video_camera.srcObject = null;
      var stream = this.$refs.video_camera.srcObject;
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
      }
    },