FFmpeg WebCLI: Browser-Based Video Editing via WebAssembly

FFmpeg WebCLI is a browser-based video editor that enables full FFmpeg functionality locally on a user's device. By leveraging ffmpeg.wasm, the tool eliminates the need for server-side uploads, ensuring that all video processing occurs entirely within the browser using WebAssembly.

Local Processing and Privacy

FFmpeg WebCLI operates on a privacy-first architecture where no data is sent to a server. All file I/O is handled locally on the user's machine. The workflow involves downloading the ffmpeg-core WebAssembly binary (approximately 31 MB) and caching it for future use. Once loaded, video processing is executed within a Web Worker to ensure the browser UI remains responsive during encoding.

Key Technical Features

The application provides a comprehensive suite of over 30 video operations, categorized by their function:

Video Manipulation and Conversion

  • Format Conversion: Supports re-encoding to MP4 (H.264 + AAC), WebM (VP9 + Opus), MKV, MOV, and AVI.
  • Compression: Includes a CRF (Constant Rate Factor) slider (18 to 51) and encoding presets (ultrafast to veryslow) to balance quality and file size.
  • Trimming and Cropping: Users can set start and end points via timeline sliders or define specific X/Y offsets and dimensions for cropping.
  • Resizing: Combines a scale filter with CRF-based H.264 encoding to change output dimensions while maintaining aspect ratios.
  • Visual Effects: Includes options for rotation, flipping, reversing, and adding fade-in/out effects.
  • Speed Adjustment: Adjusts both video PTS and the atempo audio filter chain (0.25x to 4x) to preserve audio pitch and sync.

Audio Processing

  • Extraction: Pulls audio tracks into standalone files such as MP3, AAC, WAV, OGG, and FLAC.
  • Mixing: Allows blending a second audio file as background music using the amix filter, with independent volume controls for both the original and background tracks.
  • Normalization: Uses the loudnorm (EBU R128) filter to bring audio to broadcast standards (-14 LUFS for YouTube/Spotify, -16 LUFS for Podcasts, -23 LUFS for Broadcast).
  • Volume Control: Boosts or reduces audio levels using the volume filter while stream-copying the video to avoid quality loss.

Advanced Overlays and Composition

  • Logo and Image Overlay: Stamps images (PNG, JPG, GIF, WebP) onto frames using the overlay filter with a scale pre-pass.
  • Picture-in-Picture: Overlays a second video clip in a small inset window, re-encoding both streams to H.264/AAC.
  • Concatenation: Joins two clips using the concat filter, automatically handling different resolutions and codecs.
  • Side-by-Side: Uses hstack or vstack to place two clips next to each other for comparison or reaction videos.

Metadata and Utility

  • Strip Metadata: Removes GPS coordinates and camera tags using -map_metadata -1.
  • Subtitle Embedding: Muxes .srt, .vtt, or .ass files as soft subtitle tracks in MP4 or MKV containers without re-encoding the picture.
  • Subtitle Note: Hard-burning subtitles requires a libass-enabled build, which is not available in the standard WebAssembly core.
  • Media Info: Performs a deep scan using ffmpeg -hide_banner -i to print full codec and stream details.

Raw FFmpeg Access

For power users, the tool provides a Raw FFmpeg panel. This allows users to enter custom arguments that are inserted between -i input and the output filename. The panel includes a live command preview and a library of one-click recipes for complex tasks like denoising (hqdn3d), sharpening (unsharp), and motion stabilization (deshake).

Offline Capability and PWA Support

FFmpeg WebCLI is implemented as a Progressive Web App (PWA), allowing it to be installed as a native app on desktop and mobile. Key PWA features include:

  • Offline Support: Static assets and the ffmpeg.wasm library are cached via a service worker, allowing the tool to work without an internet connection after the first load.
  • Screen Wake Lock: The application prevents the device from sleeping or locking during long encoding operations to ensure processing is not interrupted.
  • Cross-Platform Compatibility: Works across Chrome, Edge, Firefox, and Safari on desktop, and Chrome, Firefox, and Samsung Internet on Android.

Community Feedback and Discussion

Community members on Hacker News discussed the performance and technical limitations of WebAssembly-based encoding. Some users questioned the performance compared to native apps and the availability of hardware acceleration (such as h264_nvenc). Others noted the importance of the UI for users who find the command line cumbersome.

One point of UX feedback regarding the "upload" terminology was addressed by the author:

"Changed upload icon to floppy disk to make it clear that all data stays local."

Local Deployment

To run the project locally, the server must set specific headers for SharedArrayBuffer support, which is required by ffmpeg.wasm:

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

Sources