vue3 获取摄像头画面执行拍照保存

在 Vue3 中获取摄像头画面并执行拍照保存，可以使用 JavaScript 的 navigator.mediaDevices.getUserMedia() 方法来获取摄像头画面，然后使用 canvas 元素将画面绘制出来，最后使用 canvas.toDataURL() 方法将图片转换成 base64 编码并保存。

示例代码如下：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePhoto">Take Photo</button>
  </div>
</template>

<script>
export default {
  methods: {
    async takePhoto() {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true
      });
      this.$refs.video.srcObject = stream;
      const canvas = document.createElement('canvas');
      canvas.width = this.$refs.video.videoWidth;
      canvas.height = this.$refs.video.videoHeight;
      canvas.getContext('2d').drawImage(this.$refs.video, 0, 0);
      const base64 = canvas.toDataURL('image/png');
      // 保存图片，可以使用 axios 等库发送请求将图片上传到后台服务器
    }
  }
}
</script>

这只是一个简单的示例，实际项目中可能需要对代码进行更多的修改和完善。