Video Converter + Recorder
Cross-platform desktop video editor and screen recorder with multi-track and live streaming.
The Challenge
A digital media company producing training content and live-streamed product demonstrations needed professional-grade desktop tools for two distinct workflows: post-production video editing with format conversion, and live screen + webcam recording with streaming capability. Their existing toolchain was a combination of Adobe Premiere (expensive, subscription-based, Windows only for their team) and OBS Studio (powerful but with a steep learning curve that non-technical presenters found prohibitive).
The core requirement was a unified, branded toolset that non-technical users could operate without training, that ran on both Windows and macOS from a single installer, and that could be distributed to a distributed team of 15 presenters without per-seat software licensing costs. Native app development (Swift + C++ for macOS, C# for Windows) was ruled out due to the cost of maintaining two separate codebases.
What We Built
Both applications are built on Electron (Chromium + Node.js), sharing a common TypeScript/React UI layer and a native Node.js addon (node-addon-api) that wraps FFmpeg for all media processing operations. Using FFmpeg as the media engine — invoked via child_process with constructed CLI arguments rather than a JavaScript binding — provided access to the full codec ecosystem (H.264, H.265, VP9, ProRes, AAC, MP3) without licensing concerns, and offloaded the CPU-intensive transcoding to a spawned process so the Electron renderer thread remained responsive.
The Video Converter supports drag-and-drop multi-file import, a timeline with up to 8 video tracks and 4 audio tracks, watermark overlay (image or text, with position and opacity controls), background audio mixing, and batch export to any FFmpeg-supported format. The UI timeline is a custom React canvas component — no third-party timeline library was used, as none met the performance requirement for scrubbing a multi-track composition smoothly on mid-range hardware.
The Video Recorder uses Electron's desktopCapturer API for screen capture and getUserMedia for webcam input, compositing the two streams on a hidden canvas element at 30fps before feeding the combined stream to either a local MediaRecorder (for file output) or an RTMP stream (via a Node.js RTMP client library) for live YouTube/Facebook streaming. Transparent video backgrounds (chroma key) are implemented as a WebGL shader applied to the webcam canvas, enabling virtual background replacement on modest hardware without GPU acceleration requirements.
The Outcome
Both tools shipped from a single Electron codebase, with Windows and macOS installers produced by electron-builder in the same CI pipeline. The shared codebase reduced the ongoing maintenance overhead by approximately 50% compared to maintaining separate native apps — new features (the transparent background feature was added 3 months post-launch) are written once and ship to both platforms simultaneously.
The company's 15 presenters adopted the recorder without training sessions, citing the simplified UI as the primary factor. Live stream setup time dropped from the previous 20–25 minutes (OBS configuration) to under 5 minutes. The video converter's batch processing mode reduced the post-production workflow for a standard 60-minute training recording from 45 minutes (Premiere rendering + export) to 8 minutes (FFmpeg-accelerated conversion on equivalent hardware).