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

Question

可以使用 MediaStream API 在 javascript 中捕获图像。但为了做到这一点，首先需要实例化一个视频对象，然后将帧绘制到 Canvas 中以获得图像。但不幸的是，许多设备(例如手机)不允许您以设备的完整原始分辨率捕获视频。例如，在我的手机上，最大图像分辨率约为 4000x3000，但最大视频分辨率仅为 1920x1080。很明显，捕捉不到可用分辨率 1/6 的图像是 Not Acceptable 。

那么我怎样才能在设备上访问相机的全分辨率呢？

Answer 1

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

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

另一种方法是使用 Media Capture API .它只是通过将 capture=camera 添加到接受参数来覆盖 HTMLInput 元素。结果是 native 照片应用打开并拍照。此功能目前(2017 年 11 月)only implemented in mobile browsers ，因此如果您需要在桌面上支持此功能，您仍然需要 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 目前的情况是访问桌面相机，而不是实际使用它来拍照。