Real-time video processing with HTML5

Real-time video processing with html5 video + canvas + javascript + css.

How does this work? An HTML5 video gets rendered (every 33 milliseconds == 30 frames per second) into a (hidden) canvas element, the pixel information of that canvas is fetched and transformed via javascript and written into the output canvas you see above. the javascript transformation is controlled via the effects, the CSS values can be changed with the range controllers on the right hand side.

See the demo after the jump

Warning: This demo does not care about your CPU.
Tron: Real-time HTML5 Video