JSFiddle - React, Tailwind, and code Playground

HTML

<video></video>
<canvas></canvas>

JavaScript

const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const key = [128, 128, 128];
const dist = 10;

function process(ctx) {
  let id = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (let i=0; i<id.data.length; i+=4) {
    let r = id.data[i+0];
    let g = id.data[i+1];
    let b = id.data[i+2];
    let d = Math.max(r, g, b) - Math.min(r, g, b);
    if (d < dist) { id.data[i+3] = 0; }
  }
  ctx.putImageData(id, 0, 0);
}

function frame() {
  canvas.width = video.offsetWidth;
  canvas.height = video.offsetHeight;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0);
  process(ctx);
  requestAnimationFrame(frame);
}

function show(stream) {
	video.srcObject = stream;
	video.play();
  frame();
}

navigator.mediaDevices.getUserMedia({audio:false, video:true}).then(show);