DEV Community

Cover image for How We Built an In-Browser 0.4s Lossless Video Trimmer with WebAssembly (and Zero Backend Servers)
thisran
thisran

Posted on Originally published at solvemymedia.com

How We Built an In-Browser 0.4s Lossless Video Trimmer with WebAssembly (and Zero Backend Servers)

#webdev #javascript #webassembly #showdev

Modern web video tools have a glaring architectural flaw: we are still transferring hundreds of megabytes over the public internet to perform basic byte manipulation.

If you want to trim 3 seconds off an MP4 video clip today, the typical "online video editor" forces you through this gauntlet:

  1. Upload your 300MB video across transoceanic undersea cables to an AWS S3 bucket.
  2. Wait in a queue while a remote Docker container spins up.
  3. The server runs ffmpeg -ss ... -to ....
  4. The server renders an export, slaps on a watermark, and demands $29.99/mo to download.

Your local laptop or smartphone contains a multi-core processor running billions of operations per second. Slicing an MP4 file doesn't require cloud server farms—it literally just requires moving bitstream pointers in your browser's local RAM.

So we built SolveMyMedia: a 100% in-browser, client-side video workstation powered by WebAssembly.

The Architecture: Stream Copying via WebAssembly

Re-encoding video in the browser CPU is slow and drains battery. The secret to instantaneous 0.4-second trimming is Lossless Stream Demuxing (-c copy). Instead of decoding every pixel frame, we copy the compressed H.264 / AAC bitstream directly between container boundaries.

Here is the simplified implementation running inside device RAM:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: false });

export async function trimVideoInMemory(file, startSeconds, durationSeconds) {
  if (!ffmpeg.isLoaded()) {
    await ffmpeg.load();
  }

  // 1. Mount video file into WASM virtual filesystem (MEMFS)
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));

  // 2. Stream copy mode: instantaneous demuxing without re-encoding
  await ffmpeg.run(
    '-ss', `${startSeconds}`,
    '-i', 'input.mp4',
    '-t', `${durationSeconds}`,
    '-c', 'copy',
    '-avoid_negative_ts', 'make_zero',
    'output.mp4'
  );

  // 3. Read output bytes directly from browser RAM
  const data = ffmpeg.FS('readFile', 'output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}
Enter fullscreen mode Exit fullscreen mode

Performance Benchmark: Cloud vs. Client WASM

We benchmarked trimming a 240MB 4K MP4 clip across a standard 50 Mbps home broadband connection:

Metric AWS Lambda + S3 Pipeline SolveMyMedia (In-Browser WASM)
Upload Transfer 240 MB uploaded over HTTP 0 MB (Air-gapped)
Processing Latency 22.8 seconds (Upload + Queue) 0.38 seconds (RAM)
Server Cost ~$0.0004 / execution + storage $0.00 (Zero Server Infrastructure)
Data Privacy Stored on third-party cloud disk Never touches a network socket

The Air-Gap Test

Because computation happens entirely within the browser's sandboxed WebAssembly runtime, you can disconnect your Wi-Fi or turn on Airplane Mode, and the video trimmer still works flawlessly.

Try it yourself:
👉 Live Tool: https://solvemymedia.com/cut-video

👉 Full Media Suite: https://solvemymedia.com

Questions for the Community:

  • Have you experimented with compiling existing C/C++ audio/video libraries to WASM?
  • How do you balance client memory constraints when dealing with large 4K media in the browser?

Let's discuss in the comments below! 👇

Top comments (0)