Greenscreen - Remotion

import {EffectsDemo} from '../components/effects-demos';

Use the colorKey() effect from @remotion/effects to remove the green background of a video.

Drag the slider below to adjust how close a pixel has to be to the key color to become transparent.

tsx

import {colorKey} from '@remotion/effects/color-key';
import {Video} from '@remotion/media';
import React from 'react';
import {AbsoluteFill} from 'remotion';

// ---cut---
export const Greenscreen: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/greenscreen.mp4"
        effects={[
          colorKey({
            similarity: 0.45,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

Requirements

colorKey() uses WebGL2. During rendering, enable WebGL via Config.setChromiumOpenGlRenderer('angle').