gl-chromakey
Version:
Chroma key a video/image/canvas element in real time using the GPU
107 lines (106 loc) • 3.89 kB
TypeScript
type Key = 'auto' | [r: number, g: number, b: number] | {
color: [r: number, g: number, b: number] | 'auto';
/**
* Color tolerance; float ranged 0-1. Higher values result in a larger range of colors being keyed.
* @default 0.1
*/
tolerance?: number;
/**
* Edge smoothness; float ranged 0-1. Higher values result in more transparency near the key color.
* @default 0.1
*/
smoothness?: number;
/**
* Spill suppression; float ranged 0-1. Higher values result in more desaturation near the key color.
* @default 0.1
*/
spill?: number;
/**
* Enable debug visualization for the auto key color detection
* @default false
*/
debug?: boolean;
};
interface RenderOptions {
/**
* If true, skips chroma key processing and draws source frame verbatim
* @default false
*/
passthrough?: boolean;
}
type MediaElement = HTMLVideoElement | HTMLImageElement | HTMLCanvasElement;
declare class GLChromaKey {
private _gl;
private _keys;
private _media;
private _data;
private _initialized;
private _mediaTexture;
private _paintShader;
private _alphaFramebuffer;
private _downsampleCanvas;
private _downsampleContext;
private _vertexPositionBuffer;
private _vertexIndexBuffer;
private _texCoordBuffer;
private _vertexArrayObject;
private _downsampleWidth;
private _downsampleHeight;
private _hasAutoKeys;
/**
* Creates a new GLChromaKey instance
* @param source Source video, image or canvas element to key
* @param target Target canvas element on which to paint keyed image(s)
*/
constructor(source: HTMLVideoElement | HTMLImageElement | HTMLCanvasElement, target: HTMLCanvasElement | WebGL2RenderingContext);
private buildWebGlBuffers;
private setUpShaders;
private calculateDownsampleSize;
private initializeTextures;
private drawScreen;
private checkReady;
/**
* Returns true if browser supports WebGL 2, else false.
*/
supportsWebGL2(): boolean;
/**
* Sets a new source video, image or canvas element to key.
*/
source(source: MediaElement): this;
/**
* Sets a new target canvas on which to paint keyed image(s). The context webgl2 will be used.
*/
target(target: HTMLCanvasElement | WebGL2RenderingContext): this;
/**
* Returns the coordinates of a bounding box around non-transparent pixels in the form [x1, y1, x2, y2]
*/
getContentBounds(): [x1: number, y1: number, x2: number, y2: number];
/**
* Updates frame from source element and paints to target canvas
* @param options Render options object
*/
render(options?: RenderOptions): this;
/**
* Sets one or more key colors in RGB, replacing any prior settings. Calling without parameters
* clears all key colors. The auto key color mode downsamples the source image, grabs each corner
* pixel, and keys on the two pixels with the most similar color. It works best on videos or images
* with simplistic backgrounds, and can cause flickering if the algorithm gets it wrong. Use with
* caution.
*
* @param keys - One or more key configurations. Each key can be:
* - `'auto'` - Automatic color detection
* - `[r, g, b]` - RGB color array (0-255 range)
* - Object with properties:
* - `color: [r, g, b] | 'auto'` - Color to key
* - `tolerance?: number` - Color tolerance (0-1, default: 0.1)
* - `smoothness?: number` - Edge smoothness (0-1, default: 0.1)
* - `spill?: number` - Spill suppression (0-1, default: 0.1)
* - `debug?: boolean` - Enable debug visualization (default: false)
*/
key(...keys: (Key | Key[])[]): this;
/**
* Unload all shader and buffers
*/
unload(): this;
}
export default GLChromaKey;