拍摄具有getUserMedia流的视频标记快照时，canvasElement.getContext和context.drawImage的图像大小错误

示例：我有一个网络摄像头，该摄像头输出648x480（但它可以是任何宽度和高度的网络摄像头）

我有这个密码

<video id="precam" playsinline="true" muted autoplay ></video>
<canvas id="canvax" ></canvas><div onclick="wcanvasim();">CAPTURE</div>


<script>
    const videoPlayer = document.querySelector("#precam"); 
    const canvasElement = document.querySelector("#canvax");
    navigator.mediaDevices.getUserMedia({ video:true, audio:false }).then(stream => videoPlayer.srcObject = stream).catch(error => {console.error(error);});
    function wcanvasim () { var context = canvasElement.getContext("2d"); context.drawImage(videoPlayer, 0, 0 ); }
</script>

仍然不是正确的图像大小

为什么以及如何解决这个问题

这就是我得到的结果；它仅获取原始图像的一小部分：(

但我想精确地显示我在视频标签中看到的图像，多亏了

现在是

function wcanvasim () { 
 canvasElement.width = videoPlayer.videoWidth; 
 canvasElement.height = videoPlayer.videoHeight;
 canvasElement.getContext("2d").drawImage(videoPlayer, 0, 0, canvasElement.width, canvasElement.height);
}

function wcanvasim () { 
 canvasElement.width = videoPlayer.videoWidth; 
 canvasElement.height = videoPlayer.videoHeight;
 canvasElement.getContext("2d").drawImage(videoPlayer, 0, 0, canvasElement.width, canvasElement.height);
}