Skip to content

Chroma key a video/image/canvas element in real time using the GPU

License

Notifications You must be signed in to change notification settings

DidrikBje/gl-chromakey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ChromaGL

Chroma key a video, image or canvas element in realtime using the GPU

Requirements

Browser with (WebGL 2 support). The hasWebGL2() method is provided to test support.

API

ChromaGL(source, target): Object constructor

  • source = Source video, image or canvas element to key
  • target = Target canvas element on which to paint keyed image(s)

.hasWebGL2(): returns true if browser supports WebGL 2, else false

.source(source): Sets a new source video, image or canvas element to key.

  • source = canvas/img/video object

.target(target): Sets a new target canvas on which to paint keyed image(s).

  • target = canvas object

.key([key] [, ...keyN]): Sets one or more key configurations, replacing any previous key(s). Calling without parameters will clear all keys.

  • key = any of the following:
    • the string 'auto'
    • array of color values like [r, g, b] (single key color with default tolerance)
    • array of objects with properties:
      • color (required): the string 'auto' or an array of color values like [r, g, b]
      • tolerance: float ranged 0-1 (default=0.3)

.render(clear): Updates frame from video and paints to canvas

  • clear: true/false whether to clear the canvas first

.paint(): Re-paints current frame to canvas

License

ISC

About

Chroma key a video/image/canvas element in real time using the GPU

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%