使用 getuserMedia() Javascript 拍摄的图像分辨率不佳

Question

我想使用 javascript getUserMedia 函数从手机摄像头截取屏幕截图，但分辨率非常差。

if (navigator.mediaDevices) {
  // access the web cam
  navigator.mediaDevices.getUserMedia({
   video: {
    width: { 
     min: 1280,
    },
    height: {
     min: 720,
    },
    facingMode: {
     exact: 'environment'
    }
   }
  }).then(function(stream) {
      video.srcObject = stream;
      video.addEventListener('click', takeSnapshot);
  })
  .catch(function(error) {
      document.body.textContent = 'Could not access the camera. Error: ' + error.name;
  });
}


var video = document.querySelector('video'), canvas;

function takeSnapshot(){
  var img =  document.createElement('img');
  var context;
  var width = video.offsetWidth, height = video.offsetHeight;
  var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height; 
    context = canvas.getContext('2d');          
    context.webkitImageSmoothingEnabled = false;
    context.mozImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    context.drawImage(video, 0,  0, width,  height);    
    img.src = canvas.toDataURL('image/jpeg');
}

没有错误代码，但分辨率不好，我无法阅读照片的文字。有没有一种方法可以从相机中获得真实的图像质量？

Answer 1

媒体捕捉

这就是您通过 getUserMedia 使用的内容。

如果您的相机仅允许 1920x1080、1280x720 和 640x480 分辨率，则 Media Capture 的浏览器实现可以模拟 1280x720 的 480x640 源（请参阅MediaStream）。根据测试（主要是 Chrome），浏览器通常会将 720 缩小到 640，然后裁剪中心。有时，当我使用虚拟相机软件时，我发现 Chrome 在不支持的分辨率周围添加了人造黑色填充。客户会看到成功的消息和正确维度的提要，但人们会看到质量下降。由于这种模拟，您无法保证 Feed 正确或未缩放。然而，它通常具有所要求的正确尺寸。

您可以在此处阅读有关约束的信息。它基本上可以归结为：给我一个接近 x 的分辨率。然后浏览器通过自己的实现来确定拒绝约束并抛出错误、获取解决方案或模拟解决方案。

有关此设计的更多信息，请参阅媒体捕获规范。尤其：

RTCPeerConnection 是一个有趣的对象，因为它同时充当网络流的接收器和源。作为接收器，它具有源转换功能（例如，降低比特率、放大/缩小分辨率以及调整帧速率），并且作为源，它可以通过跟踪源来改变其自己的设置。

其主要原因是允许n个客户端访问相同的媒体源，但可能需要不同的分辨率、比特率等，因此模拟/缩放/转换试图解决这个问题。这样做的缺点是你永远不知道源分辨率是什么。

图像捕捉

这可能是您的解决方案。

如果 60FPS 视频不是硬性要求，并且您在兼容性方面有余地，您可以轮询ImageCapture来模拟相机并从相机接收更清晰的图像。

您必须检查客户端支持，然后可能会回退到 MediaCapture。

该 API 可以控制变焦、亮度、对比度、ISO 和白平衡等相机功能。最重要的是，图像捕获允许您访问任何可用设备相机或网络摄像头的全分辨率功能。以前在 Web 上拍摄照片的技术使用视频快照（MediaCapture 渲染到画布），其分辨率低于静态图像的分辨率。

https://developers.google.com/web/updates/2016/12/imagecapture

及其填充：

https://github.com/GoogleChromeLabs/imagecapture-polyfill