getUserMedia图像捕获分辨率与html视频元素大小

Question

是否有一种方法可以捕获比显示我打算捕获的网络摄像头图像的屏幕视频元素实际宽度更高的分辨率的图像？

当前，我已将getUserMedia中的宽度设置为1280，但我的元素被限制为640px。我仍想存储1280px宽的图像，以便获得更高质量的图像。

代码：

<div id="video-container">
    <h3 id="webcam-title">Add Photos</h3>
        <video id="video" autoplay playsinline></video>
    <select id="videoSource"></select>
    <div id="take-photo-button" onclick="takeSnapshot();">TAKE PHOTO <div class="overlay"></div></div>
    <canvas  id="myCanvas" style="display:none;"></canvas>
    <div id="snapshot-container"></div>

    <div id="approval-form-submit">SAVE ORDER</div>
</div>


<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<script>
    $(function() {
        var video = document.querySelector('video');
        var videoSelect = document.querySelector('select#videoSource');
        var initialized = false;

        //Obtain media object from any browser
        navigator.getUserMedia = (  navigator.getUserMedia ||
                                    navigator.webkitGetUserMedia ||
                                    navigator.mozGetUserMedia ||
                                    navigator.msGetUserMedia);

        var video_height, snapshot_height;

        //var video_width = 1280;
        var video_width = 640;
        var container_width = 800;
        var snapshot_margin = 10;
        var snapshot_width = (container_width - snapshot_margin*6)/3;
        //var snapshot_width = 1280;

        function fillSelectWithDevices(deviceInfos) {
            var value = videoSelect.value;
            $(videoSelect).empty();

            for (let i = 0; i !== deviceInfos.length; ++i) {
                var deviceInfo = deviceInfos[i];
                if (deviceInfo.kind === 'videoinput') {
                    var option = document.createElement('option');
                    option.value = deviceInfo.deviceId;
                    option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
                    videoSelect.appendChild(option);
                    if(!initialized && deviceInfo.label==='Back Camera'){
                        value = deviceInfo.deviceId;
                        initialized = true;
                    }
                }
                if (Array.prototype.slice.call(videoSelect.childNodes).some(n => n.value === value)) { 
                    videoSelect.value = value;
                }    
            }
        }

        function gotStream(stream) {
            window.stream = stream; // make stream available to console
            video.srcObject = stream;

            video.addEventListener('canplay', function(ev){

                video_height = video.videoHeight * (video_width/video.videoWidth);
                snapshot_height = video.videoHeight * (snapshot_width/video.videoWidth);

                initCanvas();

                // Firefox currently has a bug where the height can't be read from
                // the video, so we will make assumptions if this happens.

                if (isNaN(video_height)) {
                  video_height = video_width * (3/4);
                  console.log("Can't read video height. Assuming 4:3 aspect ratio");
                }

                //video_width=640;
                //video_height=480;

                video.setAttribute('width', video_width);
                video.setAttribute('height', video_height);
                canvas.setAttribute('width', video_width);
                canvas.setAttribute('height', video_height);

            }, false);


            return navigator.mediaDevices.enumerateDevices();
        }

        function handleError(error) {
            console.log('navigator.getUserMedia error: ', error);
        }

        function start() {
            if (window.stream) {
                window.stream.getTracks().forEach(track => {
                    track.stop();
                });
            }
            var videoSource = videoSelect.value;
            var constraints = {
                video: {deviceId: videoSource ? {exact: videoSource} : undefined,
                        facingMode: "environment",
                        width:1280},
                audio: false
            };
            navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(fillSelectWithDevices).catch(handleError);
        }

        videoSelect.onchange = start;
        start();

        var canvas, ctx, container;

        function initCanvas() {
          canvas = document.getElementById("myCanvas");
          ctx = canvas.getContext('2d');
          container = document.getElementById("snapshot-container");

          //Reconstitute snapshots from form URI after failed submit
          var image_list_field = $('#image-list-field'),
            URI_array = image_list_field.val().split(','),
            dataURI;
          for(var i = 0;i<URI_array.length;i++){
            if(URI_array[i]){
                dataURI = "data:image/png;base64,"+URI_array[i];
                displaySnapshot(dataURI);
            }
          }
        }


        // Capture a photo by fetching the current contents of the video
        // and drawing it into a canvas, then converting that to a PNG
        // format data URL. By drawing it on an offscreen canvas and then
        // drawing that to the screen, we can change its size and/or apply
        // other changes before drawing it.
        takeSnapshot = function() {
            alert (video_width + " " + video_height);
            ctx.drawImage(video, 0, 0, video_width, video_height);
            var data = canvas.toDataURL('image/png');
            displaySnapshot(data);
        }

        function displaySnapshot(data){
            var photo = document.createElement('img'),
                snapshot_div = document.createElement('div'),
                delete_text = document.createElement('p');

            photo.setAttribute('src', data);

            $(photo).css({"width":snapshot_width+"px"});
            $(photo).addClass("snapshot-img");
            $(snapshot_div).css({"width":snapshot_width+"px","height":snapshot_height+25+"px"});
            $(delete_text).text("Delete Photo");
            $(snapshot_div).append(photo).append(delete_text);
            $(delete_text).on('click',function(){$(this).closest('div').remove()})
            container.append(snapshot_div);
        }

        $('#approval-form-submit').on('click',function(e){
            var form = $('#approval-form'),
                image_list_field = $('#image-list-field'),
                imageURI;
            image_list_field.val("");
            $('.snapshot-img').each(function(i, d){
                imageURI = d.src.split(',')[1]+',';
                image_list_field.val(image_list_field.val()+imageURI);
            });
            form.submit();
        })