dechroma.js

Chroma key compositing (e.g., green screen) for HTML canvas-manipulated video, using ImageData.

Install

$ npm i dechroma
# or
$ yarn add dechroma
# or
$ pnpm add dechroma

Example

import { dechroma } from 'dechroma';

...

const video = document.querySelector('video');
const c = document.querySelector('canvas');
const ctx = c.getContext('2d');

...

video.addEventListener('play', drawVideo);

function drawVideo() {
  ctx.drawImage(video, 0, 0, width, height);
  const frame = ctx.getImageData(0, 0, width, height);

  // Remove green screen
  dechroma(frame, [0, 100], [170, 255], [0, 110]);

  ctx.putImageData(frame, 0, 0);
  requestAnimationFrame(drawVideo);
}

License

Licensed under the MIT License.