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)
Related demos