Back to ProjectsMedia

VideoMerger

Web application for merging multiple videos with background music using FFmpeg.

Tech Stack

ReactTypeScriptNode.jsFFmpeg

Overview

VideoMerger is a browser-based tool that lets users upload multiple video clips and an optional audio track, then merges them into a single output file server-side using FFmpeg. The React frontend provides drag-and-drop upload, clip ordering, and a progress indicator while the Node.js backend handles the heavy FFmpeg processing.

Key Highlights

  • Server-side FFmpeg processing
  • Drag-and-drop clip ordering
  • Background music mixing
  • Streams output directly to browser

How I Built It

React + TypeScript frontend with drag-and-drop via react-dropzone. Files are uploaded to a Node.js/Express server which uses fluent-ffmpeg to concatenate clips and mix in the audio track. Processing happens in a temp directory; the final file is streamed back to the client for download.

Future Vision

Add trim/cut controls per clip, transition effects, subtitle overlay, and cloud storage integration for output files.

Links