Skip to main content

Chromakey

Chroma key, commonly known as green screen, is a technique that replaces a specific color in a video with a different background image or video, enabling seamless integration of diverse environments.

Shotstack allows you to set chroma key values programmatically, which helps automate background replacement and speeds up your video production process.

Using chroma key

You can apply chroma key to your video assets by adding the chromaKey property to the asset.

You can specify the color you want to replace and adjust the threshold and halo settings to ensure effective background replacement.

  • Color: The chroma key color as a hex value. For a green screen, use a green hex value.
  • Threshold: Pixels within this distance from the key color are eliminated by setting their alpha values to zero.
  • Halo: Pixels within the halo distance from the threshold boundary are given an increasing alpha value based on their distance from the threshold.
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.amazonaws.com/footage/avatar-chromakey.mp4",
"chromaKey": {
"color": "#24d590",
"threshold": 150,
"halo": 100
}
},
"length": 7.2,
"start": 0
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3.amazonaws.com/images/waterfall-square.jpg"
},
"length": "end",
"start": 0
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 576,
"height": 576
}
}
}