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

好的，以下是一个获取摄像头画面并执行拍照保存的 Vue3 组件代码示例：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePhoto">拍照</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      photoUrl: null
    };
  },

  mounted() {
    // 获取摄像头画面
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        // 将摄像头画面显示在 video 元素中
        const video = this.$refs.video;
        video.srcObject = stream;

        // 保存视频流，以便后续拍照使用
        this.stream = stream;
      })
      .catch(error => {
        console.log(error.message);
      });
  },

  methods: {
    takePhoto() {
      // 创建 Canvas 元素
      const canvas = document.createElement('canvas');
      const video = this.$refs.video;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 将摄像头画面绘制到 Canvas 上
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 将 Canvas 转换为图片，并保存
      this.photoUrl = canvas.toDataURL('image/png');

      // 释放视频流
      this.stream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

在这个示例中，我们使用了一个 video 元素来显示摄像头画面，在 mounted 钩子函数中通过 navigator.mediaDevices.getUserMedia() 方法获取摄像头画面，并将视频流保存在 data 属性中以便后续拍照使用。在 takePhoto 方法中，我们创建了一个 canvas 元素，并将摄像头画面绘制到 canvas 上，最后使用 toDataURL() 方法将图像转换为 base64 编码，并将编码后的结果保存在 data 属性中的 photoUrl 中。在拍照完成后，我们需要释放视频流，避免占用摄像头资源。