捕获高分辨率视频/图像 html5答案

【问题标题】：Capture high resolution video/image html5捕获高分辨率视频/图像 html5
【发布时间】：2013-03-28 19:13:20
【问题描述】：

我使用 geUserMedia() 从网络摄像头 Intro 捕获图像。

我得到的最佳分辨率是 640 X 480，但我有高清网络摄像头以 1280 X 720 录制视频，拍照2592 X 1944。

如何拍摄高分辨率照片？

这是一个代码示例。它不关心画布大小：

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="1280" height="720" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">
    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

</script>

【问题讨论】：

您可以使用 Media Capture API 获取全分辨率图片。在这里查看答案； stackoverflow.com/a/36473227/200987

标签： html webcam getusermedia

【解决方案1】：

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

=> 设置媒体约束（分辨率、高度、宽度）

【讨论】：

这是新事物（以前没有）。我会看看。谢谢！

【解决方案2】：

据我所知，无论您使用什么相机，WebRTC 目前都限制在 640x480。希望这会很快改变。

【讨论】：

【解决方案3】：

对于像我这样发现自己在这里的其他人，http://webrtchacks.com/video-constraints-2/ 有一个有用的更新。

查看原始问题，请注意，据我了解，使用 WebRTC 拍摄静态照片实际上是从视频源中提取静态帧，因此您将始终受到设备视频分辨率的限制，即使它能够自行捕捉更高分辨率的静止图像。

【讨论】：

【解决方案4】：

我使用以下约束来设置分辨率范围，但快照似乎与视频大小相关

var constraints = {
      audio: {deviceId: undefined},
      video: {
           deviceId: vid ? {exact: vid} : undefined
         , width: { min: 1280, max: 1560 }
         , height: { min: 720, max: 1440 }
      }
   };

navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError)

【讨论】：