2020-11-01 js调用摄像头js

// 调用摄像头权限
getCompetence() {
  this.visible = true;
  this.$nextTick(() => {
    const _this = this;
    this.thisCancas = document.getElementById('canvasCamera');
    this.thisContext = this.thisCancas.getContext('2d');
    this.thisVideo = document.getElementById('videoCamera');
    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
      navigator.menavigatordiaDevices = {}
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        let getUserMedia = navigator['webkitGetUserMedia'] || navigator['mozGetUserMedia'] || navigator.getUserMedia;
        if (!getUserMedia) {
          return Promise.reject(new Error())
        }
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject)
        })
      }
    }
    const constraints = {audio: false, video: true};
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
      if ('srcObject' in _this.thisVideo) {
        _this.thisVideo.srcObject = stream
      } else {
        _this.thisVideo.src = window.URL.createObjectURL(stream)
      }
      _this.thisVideo.onloadedmetadata = function () {
        _this.thisVideo.play();
        _this.confirmLoading = false;
      }
    }).catch(() => {
      _this.$message.info("摄像头调取失败！");
      _this.confirmLoading = false;
    })
  });
},
//绘制图片
drawImage() {
  // 点击，canvas画图
  this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
  this.imgSrc = this.thisCancas.toDataURL('image/png', 0.5);
  this.thisVideo.pause();
},
//清空画布
clearCanvas(id) {
  let c = document.getElementById(id);
  let cxt = c.getContext("2d");
  cxt.clearRect(0, 0, c.width, c.height);
},
//重置画布
resetCanvas() {
  this.imgSrc = "";
  this.clearCanvas('canvasCamera');
  this.getCompetence();
},
//关闭摄像头
stopNavigator() {
  if (this.thisVideo && this.thisVideo.srcObject) {
    this.thisVideo.srcObject.getTracks()[0].stop();
  }
},
/*调用摄像头拍照结束*/