Real time video processing in javascript
March 3rd, 2009 · 3 Comments
2 weeks ago I discovered the Adobe Pixel bender Air application: I thought it was really impressive, and that it was cool that you could use it from Javascript through Flash 10, but I was yearning for an open web equivalent and thought it would take a while before we could do that on top of the html5 video tag.
That’s what i love about this period: the openweb is moving really fast these days. Little did I know that this capability was already present in the Firefox 3.1 beta browser I am using daily. Paul Rouget created a sample showing how today, you can extract the images from a video into a canvas element, from where you can manipulate them.
I spent the evening having fun adding various filters to his sample. See the new sample there. We’re living interesting times!
Caveat: video tag support in Mozilla works only with ogg theora encoded videos.
Tags: air, firefox, flash, html5, openweb, video
3 responses so far ↓
1 Paul // Mar 3, 2009 at 2:21 pm
Wow, good stuff 🙂
2 bryan // Mar 4, 2009 at 5:30 pm
Hey, super cool. Do you think it could use a script that swaps the background image? Then it could be used for independent news casts or low budget infomercials/advertising without the need for a real production studio. Your example even makes me think people could use it to make animated characters and use the canvas to make live characters become digitalized. It’s packed with possibilities.
I have a question. I can’t get the script to run locally. I get error code about security. Is there some setting I need to allow to use it? Yours and the script’s original both run for me. I don’t get it.
Is there something I need to do to allow xhtml on my machine?
Thanks for sharing this
3 pushrom // Mar 9, 2009 at 10:52 pm
This works even with FF 3.0 as shown here: http://hackaday.com/2009/03/07/remote-image-processing-in-javascript/
Leave a Comment