vue3调用摄像头，并且点击拍照，保存在img

可以使用 `getUserMedia` 方法调用摄像头，然后使用 `canvas` 将捕捉到的图像转换为图片格式并保存在 `img` 标签中。下面是一个简单的示例代码：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePhoto">Take Photo</button>
    <img ref="photo" style="display: none">
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取video元素
    const video = this.$refs.video;
    // 调用摄像头
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        // 将摄像头捕捉到的视频流绑定到video元素上
        video.srcObject = stream;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    takePhoto() {
      // 获取video元素和canvas元素
      const video = this.$refs.video;
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      // 将摄像头捕捉到的图像绘制到canvas上
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      // 将canvas转换为图片
      const photo = this.$refs.photo;
      photo.src = canvas.toDataURL('image/png');
      // 显示图片
      photo.style.display = 'block';
    }
  }
}
</script>

这个示例会在页面中显示一个 `video` 元素和一个 `button` 按钮，点击按钮后会将摄像头捕捉到的图像转换为图片格式保存在 `img` 标签中显示出来。