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.