Захват видео скриншота с использованием холста

Question

Я использовал getusermedia(), чтобы передать веб-камеру и микрофон в браузер. Но при захвате видео с помощью холста он выводит черное изображение! ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); Почему его отображение черного изображения и как его исправить? Ингмарс решил проблему мага.

Теперь, если я хочу видео с максимальным 10 секунд, я думал о том, чтобы перебирать кадры и присоединяться к .png один за другим. Является ли это возможным? Если у вас нет альтернативы?

Answer 1

Вам нужен цикл:

//assuming canvas, ctx and video is set previously and available in all scopes. 

var fps = 1000/25; //Approximately 25 frames per second 

var videoDrawInterval = setInterval(function() { 
    ctx.drawImage(video, 0, 0, 640, 480); 
}, fps); 


something.onclick = function() { 
    clearInterval(videoDrawInterval); 

    var snapshotImg = new Image(); 
    snapshotImg.src = canvas.toDataURL('image/jpeg', 0.5); //Second param is jpg quality 

    var win = window.open('', 'Snapshot', 'width=640, height=480' ); 
    win.document.body.appendChild(snapshotImg); 
} 

Имейте в виду, что сжатие JPEG не поддерживается во всех браузерах, поэтому для тестирования я предлагаю использовать PNG формат:

canvas.toDataURL('image/png');