vue3实现H5拍照

在Vue3中实现HTML5的拍照功能，通常会利用浏览器提供的Web API——getUserMedia API以及FileReader API。以下是简单的步骤：

1. 引入摄像头访问权限：首先需要在现代浏览器上请求用户授权，允许应用访问用户的摄像头。这可以通过`navigator.mediaDevices.getUserMedia()`方法完成。

const getUserMedia = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    return stream;
  } catch (err) {
    console.error('Failed to access camera', err);
  }
};

2. 创建一个拍照按钮并绑定事件处理函数：创建一个点击事件，当用户点击拍照按钮时触发摄像机请求。

<button @click="capturePhoto">拍照</button>

methods: {
  capturePhoto() {
    this.getUserMedia().then((stream) => {
      // 照片获取过程...
    });
  },
}

3. 拍照后处理照片：使用`canvas`元素捕获视频流，并将图片转换为Blob或DataURL格式。

methods: {
  ...,
  capturePhoto() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    canvas.captureStream = canvas.captureStream || canvas.mozCaptureStream || canvas.webkitCaptureStream;
    canvas.captureStream({ audio: false, video: true }).then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          const blob = event.data;
          // 这里可以进一步操作blob，比如上传到服务器或显示预览
          // 或者转成DataURL以便显示在页面上
        }
      };
      mediaRecorder.stop();
    });
  },
  ...,
}