以全分辨率捕获HTML5中的图像

Question

可以使用MediaStream API在javascript中捕获图像。但是，要这样做，首先必须实例化视频对象，然后将帧绘制到画布中以获取图像。但不幸的是，许多设备（例如电话）不允许您以设备的完整本机分辨率捕获视频。例如，在我的手机上，最大图像分辨率约为4000x3000，但最大视频分辨率仅为1920x1080。显然，捕获仅是可用分辨率的1/6的图像是不可接受的。

那么，如何才能在设备上访问相机的完整分辨率？

Answer 1

您无法使用MediaStream API录制全分辨率图片，但可以使用Media Capture API。

MediaStream API可以流传输来自摄像机的数据，但可以视频格式传输视频。这就是为什么您无法以高分辨率制作照片的原因。

替代方法是使用Media Capture API。它只是HTMLInput通过向capture=cameraaccept参数添加a 来覆盖元素。结果是本机照片应用程序打开以拍照。该功能当前（2017年11月）仅在移动浏览器中实现，因此，如果需要在桌面上支持此功能，则仍然需要WebRTC作为后备。

工作实例

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
    
    console.log(file);
}

myInput.addEventListener('change', sendPic, false);

<input id="myFileInput" type="file" accept="image/*" capture="camera">

我觉得MediaStream API的当前情况是访问台式机的摄像头，而不是实际使用它来拍照。