将视频捕获大小调整为画布

Question

我已经看了很多类似的问题，并尝试实施这些解决方案，但我仍然遇到同样的问题，我认为主要是因为我有一个额外的并发症（事实上我的理解图像处理是有限的。）

以下情况：在网络应用中，我有一个网络摄像头图片捕获（使用getUserMedia）。显示Feed的<video>元素以及<canvas>的大小默认为640像素宽。这在桌面浏览器上运行良好。

在屏幕宽度低于700像素的设备上，网站会响应所有内容，包括图片捕获对话框，其大小调整为屏幕宽度的95％，因此<video>元素显示相机输入小于640像素宽度大部分时间（这是重要的时间）。视频输入显示正常，您可以看到整个摄像机字段。但是每拍一张照片，都会根据屏幕的大小显示在画布上（其大小与视频输入相同）。也就是说，画布显示尽可能多的原始图像，尽可能宽640像素。

我不想调整实际图像的大小;我希望在一天结束时上传的数据是640px图像，无论屏幕宽度如何。我只是希望用户能够在他/她保存之前看到整个事情。

我已经尝试在画布上使用width属性（元素属性，而不是CSS），但这没有做任何事情，更改视频显示的width会缩小实际图像，这不是我想要的。

我还使用了drawImage方法来调整大小，但我无法得到我想要的东西。这是我认为应该工作的线，但仍然给我一个剪裁的图像：

if($(window).width()<701){
var ratio = videoHeight/videoWidth;
  var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
  context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}

更新

以下代码将在画布上显示整个图片，但缩小它，我会得到一个小得多的图像文件，具体取决于它所采用的屏幕宽度：

context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);

非常感谢！