DEV Community: AI Viewz

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

AI Viewz — Sun, 01 Nov 2026 06:32:45 +0000

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

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));

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:

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.
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));
  }
}

🎯 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

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:

🎬 Download Reels & Multi-Reel Clipper Studio (Main App) — All-in-one video saver, batch queue, and multi-reel splitter.
✂️ YouTube Video Cutter & Convert YouTube to Shorts — Cut YouTube videos by timestamp into multiple Shorts & Reels simultaneously with 1st-second hook banners and ZIP export.
🎵 YouTube to MP3 320kbps Audio Converter — Extract studio-grade 320kbps / 192kbps MP3 audio or lossless WAV directly in your browser via WebAssembly.
📸 Instagram Reel Downloader (1080p HD MP4) — Save public Instagram Reels and audio tracks in original 1080p MP4 quality.
📱 TikTok Video Downloader Without Watermark — Download clean, unwatermarked TikTok MP4 videos and original sounds.

⭐ 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:

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!

Tesseract OCR 5.5 Installation

AI Viewz — Fri, 26 Sep 2025 21:43:31 +0000

How To Install Latest Version of Tesseract OCR 5.5

sudo add-apt-repository ppa:alex-p/tesseract-ocr5.4
sudo apt update

sudo add-apt-repository ppa:alex-p/tesseract-ocr-devel
sudo apt update

sudo apt install tesseract-ocr-eng   # For English
sudo apt install tesseract-ocr-ara   # For Arabic

We Have a Very Detailed Explanation on Tesseract Installation

Generating Synthetic RTL OCR Data for Donut with SynthDoG-RTL

AI Viewz — Tue, 23 Sep 2025 20:11:56 +0000

Introduction

Building OCR models for right-to-left (RTL) languages like Arabic, Urdu, Persian, or Hebrew often suffers from a lack of annotated training data. SynthDoG-RTL is a synthetic document generator adapted from Donut’s SynthDoG, extended to handle RTL text rendering correctly. In this post, we’ll walk through how advanced developers can generate large-scale synthetic datasets compatible with Donut.

What is SynthDoG-RTL?

SynthDoG (Synthetic Document Generator) was introduced with Donut to create training data on the fly for document understanding. SynthDoG-RTL extends it by:

Supporting RTL text direction and contextual script shaping.
Including sample corpora, fonts, and templates for Arabic, Urdu, Persian, Hebrew, and others.
Allowing custom YAML configuration for layouts, distortions, and effects.

Installation and Setup

Clone the repository and install dependencies:

git clone https://github.com/aiviewz/Synthdog-RTL.git
cd Synthdog-RTL

conda create -n synthdog python=3.8 -y
conda activate synthdog
pip install synthtiger

Make sure to install libraqm for proper Arabic/RTL shaping:

sudo apt-get install libfreetype6-dev libharfbuzz-dev

On macOS, set:

export OBJC_DISABLE_INITIALIZE_FORK_SAFETY=YES

Preparing Resources

Each language needs:

Corpus: UTF-8 text file under resources/corpus/ (e.g., urdu.txt, arabic.txt).
Fonts: Place .ttf/.otf fonts in resources/font/<lang_code>/.
Backgrounds: Optional textures under resources/backgrounds/.

Example structure:

resources/
 ├─ corpus/
 │   ├─ urdu.txt
 │   └─ arabic.txt
 └─ font/
     ├─ ur/
     │   └─ NotoNastaliq.ttf
     └─ ar/
         └─ NotoNaskh.ttf

Configuring Generation

YAML config files (e.g., config_ur.yaml) define page size, font range, distortions, and paths.

Example Urdu config:

corpus_path: "resources/corpus/urdu.txt"
font_dir: "resources/font/ur/"
page_width: 1240
page_height: 1754
min_font_size: 20
max_font_size: 40
rotate_angle: [-2, 2]
background_dir: "resources/backgrounds/paper/"

Generating Synthetic Data

Run the CLI:

synthtiger -o ./outputs/synthdog_ur -c 1000 -w 8 -v template.py SynthDoG config_ur.yaml

This generates 1000 samples with 8 workers, outputting images and text into ./outputs/synthdog_ur/.

Repeat with config_ar.yaml, config_fa.yaml, etc. for multiple languages.

Formatting for Donut

Donut expects an image + JSON pair. Structure your dataset like:

my_dataset/
 ├─ train/
 │   ├─ metadata.jsonl
 │   ├─ 00000001.png
 │   └─ ...
 ├─ validation/
 │   └─ ...
 └─ test/
     └─ ...

Each line in metadata.jsonl:

{"file_name": "00000001.png", "ground_truth": "{\"gt_parse\":{\"text_sequence\":\"یہ اردو کا متن ہے\"}}"}

Donut will tokenize this internally. Ensure that file_name matches your image and text_sequence contains the RTL ground truth text.

Advanced Tips

Layouts: Customize template.py for multi-column, headers, or tables.
Effects: Add noise, blur, or perspective distortion in YAML for realism.
Fonts: Use multiple fonts per language to avoid overfitting.
Mixed Scripts: Include English corpora to simulate bilingual documents.
Scaling: Generate 10k–100k samples to pre-train Donut effectively.

Conclusion

With SynthDog-RTL you can rapidly bootstrap synthetic OCR datasets for all major RTL languages. The generated data integrates seamlessly with Donut, enabling you to train or fine-tune robust document understanding models even in low-resource settings.

References: