Everyday3d
Posted 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.

Back
More posts

Everyday3D is a blog by Bartek Drozdz

I started Everyday3d in 2007 with a focus web development. Over the years, I wrote about technology, graphics programming, Virtual Reality and 360 photography. In 2016, I co-founded Kuula - a virtual tour software and I work on it ever since.

Recently, I post about my travels and other topics that I am curious about. If you want to be notified about future posts, subscribe via Substack below.