javascript - 手机的相机与浏览器的相机图像质量

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;

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