onAirLive

Professional live video production and streaming software. A modern alternative to OBS and vMix, built with Electron, React, and TypeScript.

Features

Video Production

• Multi-source input - Cameras, screen capture, video files, images
• Preview/Program workflow - Professional A/B switching
• Canvas-based rendering - Smooth 60fps output
• Real device enumeration - Automatic camera/mic detection

Transitions

• Cut - Instant switch
• Fade - Smooth crossfade
• Wipe - Directional reveal (left/right/up/down)
• Slide - Push transition
• Zoom - Zoom in/out effect
• Customizable duration - 0.25s to 2s

Audio Mixer

• Per-channel control - Volume, pan, mute, solo
• Live VU meters - Real-time level monitoring
• Master output - Final mix control
• Web Audio API - Low-latency processing

Scenes

• Scene management - Create, rename, duplicate, delete
• F1-F12 shortcuts - Quick scene switching
• Multi-layer composition - Stack multiple sources

Streaming & Recording

• Stream to multiple destinations - YouTube, Twitch, Facebook
• Local recording - Save to WebM
• Real-time stats - Bitrate, duration, FPS

Keyboard Shortcuts

Key	Action
1-8	Send input to preview
Shift + 1-8	Send input to program
F1-F12	Select scene (preview)
Shift + F1-F12	Select scene (program)
Space / Enter / T	Execute transition
C	Cut (instant switch)
Escape	Clear preview

Tech Stack

• Electron - Cross-platform desktop app
• React 18 - UI framework
• TypeScript - Type safety
• Vite - Fast development
• Tailwind CSS - Styling
• Zustand - State management
• Web Audio API - Audio processing
• Canvas API - Video compositing

Development

# Install dependencies
npm install

# Start development
npm run dev

# In another terminal, start Electron
npm run start

# Build for production
npm run build

# Package for distribution
npm run package

Project Structure

src/
├── main/              # Electron main process
│   ├── index.ts       # App entry point
│   └── preload.ts     # Context bridge
├── renderer/          # React frontend
│   ├── components/    # UI components
│   │   ├── panels/    # Main panels (Preview, Program, etc.)
│   │   └── modals/    # Modal dialogs
│   ├── hooks/         # React hooks
│   ├── layouts/       # Layout components
│   ├── services/      # Core services
│   │   ├── audioMixer.ts
│   │   ├── mediaDevices.ts
│   │   ├── streamingService.ts
│   │   ├── transitionEngine.ts
│   │   └── videoCapture.ts
│   └── stores/        # Zustand stores
│       ├── inputStore.ts
│       ├── sceneStore.ts
│       ├── streamStore.ts
│       └── transitionStore.ts
└── shared/            # Shared types
    └── types/

Roadmap

• Video input & preview
• Canvas-based transitions
• Audio mixer with VU meters
• Streaming & recording
• Scene management
• NDI support
• Chroma key (green screen)
• Stinger transitions
• Color correction / LUTs
• Multiview output

License

UNLICENSED - Private project

---

Built with ⚡ by Anil Kumar Gurram