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

Create Mobile Websites In Minutes

Build Professional Mobile Websites

Read more about our Appcropolis Mobile Builder.

Over 50% of Internet traffic originates from smartphones and mobile devices. Use Appcropolis Mobile Builder to create your next mobile website. Save time, money, and increase your productivity.

About Our Mobile Builder →

1,000's Of Mobile Templates

Discover and download mobile templates from our Template Gallery

Start with the end in mind. Download any of our mobile templates and learn directly from the code. Save time using the Appcropolis Mobile Builder to create advance pages in just a few clicks.

Check out our Templates →

Get Updates from our Newsletter

Check out the latest news about mobile development and get notifications about new articles and templates added to the site

Stay in touch! When you subscribe to any of the Appcropolis newsletters we will send you only the information that is relevant to you. Learn out about the Appcropolis Mobile Builder and our new mobile templates.

Learn more →

Learn more about Appcropolis Mobile Builder.

' . get_option('firstvisit_successmessage') . '