HTML5 Live Webcam Green Screen

I love how much standardized functionality is coming with HTML5 and I keep playing with the new features when they come out. Most recently I’ve been playing with the in-browser webcam stream.

In this demonstation, I’m swapping out a green background for a beach scene. It’s the same kind of thing that weather men do, standing in front of a green screen with the weather video superimposed wherever the color green is found.

As with any green screen effect, having a consistant background and good lighting is crucial. You’ll see that this example is far from perfect but it’s a good proof of concept to show what the browser is capable of.

The code required to access the webcam and modify the background is just pure HTML5 and Javascript. No flash or other plugins. Thanks to navigator.getUserMedia !

Try it out for yourself with my html5 greenscreen demo page and feel free to grab the source code and have a play. (Use Opera 12+ for the demo, stand in front of a green background and then click on the live stream to initiate ‘green screen mode’.)

The demo could easily be setup to run in Chrome instead of Opera but it works out of the box with Opera whereas some Chrome users would have to change some settings.

Leave a Reply