HTML5 video screenshot

Question

I'm trying to take a screenshot of video with predefined time in the movie. So I tried it with the canvas element. The thing is that the video must be playing when you draw the image of the video, 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 probably can imagine, the video pauses before the canvas is done drawing, resulting in no screenshot. So is there a callback function for drawImage? In my case, the drawing process takes about 50ms, but it doesn't feel safe to do:

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

Answer 1

Rather than pausing you could try setting the video's playbackrate to something very low (or zero if that works?):

video.playbackRate = 0.0001; // or 0

This will effectively pause the video for you.

You could also set the canvas to black, tranparency 0.99 and then scan the resulting image in your 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 last method the video must be from the same domain as the script, and will not work on local files because of security constraints.

Answer 2

I'm not sure this is what you're after, but have you tried taking the screenshot manually using MWSnap ? It freezes the screen while you are taking the screenshot so I guess it might work for you.

Answer 3

Hm...it seems like it actually is possible to draw an image from a paused video. Just keep the interval going from the beginning.