firefox - 尝试从用户相机中绘制图像时，Firefox 中未捕获的 DOMException

Question

我正在尝试从用户相机拍摄照片。我正在使用 VueJS3 组合 API。

我的模板中有这 2 个参考：

<video  ref="video"  autoplay/>
<canvas ref="canvas"  height="500" />

在我获得用户使用相机的许可并将其流式传输到视频标签后，我有这个功能来捕获图像：

function captureImage(){

    canvas.value.width = video.value.getBoundingClientRect().width
    canvas.value.height = video.value.getBoundingClientRect().height
    let context = canvas.value.getContext('2d')
 
      context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height)      
}

在 chrome (chromium) 中一切正常，但在 Firefox 93.0 中抛出未捕获的 DOMException