Added Chroma Key Effects Component with RGB Color Selection

[anksji]

Fixes #4841

Overview

A lightweight, performant chroma key component for Remotion that enables video transparency with configurable RGB color removal.

Implementation

Location: packages/effects/src/ChromaKeyEffect.ts

Technical Details

• Pure WebGL2 implementation using GLSL ES 3.00
• Optimized shader with single-pass chroma keying
• Efficient texture sampling and blending
• Minimal WebGL state changes
• Memory-efficient vertex buffer handling
• Typescript support with full type definitions

Features

<ChromaKeyEffect
          src={videosource} //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
          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
          }}
        />

Performance

• Real-time processing optimization
• Minimal GPU memory usage
• Efficient shader compilation

Testing

Published package for review: @stackops/remotion-chroma-key-effects

Documentation and examples included. Happy to make any adjustments based on feedback.

@JonnyBurger Thanks for the feedback! I understand the concerns.
Let me know if you need any clarification or changes to better align with Remotion's standards.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bugs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2025 3:17pm
remotion	❌ Failed (Inspect)			Feb 13, 2025 3:17pm

[anksji]

@JonnyBurger
Thank you for addressing the previous feedback by creating a more focused PR! I've streamlined the implementation to include only the essential library-related code, which should align better with remotion's codebase structure. The changes are now more targeted and maintainable. Please let me know your thoughts.

Looking forward to contributing more to remotion!
Happy Coding :)

[JonnyBurger]

Thanks a lot!

This seems to be an example Vite app, not a package that people would install to use in their own app.
For this reason, I think this would be more valuable either in the docs, or as a standalone repository.

Do you agree and would you also be willing to help converting it?

[hunxjunedo]

@JonnyBurger I'd be happy to carry this forward, if it's still relevant.

[JonnyBurger]

@hunxjunedo Thanks for offering your help!

The current state is not polished enough to ship it as a new package (It is a Vite app), but it is good enough to serve as an example.

If we can host it somewhere as a standalone GitHub repo, or add it to the docs, that'd be a great stride!