Chroma Key - brianchirls/Seriously.js GitHub Wiki

seriously.chroma.js

Chroma keying (also called "green screen" or "blue screen") is a compositing effect where a range of colors is selected and made transparent.

Parameters

  • source (image) - image to be processed
  • screen (color) - screen color. i.e., the color to remove
    • default: Red 66/255 Green 195/255 Blue 31/255
  • weight (number) - how much of the screen color to remove from semi-transparent pixels
    • min: 0
    • max: 1
    • default: 1
  • balance (number) - it's complicated. Play with it.
    • min: 0
    • max: 1
    • default: 1
  • clipBlack (number) - The minimum resulting alpha value of keyed pixels
    • min: 0
    • max: 1
    • default: 0
  • clipWhite (number) - The maximum resulting alpha value of keyed pixels
    • min: 0
    • max: 1
    • default: 1

Notes

Chroma keying is a complicated process that depends heavily on the quality of lighting in the shot. This algorithm seems to work pretty well with well-shot footage, even properly keying shadows and reflections. But don't expect it to work well with badly-lit webcam video. Keying is based on saturation, so it's best to make sure your screen color stands out. You may see some edge spill if you have a lot of motion blur or compression artifacts.

clipBlack should be less than clipWhite. Things get weird if they're reversed, so it's best to avoid it.

Roadmap

  • Minor optimization
  • Experiment with despill on adjacent, opaque pixels

Credits and License

By Brian Chirls

Released under MIT License along with Seriously.js