DEV Community

AI Viewz
AI Viewz

Posted on

How I Built a Multi-Core Client-Side Video Clipper & YouTube-to-Shorts Studio in Pure WebAssembly (Zero Server Cost)

#webdev #javascript #opensource #video

Most online video clippers and social media downloaders follow the same playbook: force users to create an account, queue their video on an expensive cloud GPU instance, slap a watermark on the output, and charge $19/month once they cut more than three clips.

I wanted to see how far we could push modern browser APIs—specifically WebAssembly (ffmpeg.wasm), Web Worker Thread Pools, HTTP Range Chunking, and HTML5 Canvas Compositing—to build a 100% free, zero-server-cost alternative that runs entirely on the user's device.

The result is Download Reels & Multi-Reel Clipper Studio — a privacy-first web app hosted on GitHub Pages that lets creators download videos and slice long videos into multiple vertical Shorts/Reels simultaneously across their CPU cores.

Here is how the architecture works under the hood.

🏗️ 1. Solving the SharedArrayBuffer Problem on GitHub Pages

If you have ever tried running @ffmpeg/ffmpeg in a static browser environment like GitHub Pages, you have likely hit this infamous error:

ReferenceError: SharedArrayBuffer is not defined
Enter fullscreen mode Exit fullscreen mode

Multi-threaded WebAssembly (@ffmpeg/core-mt) requires strict Cross-Origin Isolation headers (Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp). However, turning on strict COEP often breaks cross-origin <video> previews and CDN media streams that don't send CORP headers.

Our Solution: Multi-Worker Single-Threaded Pool (@ffmpeg/core-st)

Instead of relying on a single multi-threaded WASM instance that requires SharedArrayBuffer, we built a Web Worker Pool (js/clipper-worker.js) where each Web Worker boots an isolated single-threaded @ffmpeg/core-st@0.11.1 instance:

// Size the pool based on hardware CPU cores (up to 6 parallel workers)
const hwCores = navigator.hardwareConcurrency || 4;
const desiredWorkers = Math.min(6, Math.max(2, hwCores - 1));
Enter fullscreen mode Exit fullscreen mode

When a creator queues 5 timestamp clips in the YouTube Video Cutter & Multi-Reel Splitter, the main thread dispatches all 5 segments across the worker pool in parallel. Each CPU core slices its own clip simultaneously without needing SharedArrayBuffer!

⚡ 2. 4× Faster Downloads with Parallel HTTP Range Chunking & moov Prefix Truncation

Before FFmpeg can cut a clip in the browser, it needs the source video buffer in memory. Downloading a 45-minute podcast over a single HTTP stream just to cut a 30-second clip at 01:15 – 01:45 is a massive waste of bandwidth.

We solved this in two ways inside js/converter.js:

  1. Parallel Range Requests: We send a HEAD request to inspect Accept-Ranges: bytes and Content-Length, then split the download into 4 concurrent Range: bytes=start-end streams.
  2. Smart moov Prefix Truncation: For web-optimized MP4s (faststart, where the moov atom sits at the start of the file), if the user's latest clip ends at 02:00 of a 30:00 video, we estimate the byte offset with a safety margin and only fetch the first ~12% of the file! 
// Estimate prefix byte ceiling when cutting early segments of a long MP4
if (maxEndTimeSec > 0 && durationSec > 0 && totalBytes > 5 * 1024 * 1024) {
  const ratio = Math.min(1, (maxEndTimeSec * 1.35 + 15) / durationSec);
  if (ratio < 0.85) {
    targetBytes = Math.max(2 * 1024 * 1024, Math.ceil(totalBytes * ratio));
  }
}
Enter fullscreen mode Exit fullscreen mode

🎯 3. Instant Keyframe Seeking (-ss Before -i)

A common mistake when using FFmpeg to trim videos is placing -ss after -i, which forces FFmpeg to decode every frame from 00:00:00 up to your start timestamp.

By placing -ss <start> before -i and using -t <duration> with stream copy (-c copy), cutting a 30-second clip takes less than 200ms in WebAssembly:

ffmpeg -ss 45.00 -i source.mp4 -t 30.00 -c copy -avoid_negative_ts make_zero reel_1.mp4
Enter fullscreen mode Exit fullscreen mode

If the user enables our 1st-Second Viral Hook Banner or Custom Logo Watermark, we composite the overlay onto a high-DPI HTML5 <canvas>, export a transparent PNG into WASM virtual memory (FS.writeFile), and apply FFmpeg's overlay filter only when requested.

🔗 Try the Live Tools (100% Free, No Signup, Open Source)

We broke the platform into dedicated, fast-loading tools for each workflow:

⭐ Check Out the Code on GitHub

The entire frontend, Web Worker pool, and Cloudflare CORS proxy worker are open source. Feel free to star the repo, open feature requests, or fork it for your own media tools:

GitHub logo download-reels / download-reels.github.io

Download Your Favourite Videos and Musics From Instagram, Youtube, Facebook , Tiktok and Other Platforms

Download Reels — Universal Video Downloader & YouTube to MP3

The clean, ad-free, high-speed open-source alternative to SaveFrom.net. Download Instagram Reels, TikTok without watermarks, YouTube Shorts, X/Twitter, and convert to 320kbps MP3 directly in your browser.

🌐 Live Web Utility: https://download-reels.github.io/

💡 Why This Project Was Created

For over fifteen years, SaveFrom.net was one of the most visited websites on the internet, relied on daily by hundreds of millions of students, editors, educators, journalists, and everyday internet users to save educational clips, archive memories, and download audio.

With SaveFrom.net shutting down, a massive void was left in the web ecosystem. In its place, the search results have been overrun by predatory download portals filled with:

  • Intrusive and deceptive advertising: Aggressive pop-unders, fake "virus detected" alerts, and unwanted notifications.
  • Paywalls & Artificial Throttling: Demanding subscription fees or forcing users to wait 30 seconds in artificial queues to…


View on GitHub


What browser-side media features would you like to see next (e.g., WebGPU Whisper auto-captions or 9:16 face-tracking crop)? Let me know in the comments!

Top comments (0)