压缩视频 html5播放,将HTML5视频呈现为Canvas正在压缩图像

我正在尝试使用getUserMedia从用户的网络摄像头拍摄照片.

来自相机的图像是640×480(可能是任何尺寸,具体取决于用户的网络摄像头).

我有一个视频标签,大小为320×240与css,我即时渲染网络摄像头图像,如下所示：

var $video = $('video');

navigator.getUserMedia({ video: true }, function (stream) {

$video[0].mozSrcObject = stream;

$video[0].play();

localMediaStream = stream;

}, function () {

console.log('sadtrombone.com');

});

这很好用.

然后,即时拍照/静止帧如下：

var ctx = $canvas[0].getContext('2d');

ctx.drawImage($video[0], 0, 0, $canvas[0].width, $canvas[0].height);

这会将图像绘制到画布上,但看起来有点模糊：/

那么,如果我这样做：

$('img).attr('src', $canvas[0].toDataURL('image/png'));

这会将画布渲染为图像元素,但图像被压扁,其300×150：/

$canvas [0] .width == 300和$canvas [0] .height == 150

这是怎么回事？

更新：有趣/奇怪 – 如果我这样做：

ctx.drawImage($video[0], 0, 0, 320, 240);

我仍然最终得到一张300×150的图像,但是它的裁剪.虽然它看起来确实是来自源的正确宽高比

更新2：即使是陌生人,如果我这样做：

ctx.drawImage($video[0], 0, 0, 640, 480);

我仍然最终得到一张300×150的图像,但它的左上角是图像：'(