Please take a look at the following screencast on YouTube to get an idea of what the final example looks like or just take a look at the demo page.
As you can see a video is rendered and a clone is displayed with a strange swirl effect applied.
This is the example code – I have ommitted some CSS styles and stuff ..
First we're loading a video using the HTML 5 Video API. I was too lazy here to deliver multiply sources for the video element to support other browsers than Chrome but in a production scenario we definitely should do that!
The second important element is the canvas. We're using the canvas to draw and refresh a copy of the video's image data.
To manipulate this image data I am using Joel Besada's excellent JSManipulate library here that offers a lot of nice effects.
So what is happening when the video playback is started?
Of course you're free to use any of the well known web servers here.
It is indeed very easy to create your custom graphic filter – getImageData return an object containing an internal data object with an array of integers that contains the pixel's data.
The format of this array is as this .. we have four bytes for each pixel .. the first one is the red-value, the second is the green-value, the third is the blue-value and the fourth byte is for the alpha-channel..
Now it is easy to write a custom filter – let's say we just want to invert the video .. how is it done? Just substract the integer RGB value from 255 except for the alpha channel and use the new array to draw the canvas image.
Thats what the example finally looks like as screencast on YouTube or just take a look at the demo page.
This is very inspriring, thank you!
Would it be possible to save the manipulated video as a new movie file to local storage?
I think it could be possible .. but the local storage api limits to 5mb in most modern browsers afaik (http://diveintohtml5.info/storage.html#limitations).