HTML5 Green Screen Technique

by Shannon Norrell

This technique makes use of an invisible <VIDEO> tag playing a video.
Each frame of video is captured and painted into a <CANVAS> tag using its "drawImage" method.
Each pixel of each frame is broken down into its (R)ed, (G)reen, (B)lue and (A)lpha components.
If a pixel is found to be green, it's alpha value is set to 0 (ie transparent).

Once a frame is processed, the newly converted frame, with green pixels now transparent, is then painted into a secondary <CANVAS> element.