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

http://www.barbafan.de/html5video?video=tron

 

• Play
• Pause
• Effects:
• Bw
• Outline
• Color
• Invert
• Matrix
• Old

 

• R 100%
• G 100%
• B 100%

CSS

• Top:
• Left:
• Rotate:
• RotateX:
• RotateY:
• Scale:
• ScaleX:
• ScaleY:
• SkewXY:
• SkewX:
• SkewY:

     Real-time video processing with html5 video + canvas + javascript + css.
     Warning: This demo does not care about your CPU.

     Short-URL:

FAQ: How does this work? An HTML 5 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. For discussion please see hackernews.

     Tron Video thx to DrewboiX



     Other canvas/js projects:
     Old-Spice HTML5 Video
     Tron HTML5 Video
     Color some animals [german]
     Turn any image into a "magic" coloring page
     Digital coloring pages for kids [german]






Hosted and coded by Barbafan.de, follow me on twitter @enzenhofer.