在拍摄具有 getUserMedia Stream

问题描述

示例：我有一个网络摄像头，该网络摄像头输出 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 ); }
</script>

如果我尝试

function wcanvasim () { var context = canvasElement.getContext("2d"); context.drawImage(videoPlayer,640,480 ); }

仍然不是正确的图像尺寸

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

这是我得到的结果；它只需要原始图像的一小部分:(

但我想要准确的图像，我在视频标签中看到

解决方法

感谢Feature Gates

现在

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