Capture video screenshot using canvas

Question

I used getusermedia() to stream webcam and microphone to browser. But when captured video using canvas it outputs a black image! ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); why its showing a black image and how to fix it? Ingmars solved mah problem.

Now if i want a max 10sec video i thought of looping through frames and joining the .png one after another. Is it possible? If not any alternative?

Answer 1

You need a loop:

//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 );
}

Bear in mind that jpeg compression is not supported in all browsers, so for testing I'd suggest using png format:

canvas.toDataURL( 'image/png' );