手机的摄像头与浏览器的摄像头

Question

我建立了一个Web应用程序来使用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适当地缩放画布以进行显示，并且大多数浏览器都可以很好地使缩放后的显示看起来不错。