Building an HTML5 green screen (Chroma key) dynamic video player

In my previous post “Creating real-time video filters with HTML 5” I discussed and demonstrated the ability to create real time video filters in HTML5, and how these can be applied dynamically to a video source. This subsequently led to a discussion around whether it would be possible to do green screen (Chroma key) in HTML5.

Green screen (Chroma key) is a technique used in film and TV production, where a scene is recorded in front of a green or blue screen. During post production the green or blue background is removed, and a different backdrop is superimposed. You would generally see this when you watch weather forecasts on TV where the presenter is standing in front of the country/region outlining the day’s weather.

The technique is not too dissimilar to creating the dynamic filters. The algorithm we developed simply took the green screen video, then removed the green screen (Chroma key) background, cleaned up the edges of the resulting image, painted a second video as the background and rendered it using the canvas tag.

Below is the demo we put together; you can also view it here.  We recorded a few backdrops, both video and static images, enabling you to change/view different backgrounds dynamically.