Skip to content

feat(video): add removeBackground prop for chroma key compositing#44

Open
caffeinum wants to merge 10 commits intomainfrom
feature/green-screen-pip
Open

feat(video): add removeBackground prop for chroma key compositing#44
caffeinum wants to merge 10 commits intomainfrom
feature/green-screen-pip

Conversation

@caffeinum
Copy link
Copy Markdown
Contributor

Summary

  • adds removeBackground prop to <Video> component for green screen / chroma key support
  • works with prompt mode only - instructs AI to generate solid color background, then removes it with ffmpeg colorkey filter
  • supports custom color, tolerance, and blend options

Usage

// simple - default green #00FF00
<Video prompt="person waving" removeBackground />

// custom options
<Video 
  prompt="presenter speaking"
  removeBackground={{ 
    color: '#00FF00',
    tolerance: 0.15,
    blend: 0.05
  }}
/>

// in pip context
<Clip>
  <Video src="background.mp4" />
  <Overlay left="70%" top="10%" width="25%">
    <Video prompt="person talking" removeBackground />
  </Overlay>
</Clip>

Changes

  • src/react/types.ts - added RemoveBackgroundOptions interface and prop
  • src/react/renderers/video.ts - prompt modification + colorkey filter application
  • src/providers/ffmpeg.ts - added applyColorKey() method
  • src/react/index.ts - exported RemoveBackgroundOptions type
  • src/react/examples/remove-background-demo.tsx - example

closes #38

adds removeBackground prop to Video component that:
- instructs AI to generate video with solid color background
- applies ffmpeg colorkey filter to remove the background

supports custom color, tolerance, and blend options for fine control.
only works with prompt mode (not src).

closes #38
moves green screen keying from standalone ffmpeg step to editly's
layer composition pipeline. adds chromaKey option to VideoLayer type.

- chromaKey filter applied during layer processing, not post-generation
- integrates with editly's overlay system for proper pip compositing
- removes redundant ffmpeg colorkey step from video.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support green screen for PiP (picture-in-picture)

1 participant