13

geUserMedia() を使用して、ウェブカメラIntroから画像をキャプチャします。

私が得られる最高の解像度は640 X 480ですが、 1280 X 720でビデオを録画し、 2592 X 1944の写真を撮るHD ウェブカメラがあります。

高解像度の写真をキャプチャするにはどうすればよいですか?

コードのサンプルを 1 つ示します。キャンバスのサイズは気にしません。

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

4 に答える 4

12

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

=> メディア制約の設定 (解像度、高さ、幅)

于 2013-11-18T21:48:01.067 に答える
4

私が知る限り、WebRTC は現在、カメラの種類に関係なく 640x480 に制限されています。うまくいけば、これはすぐに変わるでしょう。

于 2013-04-11T19:14:51.963 に答える
0

私のようにここにいる他の人のために、http://webrtchacks.com/video-constraints-2/に便利なアップデートがあります。

元の質問を見ると、私が理解している限り、WebRTC を使用して静止写真を撮ることは、実際にはビデオ フィードから静止フレームを抽出していることに注意してください。より高い解像度の静止画をキャプチャします。

于 2014-10-22T06:27:55.617 に答える
0

以下の制約を使用して解像度の範囲を設定しましたが、スナップショットはビデオのサイズに関連付けられているようです

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)
于 2021-07-06T03:30:37.113 に答える