Creating screengrabs from HTML5 video with Canvas

Lately I’ve been playing a lot with canvas and video and see what can be done with it to do things that are tough to do to videos on your own computers. One thing I found really annoying is that it is tough to do screen grabs of videos. In the past it was impossible (before video cards allowed you to capture flash content with screenshots) and even now it is a pain.

If you offer an online video that is HTML5, it is pretty simple to use canvas to allow end users to download images of your video. I’ve written a demo that does exactly that – it takes a snapshot of a video and adds its name and time stamp to the snapshot. Users then can download the snapshot as a PNG.

screengrabs with canvas

Here’s a quick tutorial on how it is done (also available on YouTube)

You can see the code in action or fork and grab the source on GitHub.

The only annoyance is that because of security concerns (cross domain origin) you can not grab images from videos not hosted on the same servergrab frames from videos not on the same server but you are not allowed to save them out as images. In Firefox you can save a canvas as an image, but it doesn’t work cross-browser it seems.


View full post on Christian Heilmann’s blog – Wait till I come!

2 thoughts on “Creating screengrabs from HTML5 video with Canvas

  1. patrick h. lauke

    yeah, as i intimated in my comment on your youtube version of this demo, i ran afoul the same issue with my experiment http://www.splintered.co.uk/experiments/111/ – you can grab the video, but then can’t get the data back out. you’d need something like a proxy on your domain – i’ve seen this done for images (as canvas has the same limitation if you want to manipulate and then save images that aren’t from the same domain), but for video that sounds extreme and rather bandwidth-expensive.

  2. Paul

    > The only annoyance is that because of security concerns (cross domain
    origin) you can not grab images from videos not hosted on the same
    server. There will be ways around that, I’m sure.

    Yes you can. But your canvas get tainted.

Leave a Reply