为什么我的画布元素扭曲了我的图像？

Question

画布元素扭曲了我的图像并放大到中间左侧。正如这里所见。

https://i.ibb.co/ZMCcM88/Screenshot-116.png

上面是它应该的样子，下面是它的样子。

我的 console.log() 显示视频和画布大小相等，并且不应出现任何扭曲或错误。

https://i.ibb.co/p0cHDXf/Screenshot-118.png

我的代码看起来像这样

模板

<div>
  <video ref="video" class="full-width" autoplay playsinline >
  <canvas ref="canvas" class="full-width" height="240" >
</div>

脚本

export default defineComponent({
  name: "CameraPage",
  setup() {

    const imageCaptured = ref(false);
    const video = ref(null);
    const canvas = ref(null);

    const initCamera = () => {
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((stream) => {
          video.value.srcObject = stream;
        });
    };

    const captureImage = () => {
      canvas.width = video.value.getBoundingClientRect().width;
      canvas.height = video.value.getBoundingClientRect().height;
      let context = canvas.value.getContext("2d");
      context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
      imageCaptured.value = "True";
    };

    onMounted(() => {
      initCamera();
    });

    return {
      initCamera,
      onMounted,
      captureImage,
      video,
      canvas,
      imageCaptured,
    };
  },
});

我在做什么导致图像扭曲？我在drawImage()方法中得到的东西是错误的吗？是canvas html属性中的“全角”和“高度”吗？

我只是想“截取流媒体视频的屏幕截图”并使其看起来基本上像一张照片。

我如此接近，却又如此遥远。