/HTML5ChromaKey

Green screen effect with HTML5 and JavaScript

HTML5 Chroma Key

Green screen effect with HTML5 and JavaScript.

Modified from Metia Labs, Mark Mower http://www.metia.com/london/mark-mower/2012/12/building-an-html5-green-screen-(chroma-key)-dynamic-video-player/.

Use the canvas tag and JavaScript to isolate a subject by removing green pixels from a green screen video.

chroma-demo files employ a generic website template (Bootstrap) as a background. Any site interaction is currently unavailable due to the overlaid canvas, but the canvas video can be set to a timer, or tied to event handlers. View result here: http://sharon-kasper.com/sharon/chroma/chroma-test.html

chroma-video files employ a full-sized video as the background, to demo use of two videos. Background images can also be used in place of background videos.