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

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

媒体捕获规范中详细介绍了此设计的更多信息。特别是:

The RTCPeerConnection is an interesting object because it acts simultaneously as both a sink and a source for over-the-network streams. As a sink, it has source transformational capabilities (e.g., lowering bit-rates, scaling-up / down resolutions, and adjusting frame-rates), and as a source it could have its own settings changed by a track source.

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

图像捕捉

这可能是您的解决方案。

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

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

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

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

及其填充:

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