Chroma Key video effect in a web page using WebGL. This is deprecated. Use Seriously.js instead.
MIT License
Chroma Key video effect in a web page.
Two modes:
chroma
: keys out pixels based on color within euclidean distance from target colorpre
: video frame is split in half, containing source image (usually top half) and an alpha mask (usually bottom half). Eventually will support up to three alpha masks (one in each color channel).ChromaGL requires a browser with WebGL (Chrome 9+, Firefox 4+, Safari nightly or Opera 11 for Windows).
The method hasWebGL()
is provided to test whether browser supports WebGL. If not, constructor will throw an error unless errorCallback
function is provided in options.
For a video with a green background, on a page with one <video>
element and one <canvas>
window.addEventListener('load',function() {
var chroma = new ChromaGL('video', 'canvas');
chroma.addChromaKey('green');
chroma.go();
}, false);
ChromaGL(source, target, options)
: Object constructor
clip
= object containing x
, y
, width
and height
representing clipping area (all parameters are 0 to 1, as factor of full image dimensions)alpha
= object containing x
, y
, width
and height
representing part of image containing alpha masksource
= object containing x
, y
, width
and height
representing part of image containing source to be keyed (for use with alpha)errorCallback
: callback function to be called in case of error.hasWebGL()
: returns true if browser supports WebGL, else false
.source(source)
: Set source containing video or image to key. Can be changed after object creation.
.target(target)
: Set target canvas on which to paint keyed image. Can be changed after object creation.
.addChromaKey(keys, channel)
: add one or more chroma key configurations. returns array of key id's, in case you want to remove them later
mode
(required): 'pre' for pre-computed or 'chroma' for color-basedcolor
(required): 'blue' or 'green' or array of 3 numbers (chroma mode only)threshold
: Euclidean distance cutoff (chroma mode only)fuzzy
: float >= 1.0, multiple of threshold as outer limit of feathering (chroma mode only)source
: which channel contains alpha mask. 0 = red, 1 = blue, 2 = green (pre mode only)channel
: select an output channel (overrides channel
parameter to method).removeChromaKey(id)
.setThreshold(id, threshold, fuzzy)
: Change chroma key parameters for distance threshold
.go(frameRate, play)
: Start a draw loop that updates and paints keyed image to canvas for every frame
.stop(pause)
: Stop draw loop
.refresh(clear, noThrottle)
: Update frame from video and paint to canvas
.paint()
: Paints current video frame to target canvas
.draw(image, target, channel, invert)
: Not implemented yet. Will allow painting of images to canvas using partial alpha masks from different channels
draw()
getImageData