StreamForge Studio is a production-minded, browser-based composition and recording workspace. It brings an OBS-inspired desktop workflow to the web while keeping projects, capture streams, uploaded media, and recordings on the user's device.
- OBS-style workspace with compact menus, preview, source controls, resizable docks, and status telemetry
- Multiple scenes with ordered, visible, lockable sources
- Display, webcam, microphone, image, video, text, browser, color, audio, and group sources
- Live Canvas 2D composition with selection, dragging, snapping, resizing, rotation, opacity, and crop controls
- Vertical Web Audio mixer with per-source gain, meters, mute controls, and mixed recording audio
- Local WebM recording with pause/resume and feature-detected codecs
- Studio Mode with independent Preview and Program scene state
- IndexedDB autosave, versioned migrations, validated JSON import/export, and undo/redo history
- Persisted, hideable, resizable dock layout
- Hydration-safe browser capability reporting and accessible dialogs and controls
Requirements: Node.js 20.9+ and a recent desktop Chrome or Edge browser.
git clone https://github.com/VivaanRajpurohit/Volunteer-Hour-Tracking-app.git
cd Volunteer-Hour-Tracking-app
npm install
npm run devOpen http://localhost:3000 at a viewport of at least 1280x720.
npm run typecheck
npm run lint
npm test
npm run build
npm run test:e2eThe GitHub Actions workflow runs the same checks for pushes and pull requests.
src/components/studio React shell, docks, dialogs, and canvas interactions
src/store Zustand project state and bounded history
src/engine/compositor Canvas 2D render loop
src/engine/media MediaDevices, runtime registry, and Web Audio graph
src/engine/recording MediaRecorder lifecycle and codec detection
src/engine/persistence IndexedDB repository and project migrations
The serializable project model is deliberately separate from runtime browser media objects. The compositor reads the latest store state without pushing video frames through React. See ARCHITECTURE.md for the full design.
StreamForge does not upload captured content. Browser permission prompts are always user initiated, and removing or exiting a project stops media tracks and revokes object URLs.
System-audio availability, recording codecs, and browser-source embedding vary by platform and browser. Direct RTMP credentials are intentionally unsupported; production streaming should use authenticated WebRTC ingest and a server-side media gateway. See BROWSER_SUPPORT.md.
Contributions are welcome. Read CONTRIBUTING.md and run the complete quality suite before opening a pull request.