User stream (Webcam) + WebGL
HTML5 is full of surprises these days! I had no clue that there are browsers out there that already support user stream (i.e. webcam). This was always something missing in HTML5 compared to what Flash could do.
Fortunately, Kevin Sweeney posted a great article on Creative.js on that subject. After reading this I thought that there must be a way to use the webcam image as texture in WebGL. And there is! :)
To run the demo above you will need Chrome Canary with MediaStream flag enabled (detailed instructions can be found here). I was also able to run this demo in Opera Labs Camera build, which you can grab here. In both cases the performance was great!
Update October 2022
To run the original demos, you no longer need a special version of the browser. It runs fine in all browsers (Chrome, Firefox, Edge, Safari...), so click on one of the links above and enjoy!
- TV glitch / noise effect - move your mouse around to change effect intensity
- Matrix effect - sit back and relax, it's not interactive ;)
Remember to allow the browser to use your camera though.