Making images from <video>

Some time ago I talked about the popcorn-js project I am working on. If you haven’t heard about it read this. To further my experimentation with the HTML5 tag I decided to make a thumbnail demo. Well I use the word thumbnail very loosely since the term actually refers to small preview images and I am generating big images (for now anyways).

The purpose of the demo is simple: generate images from a preexisting video.  Not sure if this functionality is going to be useful for popcorn-js but we will let the audience decide. I have two visions for this demo. The first one is allowing the user to specify how frequently ( in seconds ) the images should be created. The second one is allowing the user to seek or jump to the position of the video from which they want the image to be generated. Now in a perfect world the images would either get displayed as thumbnails on the page or get saved to the user’s computer. I am still researching on whether or not this perfect world exists.

Currently, my code does the following:

  • plays a video
  • i use the video’s onTimeUpdate() to calculate where the video is and to check if it’s at the point I need it to be
  • when the video gets to a particular spot i pause the video and do a drawImage(video, 0, 0, video.width, video.height); to a preexisting canvas element
  • then i create and insert a whose src = the canvases toDataURL(“image/jpeg”)
  • start the process again

There is a lot of issues with this approach but right now I am more concentrated about getting it to work. One major problem with the toDataURL() function. It is throwing a security error: Security error” code: “1000 Doing some researching I found out that the content used in the demo has to be on the same domain. This kind of threw me because the canvas i was using to do a drawImage() is on the domain and it does show the appropriate image from the video. The error shows up when i try to do a toDataURL() on that canvas and assign it to an .  Struggling with this for some time i realized that the problem is my actual because the src of the video is a url and not a local file 😦 I am guessing that there is some type of weird linking going on when i drawImage() from the video onto the canvas.  This is a bummer since I want the demo to eventually go into the popcorn-js repo and having video/binary files in a repo is a no-no.

Since the code is not pretty enough to show here is an image view. I will post a link soon.

<video> thumbnail demo

View all of my blogs on popcorn-js
View all of my blogs

3 thoughts on “Making images from <video>

  1. No sure to get it.

    You want to drawImage a video which is not in the same domain? Like you said, no way (security policy). For local job, don’t forget to setup security.fileuri.strict_origin_policy to “true” (about:config).
    Maybe you want to consider -moz-element, not sure it can help.

    What the purpose of thumbnailing the video?

    Also, we should talk, because I’m working on a video uploader (transcoding to webm) based on ffmpeg, and I can create thumbnails.

  2. This is an interesting problem. I think you would have to set up a proxy server to do this, using something like Apache to redirect one URL to another using something like lib curl in PHP?

    The other thing you might be able to try is to use iframes and set the domain policy as mentioned here:

    Also, webSockert? Node.js? There are probably some doors you can open if you want to get your hands dirty with the server environment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s