高解像度ビデオ/画像をキャプチャするhtml5

ウェブカメラIntroから画像をキャプチャするためにgeUserMedia（）を使用します。私が手高解像度ビデオ/画像をキャプチャするhtml5

ベスト解像度は640 X 480ですが、私はが1280 X 720で映像を記録することをHDウェブカメラを持って、は絵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>

出典

2013-04-06 Konstantin

Media Capture APIを使用してフル解像度の画像を取得できます。ここの答えを見てください。 https://stackoverflow.com/a/36473227/200987 – oligofren