Chroma key#

Chroma keying — also called "green screen" — removes a uniform background colour from a video so you can composite the foreground over another scene. JSON2Video supports chroma keying directly on video elements.

When to use chroma key#

• An on-camera presenter shot against a green or blue background.
• AI-generated talking-head clips that come with a removable backdrop.
• Stock footage of objects or VFX shot for compositing.

If the source video already has an alpha channel (e.g. WebM with transparency, or ProRes 4444), you do not need chroma key — just stack it as a regular video element.

Configuring chroma key#

Add a chroma-key object to the video element:

{
  "resolution": "full-hd",
  "scenes": [
    {
      "elements": [
        { "type": "image", "src": "https://example.com/backdrop.jpg" },
        {
          "type": "video",
          "src": "https://example.com/presenter-greenscreen.mp4",
          "chroma-key": {
            "color": "#00B140",
            "similarity": 0.4,
            "blend": 0.1
          }
        }
      ]
    }
  ]
}

The properties:

• color — the colour to remove. Use a hex value matched to your source footage. Common chroma green is #00B140; chroma blue is #0047AB.
• similarity — how aggressive the removal is. 0.0 is exact match, higher values catch more of the background but risk biting into the subject. Start at 0.3-0.4.
• blend — how soft the edge is between kept and removed pixels. Higher values produce a smoother edge but can introduce a colour halo. Start at 0.1.

Tips for a clean key#

• Use video shot with even, flat lighting on the backdrop. Shadows and wrinkles cause uneven colour and ragged edges.
• Avoid reflective surfaces (glasses, glossy hair products) — they pick up the backdrop colour.
• If you control the shoot, prefer chroma blue when the subject has green tones in their wardrobe or skin.
• Test similarity in small increments (0.05). The sweet spot is narrow.

See also#

• Video element reference
• Tutorial 2 — Images, videos & audios