手机的摄像头与浏览器的摄像头图像质量

Question

我构建了一个网络应用程序来使用getUserMedia()捕获图像， 但是图像的质量不是很好，有点模糊！我尝试通过手机的相机拍照，结果有很大的不同！

我想知道为什么从浏览器拍摄照片不如从手机的相机拍摄照片！ 如果可能的话，如何才能通过浏览器(getUserMedia()(以最佳质量捕获图像？

capture.addEventListener('click', () => {
c.style.display = "flex";
c.width = video.outerWidth();
c.height = video.outerHeight();
ctx.drawImage(video, 0, 0, c.width, c.height);
video.style.display = "none";
})

提前谢谢。

Answer 1

尝试使用这些行

c.width = video.videoWidth;
c.height = video.videoHeight;

然后，您的画布将具有与捕获的视频相同的分辨率。 您可以使用 CSS 适当地缩放画布以进行显示，大多数浏览器都可以很好地使缩放的显示看起来不错。