HTML5 screenshot

Question

I am trying to take a screenshot of a predefined time in a movie. So I tried it with the canvas element. The thing is, the video should play when you draw the video image, but I need the image to still be paused. So I tried this:

video.play(); context.drawImage(video,0,0,canvas.width,canvas.height); video.pause(); 

But, as you can probably imagine, the video pauses before the canvas is made a drawing, which leads to a screenshot. So, is there a callback function for drawImage? In my case, the drawing process takes about 50 ms, but it does not feel safe:

 setTimeout(function() { video.pause(); }, 50); 

Answer 1

Hm ... it looks like you can actually make an image from a paused video. Just keep the spacing at the beginning.

Answer 2

Instead of a pause, you can try setting the video playback speed to something very low (or zero if that works?):

 video.playbackRate = 0.0001; // or 0 

This will effectively pause the video for you.

You can also set the canvas to black, transparency 0.99, and then scan the resulting image in timeout for a non-black pixel:

 setTimeout(function() { pixel = context.getImageData(image.width/2, image.height/2, 1, 1); // do something with the pixel, kick off another timeout if it is still has transparency }, 50); 

When using the latter method, the video must be from the same domain as the script, and will not work with local files due to security restrictions.

Answer 3

I'm not sure if this is what you need, but did you try to take a screen shot manually using MWSnap ? It freezes the screen while taking a screenshot, so I think it might work for you.