前端调用摄像头拍照，并使用Vue Cropper进行裁剪

安装 Vue Cropper

安装 Vue Cropper 可以通过 npm 或 yarn 进行：

npm install vue-cropper
# 或
yarn add vue-cropper

引入 Vue Cropper

在 Vue 组件中引入 Vue Cropper：

import { VueCropper } from 'vue-cropper'

调用摄像头

调用摄像头的核心代码基于 navigator.mediaDevices.getUserMedia API：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.getElementById('video')
    video.srcObject = stream
  })
  .catch(error => {
    console.error('Error accessing camera:', error)
  })

拍照并裁剪

拍照时将视频帧绘制到 Canvas，再转换为图片供 Vue Cropper 使用：

setImage() {
  const canvas = document.getElementById('canvasCamera')
  const video = document.getElementById('video')
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  this.option.img = canvas.toDataURL('image/png')
}

配置 Vue Cropper

Vue Cropper 的主要配置参数示例：

option: {
  img: '', 
  outputSize: 0.8,
  outputType: 'png',
  autoCrop: true,
  autoCropWidth: 150,
  autoCropHeight: 200,
  fixedBox: false,
  canMoveBox: false
}

确认裁剪结果

通过 Vue Cropper 的 getCropData 方法获取裁剪后的图片：

confirmSubmit() {
  this.$refs.cropper.getCropData(data => {
    this.$emit('cropped', data)
    this.closeModal(false)
  })
}

切换摄像头设备

枚举设备并切换：

changeDevice() {
  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      const videoDevices = devices.filter(d => d.kind === 'videoinput')
      // 切换逻辑
    })
}

清理资源

关闭模态框时停止摄像头流：

closeModal() {
  if (this.option.stream) {
    this.option.stream.getTracks().forEach(track => track.stop())
  }
}

配置 HTTP 协议启用摄像头权限

确保网站使用 HTTPS 协议而非 HTTP，因为现代浏览器默认禁止 HTTP 站点调用摄像头等敏感设备。若必须在 HTTP 环境下测试，可通过以下方式临时启用权限：

在 Chrome 地址栏输入 chrome://flags/，搜索 Insecure origins treated as secure，将需要启用摄像头的 HTTP 地址（如 http://localhost:8080）填入输入框并启用。重启浏览器后生效。

修改 Chrome 实验性功能配置

访问 chrome://flags/ 页面，搜索以下关键选项并调整设置：

• Enable screen capture support in getUserMedia：设置为 Enabled，允许通过 getUserMedia API 捕获摄像头和屏幕。
• Allow insecure origins to use powerful features：设置为 Enabled，允许非 HTTPS 源使用摄像头等权限。
• WebRTC hardware video encoding/decoding：根据硬件支持情况启用或禁用，可能影响摄像头调用性能。

修改后点击右下角 Relaunch 重启浏览器使配置生效。

检查浏览器权限设置

在 Chrome 中访问 chrome://settings/content/camera，确保目标网站未被阻止。手动添加网站到允许列表，并关闭“禁止网站使用摄像头”的全局开关。清除浏览器缓存后重新加载页面测试。

验证代码实现

确保前端代码正确请求摄像头权限。示例代码片段：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  })
  .catch(error => {
    console.error('摄像头访问失败:', error);
  });

错误处理需包含 NotAllowedError（权限拒绝）和 NotFoundError（无设备）等情况的反馈。

其他浏览器兼容性处理

对于 Firefox 或 Edge 浏览器，类似配置可通过 about:config 或 edge://flags 调整。注意不同浏览器对混合内容（HTTP/HTTPS）的安全策略差异，建议优先采用 HTTPS 部署方案。

将上述功能集成到 Vue 单文件组件中，需注意：

• 模板中需同时包含 <video> 和 <VueCropper> 元素
• 通过 v-if 控制显示状态
• 按钮事件绑定对应方法

注意事项

1. 需在 HTTPS 或 localhost 环境下使用摄像头 API
2. 移动端需处理设备方向问题
3. 部分配置如 fixedNumber 需根据实际需求调整
4. 裁剪结果可通过 Base64 或 Blob 形式提交

错误处理

添加基本的错误处理逻辑：

getUserMedia(constraints) {
  navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      this.option.stream = stream
      // 其他处理
    })
    .catch(err => {
      console.error('Camera error:', err)
    })
}