Javascript JS直接从视频流中获取图像作为数据url

如何直接从视频捕获到javascript中的数据url？我希望将图像显示为调整大小的版本，但保留完整大小的图像。那么，我该怎么做呢

var PhotoBooth = {
    onMediaStream: function(stream) {
        PhotoBooth.canvas = $('canvas')[0];
        PhotoBooth.context = PhotoBooth.canvas.getContext('2d');

        PhotoBooth.localVideo = $('video')[0];
        PhotoBooth.localVideo.src = window.URL.createObjectURL(stream);
    },
    noStream: function() {
        console.log('FAIL TO GET WEBCAM ACCESS');
    }
};

getUserMedia(
    {video: true},
    PhotoBooth.onMediaStream,
    PhotoBooth.noStream
);

这是我当前保存图像以供上传的方式：

PhotoBooth.context.drawImage(PhotoBooth.localVideo, 0, 0, 200, 150);
$('#preview').show();

然后我检索保存的图像，如下所示：

var dataUrl = PhotoBooth.canvas.toDataURL();

---

我希望保持画布的默认大小不变，但保留实际数据。基本上，我希望画布显示重新调整大小的版本，但保留完整大小的版本。

此处，

canvas

保留原始的640x480快照（用于Chrome）：

var start=（）=>navigator.mediaDevices.getUserMedia（{video:true}）
.then（stream=>video.srcObject=stream）
.渔获物（原木）；
var canvas=document.createElement（“canvas”）；
画布宽度=640；
canvas.height=480；
var snap=（）=>{
canvas.getContext（'2d'）.drawImage（视频，0,060480）；
preview.getContext（'2d'）.drawImage（画布，0,0,160,120）；
}
var log=msg=>div.innerHTML+=“
”+msg
开始！
断裂