CODEWITHSUNDEEP
javascripthtmlvideohtml5-canvaschromakey
Programmer123
Programmer123

Reputation: 41

How to remove green background of a video, making it transparent?

I have a video with a green background. I want to remove this green section (Chroma key), making it transparent, and then display the video over the website background.

I can only find complex code that uses images.

Upvotes: 4

Views: 8491

Answers (1)

markE
markE

Reputation: 105015

Starting information: The video element can be an image source for html5 canvas. That means a frame of video can be drawn onto (and manipulated by) the canvas.

Overview: The context.getImageData method will get the canvas' RGBA pixel data in an array. After modifying the array's pixel data, context.putImageData will put the modified pixels back onto the canvas.

A Plan Use CSS to position an html5 canvas over the site background. Use that canvas to draw video frames over the site (with greenish video pixels made transparent so the site background shows through).

(some assembly & learning required on your part):

Position an html5 canvas element covering the website background.

Inside a time loop (requestAnimationFrame):

  1. Clear the canvas: context.clearRect,
  2. Draw a video frame onto the canvas: context.drawImage(video,0,0),
  3. Get the pixel data from the canvas: context.getImageData,
  4. Check each pixel for "green-ish-ness": if(green>220 && red<20 && blue<20),
  5. If a pixel is greenish, make it transparent: (alpha=0),
  6. Put the modified pixels back onto the canvas: context.putImageData,
  7. Repeat at #1 until the video finishes.

References to help with your learning

Stackoverflow prior post regarding #2: Put the video tag on the Canvas tag

Stackoverflow prior post regarding #3-6: Looping through pixels in an image

Upvotes: 1

Related Questions