手机摄像头对比浏览器摄像头画质答案

【问题标题】：Phone's camera vs browser's camera image quality手机摄像头对比浏览器摄像头画质
【发布时间】：2020-03-28 07:38:16
【问题描述】：

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

我想知道为什么从浏览器拍照不如从手机相机拍照！如果可能的话，如何才能通过浏览器（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";
})

提前致谢。

【问题讨论】：

gUM 因设备和浏览器而异，因此我们需要更多信息来帮助您。我想您已经在webrtc.github.io/samples/src/content/getusermedia/canvas 尝试了“官方”快照演示，并获得了与您的问题类似的结果。什么设备？什么相机？什么浏览器（在什么设备上）？请edit您的问题。

标签： javascript stream webrtc getusermedia

【解决方案1】：

尝试使用这些行

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

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

【讨论】：