Creating screengrabs from HTML5 video with Canvas
Friday, July 1st, 2011 at 4:12 pmLately 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.
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.