Skip to content

Latest commit

 

History

History
95 lines (63 loc) · 2.54 KB

README.md

File metadata and controls

95 lines (63 loc) · 2.54 KB
Raw

LiveCompositor TypeScript demos

demos.mp4

Technical requirements

  • FFmpeg (FFmpeg6 on Linux, FFmpeg 7 on macOS)
  • GStreamer
  • NodeJS + NPM

Before running demos, install JS dependencies with:

npm install

LiveCompositor should run on any computer with modern GPU, but if you want to check detailed requirements, visit requirements section in docs.

MacOS installation guide

  1. Install FFmpeg 7
brew install ffmpeg
  1. Install GStreamer
  • Go to GStreamer website, download and open runtime installers (we tested 1.24 release, but should work on the others as well).
  • Check if directory /Library/Frameworks/GStreamer.framework/Commands/ exists.
  • Add /Library/Frameworks/GStreamer.framework/Commands/ to PATH. If you're using zshrc add: export PATH="$PATH:/Library/Frameworks/GStreamer.framework/Commands" to ~/.zshrc
  1. Install node
brew install node
  1. Install JS dependencies
npm install

Demos

1. Video Conferencing

Run this example with:

npm run 1-videoconferencing

This example simulates composing video conference footage. It demonstrates how you can change output dynamically with smooth transitions.

This example will use your webcam. If you have problems with webcam footage, you can substitute it with prerecorded mp4 file:

export LIVE_COMPOSITOR_WEBCAM=false

2. TV Broadcast

Run this example with:

npm run 2-tv_broadcast

This example simulates TV broadcasting scenario. It demonstrates how you can combine built-in components with own shaders, customizing LiveCompositor for specific use-case, while utilizing GPU rendering acceleration. In this example, green-screen is removed from input stream with use of custom shader. Transformed input stream, background image, logo, and text are combined in output stream.

3. Live stream

Run this example with:

npm run 3-live_stream

This example simulates live-streaming screen footage with webcam. It demonstrates how to set up simple output and add elements like donate notifications.

This example will use your webcam. If you have problems with webcam footage, you can substitute it with prerecorded mp4 file:

export LIVE_COMPOSITOR_WEBCAM=false

Learn more

You can learn more from documentation. API reference and guides can be found there.