$ show siddharthvaddem/openscreen
OpenScreen is a feature-rich, open-source desktop screen recording and video editing application built with Electron, React, and Pixi.js. It serves as a free alternative to Screen Studio, offering native screen capture on Windows (via Windows Graphics Capture, DirectShow, and WASAPI) and macOS (via ScreenCaptureKit and AVFoundation), with a browser-based fallback using getDisplayMedia. The application provides a complete post-production workflow including a timeline for zoom, trim, speed, annotation, and blur regions; automatic captioning using on-device Whisper (via Transformers.js); cursor overlay with smoothing, motion blur, and click bounce; webcam picture-in-picture with mask shapes; and export to MP4 (H.264 + AAC) and GIF with quality presets and a source-copy fast path. Architecturally, OpenScreen follows a multi-window Electron pattern with a main editor window, a floating HUD for recording controls, a source selector, and a countdown overlay. The renderer process communicates with the main process via a unified native bridge IPC channel, which exposes typed services for system, project, and cursor domains. Native capture is handled by platform-specific helper binaries (C++ for Windows, Swift for macOS) that stream video and cursor telemetry as JSON events. The editor uses Pixi.js for real-time compositing of video, webcam, cursor, annotations, and effects, with a spring-based physics system for smooth zoom and cursor transitions. The codebase demonstrates strong engineering practices with extensive unit and browser tests (Vitest + Playwright), internationalization across 12 locales, CI/CD pipelines for Windows, macOS, and Linux builds, and a Nix flake for reproducible development environments. However, the project is explicitly archived and no longer maintained; a community fork is recommended for continued development. The main editor component (VideoEditor.tsx) is notably large (~2000 lines), mixing state management, export logic, and UI, which presents a maintenance challenge. Despite this, many individual modules are well-isolated and reusable, particularly the export pipeline, cursor smoothing, captioning logic, and undo/redo hook.
The LLM identified 5 files worth highlighting for reuse:
Orchestrates the full video export process: decodes input video via WebCodecs, applies zoom/trim/speed/annotations/cursor/webcam effects via PixiJS frame rendering, re-encodes with configurable quality and resolution. Includes a source-copy fast path when no effects are applied, and handles audio downmixing and speed adjustment. Demonstrates a clean producer-consumer pattern with async frame queues and decoupled rendering/encoding stages.
Implements a spring-damper physics model for smoothing cursor positions in real-time. Provides configurable stiffness and damping parameters, and exports a `smoothCursorPath` function that interpolates raw telemetry points into a smooth path. Used both for live cursor overlay and export rendering. The pattern is generic and could be applied to any real-time smoothing problem (e.g., mouse tracking, camera stabilization).
Converts raw Whisper transcription segments into structured annotation regions for the video editor. Handles deduplication of repeated words, word splitting with timing interpolation, and configurable layout (position, word range, font size). The logic is self-contained and parameterized, making it reusable for any caption-to-annotation pipeline regardless of the ASR model used.
Provides a streaming decoder abstraction over WebCodecs VideoDecoder and AudioDecoder, with support for trim ranges and speed adjustments. Uses web-demuxer WASM for demuxing and handles codec detection. The class emits decoded frames via callbacks and manages decoder lifecycle. This pattern is reusable for any application needing efficient, streaming media decoding with time-range constraints.
A generic React hook for undo/redo state management. Supports push, update, and commit operations with a configurable history depth. The hook returns the current state, a setter that records history, and undo/redo functions. It is used throughout the video editor for undoable actions (zoom regions, annotations, etc.) and is fully decoupled from any specific domain, making it reusable in any React application requiring undo/redo.