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

我使用geUserMedia（）从网络摄像头捕获图像

我得到的最佳分辨率是640x480，但我有高清摄像头 使用1280 X 720录制视频， 拍摄一张2592x1944的照片

如何拍摄高分辨率照片

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

<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>

拍照
var video=document.querySelector（“#vid”）；
var canvas=document.querySelector（“#canvas”）；
var ctx=canvas.getContext（'2d'）；
var localMediaStream=null；
var ONCAMERAFIL=函数（e）{
console.log（'摄像机不工作'，e）；
};
函数快照（）{
if（本地媒体流）{
ctx.drawImage（视频，0,0）；
}
}
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia；
window.URL=window.URL | | window.webkitURL；
getUserMedia（{video:true}，函数（流）{
video.src=window.URL.createObjectURL（流）；
localMediaStream=stream；
}，安康美拉法）；

据我所知，无论您有什么摄像头，WebRTC目前都限制在640x480。希望这种情况很快就会改变。

---

=>设置媒体限制（分辨率、高度、宽度）

对于像我这样在这里找到自己的人，有一个有用的更新

---

查看原始问题，请注意，据我所知，使用WebRTC拍摄静态照片实际上是从视频源中提取静态帧，因此您将始终受到设备的视频分辨率的限制，即使设备本身能够捕获更高分辨率的静态。

这是一种新功能（以前没有）。我来看看。非常感谢。您可以使用媒体捕获API获取全分辨率图片。看看这里的答案；