How to remove green background from video?

[SandhyaSharmaaa]

I am trying to implement heygen react SDK, is there any option to remove green background from the avatar streaming Here is my code to start the streaming session: await avatar.current.createStartAvatar( { newSessionRequest: { quality: "low", avatarName: avatarId, voice: { voiceId: voiceId }, }, }, setDebug ); I tried the options given here, but none of them works: https://docs.heygen.com/docs/customize-video-background

[Yashism]

Nothing yet. Just follow this discussion I guess.

Discussion 7

[24samj]

Yes, use a canvas to paint the video stream to and use a chroma-key function to remove the green background. You can code it as follows:

`useEffect(() => { const ctx = canvasRef.current.getContext("2d", { willReadFrequently: true, });

const renderFrame = () => {
  // Set the canvas dimensions to match the video's natural dimensions
  if (canvasRef.current && videoRef.current) {
    canvasRef.current.width = videoRef.current.videoWidth;
    canvasRef.current.height = videoRef.current.videoHeight;
  }

  ctx.drawImage(
    videoRef.current,
    0,
    0,
    canvasRef.current.width,
    canvasRef.current.height
  );
  let frame = ctx.getImageData(
    0,
    0,
    canvasRef.current.width,
    canvasRef.current.height
  );
  let l = frame.data.length / 4;

  for (let i = 0; i < l; i++) {
    let r = frame.data[i * 4 + 0];
    let g = frame.data[i * 4 + 1];
    let b = frame.data[i * 4 + 2];

    if (g > 90 && r < 90 && b < 90) {
      // adjust this condition to match your green color
      frame.data[i * 4 + 3] = 0;
    }
  }
  ctx.putImageData(frame, 0, 0);
  requestAnimationFrame(renderFrame);
};
videoRef.current.addEventListener("loadedmetadata", () => {
  // Metadata has loaded, now we can render the frame
  renderFrame();
});

}, [videoRef, canvasRef]);`