使用 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 在不受支持的分辨率周围添加了人工黑色填充。客户看到一条成功消息和正确尺寸的提要，但一个人会看到质量下降。由于此模拟，您无法保证提要正确或未缩放。但是，它通常会要求正确的尺寸。

您可以阅读约束 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 个客户端访问相同的媒体源，但可能需要不同的分辨率、比特率等，因此 emulation/scaling/transforming 试图解决这个问题。不利的是，您永远不知道源分辨率是什么。

ImageCapture

这可能是您的解决方案。

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

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

API 可以控制相机功能，例如缩放、亮度、对比度、ISO 和白平衡。最重要的是，Image Capture 允许您访问任何可用设备相机或网络摄像头的全分辨率功能。以前在 Web 上拍摄照片的技术使用视频快照（MediaCapture 呈现为 Canvas），其分辨率低于静止图像可用的分辨率。

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

及其 polyfill：

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

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

Bad Resolution Image taken with getuserMedia() Javascript

javascript

html

camera

getusermedia