Manipulating Green Screen Video
The Mozilla Developer Center have posted an article about a technique Paul Rouget has created to manipulate green screen (chroma-keying) video using JavaScript, the HTML5 video tag and the canvas element.
Green Screen Video
This is done with the following steps:
- The page contains two canvas elements, with the IDs c1 and c2. Canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
- The computeFrame() method is responsible for actually fetching a frame of data and performing the chroma-keying effect. It etches a copy of the raw graphics data for the current frame of video by calling the getImageData() method on the first context. This provides raw 32-bit pixel image data we can then manipulate.
- A loop scans through the frame’s pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with a different still background image.
- Every pixel in the frame’s image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. As a result, the final image has the entire green screen area 100% transparent and the result is an overlay onto the static backdrop.
By combining the capabilities of the video element introduced in Firefox 3.1 with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
View the tutorial (requires Firefox 3.1)
Comments
YopSolo
No alpha chanel, too bad. flash video better ^^
Posted on October 31, 2010
Ricky
@YopSolo… what a fool.
Posted on July 29, 2011
jp
Third that. I love the idea of HTML5, but it’s like getting a shiny new something from IKEA and finding a whole bunch of bits are missing when you try to put it together.
Hey, where’s my alpha channel? Where’s my Webcam and Microphone input? Why can’t I hide my code so people don’t nick it? What about a visual editor? This should be in the box right? Surely? No? Oh… Back to flash then. Boo.
Posted on November 23, 2011
jp
Oh, and this doesn’t even work on Crome or Safari! HTMLfail
Posted on November 23, 2011
Michael Tempest
This is new technology guys, even flash had its downfalls in the early days, the main problem with flash nowadays is support for mobile browsers. Which is why people are trying to come up with these live methods using HTML5. If we stick to the past the industry would never move forward. It’s like saying why doesn’t it work in IE6.
However, if you were really that bothered with any of this, you would pre-record your show and then just use your video editing software to chroma key better than flash would ever do and then just use a simple html5 player. Much less browser memory usage then too.
Posted on December 12, 2011
Ricky
jp & YopSolo, the purpose of this article is not to show the power of a green screen, but the power of HTML5.. cut some slack, Opera only just started supporting WebGL but it’s still got so much potential for example…
Posted on January 19, 2012
Related demos