前端调用摄像头拍照

<!--标签-->
<video ref="video" class="video"></video>
<canvas id="canvasCamera" style="display: none"></canvas>
<img ref="photo" style="display: none" wh-full />

// 以下调用摄像头逻辑
getCamera(deviceId) {
  // 获取 canvas 画布
  this.canvas = document.getElementById('canvasCamera')
  this.context = this.canvas.getContext('2d')
  try {
    this.getUserMedia(
      deviceId,
      stream => {
        this.video_stream = stream
        this.$refs.video.srcObject = stream
        this.$refs.video.play()
      },
      error => {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`)
        alert('摄像头打开失败，请检查摄像头并点击浏览器地址栏右侧的摄像头标志进行开启设置')
      }
    )
  } catch (error) {
    console.error(error, '摄像头打开失败')
  }
},
getUserMedia(deviceId, success, error) {
  const constraints = {
    audio: false,
    video: {
      width: 300,
      height: 300,
      transform: 'scaleX(-1)',
      deviceId: deviceId
    }
  }
  if (navigator.mediaDevices.getUserMedia) {
    // 最新的标准API
    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
  } else if (navigator.webkitGetUserMedia) {
    // webkit核心浏览器
    navigator.webkitGetUserMedia(constraints, success, error)
  } else if (navigator.mozGetUserMedia) {
    // firfox浏览器
    navigator.mozGetUserMedia(constraints, success, error)
  } else if (navigator.getUserMedia) {
    // 旧版API
    navigator.getUserMedia(constraints, success, error)
  }
},

// 拍照
takePhonto() {
  // 创建一个canvas
  const canvas = document.createElement('canvas')
  const targetDom = this.$refs.video
  const width = targetDom.offsetWidth * 2 // 设置canvas尺寸与所截图尺寸相同，防止白边
  const height = targetDom.offsetHeight * 2
  canvas.width = width
  canvas.height = height
  // 将摄像头捕捉到的图像绘制到canvas上
  canvas.getContext('2d').drawImage(this.$refs.video, 0, 0, width, height)
  // 将canvas转换为图片
  this.ruleForm.imgSrc = canvas.toDataURL('image/png')
},