Remotion Chroma Key Effect

A React component library for adding video effects in Remotion, featuring green screen (chroma key) capabilities.

Installation

npm install @anksji/remotion-chroma-key-effects

ChromaKeyEffect Component

The ChromaKeyEffect component allows you to overlay videos with chroma key effects in your Remotion compositions.

Basic Usage

import { ChromaKeyEffect } from "@anksji/remotion-chroma-key-effects";

function MyImageSequenceComponent() {
  return (
    <ChromaKeyEffect
      src="http://videourl.xyz" //green screen source video url
      startTimeInSeconds={0} //video start time
      durationInSeconds={5} //for how much time it should play
      isChromaKeyEnabled={true} //is needed to use chroma key
      isPlaying={isPlaying} //for state management play/pause
      scale={0.8} // Video scale value
      chromaKeyConfig={{
        keyColor: [0.0, 1.0, 0.0], // RGB values [0-1]
        similarity: 0.72, // Color match threshold
        smoothness: 0.7, // Edge smoothing
        spill: 0.3, // Color spill reduction
      }}
    />
  );
}

Props

Required Props

| Prop | Type | Description | | ----------- | ------- | ----------------------------------------------- | | src | string | The URL of the video to be overlaid | | isPlaying | boolean | Controls whether the video is currently playing |

Optional Props

| Prop | Type | Default | Description | | -------------------- | ------- | ---------------- | ------------------------------------------------------------------------------- | | startTimeInSeconds | number | 0 | The time in seconds at which to start playing the video | | durationInSeconds | number | undefined | The duration to play the video in seconds. If not provided, plays until the end | | loop | boolean | true | Whether the video should loop after reaching the end | | scale | number | 1 | Scale factor for the video overlay | | position | object | { x: 0, y: 0 } | Position offset for the video overlay | | isChromaKeyEnabled | boolean | false | Enables/disables chroma key effect |

Chroma Key Configuration

The chromaKeyConfig prop allows fine-tuning of the chroma key effect:

chromaKeyConfig?: {
  keyColor?: [number, number, number];  // RGB values from 0 to 1
  similarity?: number;                  // 0 to 1
  smoothness?: number;                  // 0 to 1
  spill?: number;                      // 0 to 1
}

| Parameter | Default | Description | | ------------ | ----------------- | -------------------------------------------------------------------- | | keyColor | [0.0, 1.0, 0.0] | RGB color to be removed (default is green) | | similarity | 0.4 | How close a pixel's color needs to be to the key color to be removed | | smoothness | 0.075 | Smoothness of the edges after keying | | spill | 0.3 | Amount of color spill to remove from edges |

Performance Tips

1. Set isChromaKeyEnabled to false when chroma key is not needed for better performance
2. Use appropriate video resolution to balance quality and performance
3. Consider using lower values for similarity and smoothness for better performance

Browser Support

The component requires WebGL2 support in the browser. Make sure your target browsers support this feature.

Examples

Basic Green Screen Effect

import { ChromaKeyEffect } from "@anksji/remotion-chroma-key-effects";

export const MyComposition = () => {
  const [isPlaying, setIsPlaying] = useState(true);

  return (
    <ChromaKeyEffect
      src="green-screen-video.mp4"
      isPlaying={isPlaying}
      isChromaKeyEnabled={true}
      chromaKeyConfig={{
        keyColor: [0.0, 1.0, 0.0], // Green
        similarity: 0.4,
        smoothness: 0.075,
        spill: 0.3,
      }}
    />
  );
};

Timed Video Segment

<ChromaKeyEffect
  src="green-screen-video.mp4"
  startTimeInSeconds={30}
  durationInSeconds={10}
  isPlaying={true}
  scale={1.5}
  position={{ x: 20, y: -10 }}
/>

Troubleshooting

1. If the video doesn't play, check if the src URL is accessible and the video format is supported
2. For cross-origin videos, ensure proper CORS headers are set on the video server
3. If chroma key effect isn't working, verify that WebGL2 is supported in your browser
4. For performance issues, try adjusting the video resolution or chroma key parameters

Known Limitations

1. Videos must be served with proper CORS headers
2. WebGL2 support is required for chroma key effects
3. High-resolution videos with chroma key enabled may impact performance