рендеринг HTML5 Видео на холст сжимает изображение

Question

Я пытаюсь сделать снимок с веб-камеры пользователя с помощью getUserMedia.

Изображение с камеры 640x480 (предположительно, может быть любого размера, в зависимости от веб-камеры пользователя).

Ive получил тег видео, размером до 320x240 с 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')); 

это делает холст к элементу изображения, но изображение сжато, его 300x150:/

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

Что происходит?

Update: Интересно/странно - если я делаю это вместо:

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

я до сих пор в конечном итоге с 300x150 изображения, но обрезаны. Хотя это, кажется, правильное соотношение сторон от источника

Update 2: еще страннее, если я это сделать:

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

я до сих пор в конечном итоге с 300x150 изображения, но его верхней левая четверть изображения:. (

Answer 1

Казалось бы проклейки холст с КСС не достаточно Вы должны сделать:

canvas.width = 320; 
canvas.height = 240; 

затем

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

работы corretly

Answer 2

Высота холста и ширина может быть установлена ​​с высотой и шириной видео.

$canvas[0].height = $video[0].videoHeight; 
$canvas[0].width = $video[0].videoWidth;