Chroma Key

Remove green or blue screen backgrounds from videos in real time. Set chromaKey: true for zero-config green screen removal — no color values to configure. The subject renders over a transparent background.

Live preview

chromaKey: true

press run →

Green screen pixels are removed — subject renders over a transparent background.

{ chromaKey: true }

without chromaKey

press run →

Green background renders as-is — no keying applied.

Usage

chroma-key.ts

import { asciifyVideo } from 'asciify-engine';

// Zero-config green screen — heuristic, works on any shade of green
asciifyVideo('/greenscreen.mp4', canvas, {
  options: { chromaKey: true },
});

// Blue screen
asciifyVideo('/bluescreen.mp4', canvas, {
  options: { chromaKey: 'blue-screen' },
});

// Custom color — any CSS string
asciifyVideo('/clip.mp4', canvas, {
  options: {
    chromaKey: '#00b140',
    chromaKeyTolerance: 80, // Euclidean distance, default 60
  },
});

// Custom color as RGB object
asciifyVideo('/clip.mp4', canvas, {
  options: {
    chromaKey: { r: 0, g: 177, b: 64 },
    chromaKeyTolerance: 80,
  },
});

How it works

Each pixel is evaluated per frame before the character is chosen:

chromaKey: true

Heuristic: green channel dominant — g > r × 1.4 and g > b × 1.4 and g > 80. Shade-agnostic, works on lime, chroma, broadcast green, etc.

chromaKey: 'blue-screen'

Symmetric heuristic for blue: b > r × 1.4 and b > g × 1.4 and b > 80.

chromaKey: "#hex" | {r,g,b}

Keyed by Euclidean RGB distance from the reference color. Pixels within chromaKeyTolerance radius are removed.

chromaKey: null / false

Disabled (default).

Options reference

options: {
  chromaKey?: true | 'blue-screen' | string | { r: number; g: number; b: number } | null;
  chromaKeyTolerance?: number; // Euclidean RGB distance — default: 60
}