Posted by on 2012-03-24

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!

Remember to allow the browser to use your camera though.

More posts

Everyday3D is a blog by Bartek Drozdz

The blog is about web development and realtime 3d graphics. Started in 2007, first it focused on Flash (remember?) then Unity3d, WebGL and eventually - Virtual Reality and 360 photography. In 2016, Bartek co-founded Kuula - a virtual tour software - where he works currently.