Using HTML5 Canvas to capture frames from a video

HTML5 has some interesting capability that allows extracting individual frames from a video source and draw it on a canvas element. The following example quickly shows how to capture a frame from a video and attach it to the DOM as an HTML5 canvas. To run this example please use FireFox 3.5 or a WebKit based browser.

Once you have captured an image click on it to see the base64 encoded version on a separate window.

Javascript code:

HTML code:


What do you think of this post?

Tags: , , , , , ,

7 Responses to “Using HTML5 Canvas to capture frames from a video”

  1. Matijs March 5, 2013 at 5:36 pm #

    Can you show us some code on how to save the image to a folder on the website ?

    • sanraul March 11, 2013 at 9:03 pm #

      Saving the image in the server sounds like a good idea for another article.


      • Matijs March 13, 2013 at 4:55 pm #

        Maybe when you make that new article, could you reply it here ?

  2. sanraul March 13, 2013 at 8:45 pm #


  3. Miguel May 9, 2013 at 10:03 am #

    This is exactly what i needed..
    I just wish i could save the image on a file in the server :\


  1. Using HTML5 Canvas to capture frames from a video | Sharp as a Tack - February 23, 2012

    [...] could see this becoming a popular plugin for people to screen capture video.  The code is provided here demonstrating how to do it. This entry was posted in Code, HTML5 by TheCaddy. Bookmark the [...]

Leave a Reply