ffmpeg-webcli-browser-video-editor

ffmpeg webCLI Browser Video Editor

Skill by ara.so — Devtools Skills collection.

ffmpeg webCLI is a browser-based video editor powered by ffmpeg.wasm that processes videos entirely client-side using WebAssembly. No server uploads, no backend infrastructure — all video processing happens locally in the user's browser. It supports 30+ video operations including GIF creation, format conversion, compression, trimming, filters, effects, and more.

Installation

Option 1: Use the Live App

Access the hosted version directly:

https://tejaswigowda.com/ffmpeg-webCLI/

Option 2: Clone and Run Locally

git clone https://github.com/tejaswigowda/ffmpeg-webCLI.git
cd ffmpeg-webCLI
# Serve the files with any static server
python -m http.server 8000
# or
npx serve .

Option 3: Integrate into Your Project

The project uses ffmpeg.wasm as its core dependency. To integrate similar functionality:

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.7/dist/umd/ffmpeg.js"></script>
</head>
<body>
    <input type="file" id="videoInput" accept="video/*">
    <button id="processBtn">Process Video</button>
    <video id="output" controls></video>
    
    <script src="app.js"></script>
</body>
</html>

Core Architecture

ffmpeg webCLI uses:

• ffmpeg.wasm — WebAssembly port of ffmpeg for browser execution
• Web Workers — Background processing to keep UI responsive
• PWA — Progressive Web App for offline support
• Wake Lock API — Prevents screen sleep during processing

Key Components

1. Initialize ffmpeg.wasm

const { FFmpeg } = FFmpegWASM;
const { fetchFile } = FFmpegWASM;

let ffmpeg = null;
let loaded = false;

async function loadFFmpeg() {
    if (loaded) return;
    
    ffmpeg = new FFmpeg();
    
    // Log ffmpeg output
    ffmpeg.on('log', ({ message }) => {
        console.log(message);
    });
    
    // Track progress
    ffmpeg.on('progress', ({ progress, time }) => {
        console.log(`Progress: ${Math.round(progress * 100)}%`);
        updateProgressBar(progress);
    });
    
    // Load the core and wasm files
    await ffmpeg.load({
        coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.js',
        wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.wasm',
    });
    
    loaded = true;
    console.log('FFmpeg loaded successfully');
}

2. Load Video File into Virtual Filesystem

async function loadVideoFile(file) {
    await loadFFmpeg();
    
    // Write file to ffmpeg's virtual filesystem
    await ffmpeg.writeFile('input.mp4', await fetchFile(file));
    console.log('Video loaded into virtual filesystem');
}

3. Convert Video to GIF

async function convertToGIF(inputFile, width = 480, fps = 10) {
    await loadVideoFile(inputFile);
    
    // Two-pass palette generation for best quality
    // Pass 1: Generate palette
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-vf', `fps=${fps},scale=${width}:-1:flags=lanczos,palettegen`,
        'palette.png'
    ]);
    
    // Pass 2: Use palette to create GIF
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-i', 'palette.png',
        '-filter_complex', `fps=${fps},scale=${width}:-1:flags=lanczos[x];[x][1:v]paletteuse`,
        'output.gif'
    ]);
    
    // Read the output file
    const data = await ffmpeg.readFile('output.gif');
    return new Blob([data.buffer], { type: 'image/gif' });
}

4. Convert Video Format

async function convertFormat(inputFile, outputFormat = 'mp4') {
    await loadVideoFile(inputFile);
    
    const outputFile = `output.${outputFormat}`;
    const formatConfigs = {
        mp4: ['-c:v', 'libx264', '-c:a', 'aac'],
        webm: ['-c:v', 'libvpx-vp9', '-c:a', 'libopus'],
        mkv: ['-c:v', 'libx264', '-c:a', 'aac'],
        mov: ['-c:v', 'libx264', '-c:a', 'aac'],
        avi: ['-c:v', 'libx264', '-c:a', 'aac']
    };
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        ...formatConfigs[outputFormat],
        outputFile
    ]);
    
    const data = await ffmpeg.readFile(outputFile);
    return new Blob([data.buffer], { type: `video/${outputFormat}` });
}

5. Compress Video with CRF

async function compressVideo(inputFile, crf = 23, preset = 'medium') {
    await loadVideoFile(inputFile);
    
    // CRF: 18 (near lossless) to 51 (maximum compression)
    // Preset: ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-c:v', 'libx264',
        '-crf', crf.toString(),
        '-preset', preset,
        '-c:a', 'aac',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

6. Trim Video

async function trimVideo(inputFile, startTime, endTime) {
    await loadVideoFile(inputFile);
    
    const duration = endTime - startTime;
    
    await ffmpeg.exec([
        '-ss', startTime.toString(),
        '-i', 'input.mp4',
        '-t', duration.toString(),
        '-c', 'copy', // Stream copy for fast, lossless trim
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

7. Extract Audio

async function extractAudio(inputFile, format = 'mp3') {
    await loadVideoFile(inputFile);
    
    const outputFile = `output.${format}`;
    const audioConfigs = {
        mp3: ['-c:a', 'libmp3lame', '-q:a', '2'],
        aac: ['-c:a', 'aac', '-b:a', '192k'],
        wav: ['-c:a', 'pcm_s16le'],
        ogg: ['-c:a', 'libvorbis', '-q:a', '5'],
        flac: ['-c:a', 'flac']
    };
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-vn', // No video
        ...audioConfigs[format],
        outputFile
    ]);
    
    const data = await ffmpeg.readFile(outputFile);
    return new Blob([data.buffer], { type: `audio/${format}` });
}

8. Resize Video

async function resizeVideo(inputFile, width, height = -1) {
    await loadVideoFile(inputFile);
    
    // height = -1 maintains aspect ratio
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-vf', `scale=${width}:${height}`,
        '-c:v', 'libx264',
        '-crf', '23',
        '-c:a', 'copy',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

9. Change Video Speed

async function changeSpeed(inputFile, speedMultiplier) {
    await loadVideoFile(inputFile);
    
    const videoPTS = 1 / speedMultiplier;
    
    // Build atempo filter chain (each atempo can only do 0.5-2.0x)
    let atempoChain = '';
    let remaining = speedMultiplier;
    
    while (remaining > 2.0) {
        atempoChain += 'atempo=2.0,';
        remaining /= 2.0;
    }
    while (remaining < 0.5) {
        atempoChain += 'atempo=0.5,';
        remaining /= 0.5;
    }
    atempoChain += `atempo=${remaining.toFixed(3)}`;
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-filter:v', `setpts=${videoPTS}*PTS`,
        '-filter:a', atempoChain,
        '-c:v', 'libx264',
        '-crf', '23',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

10. Rotate Video

async function rotateVideo(inputFile, rotation) {
    await loadVideoFile(inputFile);
    
    const rotations = {
        '90cw': 'transpose=1',
        '90ccw': 'transpose=2',
        '180': 'transpose=1,transpose=1',
        'hflip': 'hflip',
        'vflip': 'vflip',
        'both': 'hflip,vflip'
    };
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-vf', rotations[rotation],
        '-c:a', 'copy',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

11. Add Watermark/Logo

async function addWatermark(inputFile, logoFile, position = 'bottom-right', widthPercent = 15) {
    await loadVideoFile(inputFile);
    await ffmpeg.writeFile('logo.png', await fetchFile(logoFile));
    
    const positions = {
        'top-left': '10:10',
        'top-right': 'W-w-10:10',
        'bottom-left': '10:H-h-10',
        'bottom-right': 'W-w-10:H-h-10',
        'center': '(W-w)/2:(H-h)/2'
    };
    
    const scaleFilter = `[1:v]scale=iw*${widthPercent/100}:-1[logo]`;
    const overlayFilter = `[0:v][logo]overlay=${positions[position]}`;
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-i', 'logo.png',
        '-filter_complex', `${scaleFilter};${overlayFilter}`,
        '-c:a', 'copy',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

12. Adjust Brightness/Contrast/Saturation

async function adjustColors(inputFile, brightness = 0, contrast = 1, saturation = 1, grayscale = false) {
    await loadVideoFile(inputFile);
    
    const sat = grayscale ? 0 : saturation;
    
    await ffmpeg.exec([
        '-i', 'input.mp4',
        '-vf', `eq=brightness=${brightness}:contrast=${contrast}:saturation=${sat}`,
        '-c:a', 'copy',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

13. Concatenate Videos

async function concatenateVideos(inputFile1, inputFile2) {
    await ffmpeg.writeFile('input1.mp4', await fetchFile(inputFile1));
    await ffmpeg.writeFile('input2.mp4', await fetchFile(inputFile2));
    
    await ffmpeg.exec([
        '-i', 'input1.mp4',
        '-i', 'input2.mp4',
        '-filter_complex', '[0:v][0:a][1:v][1:a]concat=n=2:v=1:a=1[outv][outa]',
        '-map', '[outv]',
        '-map', '[outa]',
        '-c:v', 'libx264',
        '-c:a', 'aac',
        'output.mp4'
    ]);
    
    const data = await ffmpeg.readFile('output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
}

14. Extract Thumbnail

async function extractThumbnail(inputFile, timestamp = '00:00:05', format = 'jpg') {
    await loadVideoFile(inputFile);
    
    const outputFile = `thumbnail.${format}`;
    
    await ffmpeg.exec([
        '-ss', timestamp,
        '-i', 'input.mp4',
        '-vframes', '1',
        '-q:v', '2',
        outputFile
    ]);
    
    const data = await ffmpeg.readFile(outputFile);
    const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
    return new Blob([data.buffer], { type: mimeType });
}

Complete Working Example

// complete-video-processor.js

const { FFmpeg } = FFmpegWASM;
const { fetchFile } = FFmpegWASM;

class VideoProcessor {
    constructor() {
        this.ffmpeg = null;
        this.loaded = false;
    }
    
    async init() {
        if (this.loaded) return;
        
        this.ffmpeg = new FFmpeg();
        
        this.ffmpeg.on('log', ({ message }) => {
            console.log('[FFmpeg]:', message);
        });
        
        this.ffmpeg.on('progress', ({ progress }) => {
            const percent = Math.round(progress * 100);
            this.updateProgress(percent);
        });
        
        await this.ffmpeg.load({
            coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.js',
            wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.wasm',
        });
        
        this.loaded = true;
        console.log('FFmpeg loaded and ready');
    }
    
    updateProgress(percent) {
        const progressBar = document.getElementById('progress');
        if (progressBar) {
            progressBar.style.width = `${percent}%`;
            progressBar.textContent = `${percent}%`;
        }
    }
    
    async loadFile(file, filename = 'input.mp4') {
        await this.init();
        await this.ffmpeg.writeFile(filename, await fetchFile(file));
    }
    
    async getOutputBlob(filename, mimeType) {
        const data = await this.ffmpeg.readFile(filename);
        return new Blob([data.buffer], { type: mimeType });
    }
    
    async convertToGIF(file, options = {}) {
        const { width = 480, fps = 10 } = options;
        
        await this.loadFile(file);
        
        // Generate palette
        await this.ffmpeg.exec([
            '-i', 'input.mp4',
            '-vf', `fps=${fps},scale=${width}:-1:flags=lanczos,palettegen`,
            'palette.png'
        ]);
        
        // Create GIF with palette
        await this.ffmpeg.exec([
            '-i', 'input.mp4',
            '-i', 'palette.png',
            '-filter_complex', `fps=${fps},scale=${width}:-1:flags=lanczos[x];[x][1:v]paletteuse`,
            'output.gif'
        ]);
        
        return await this.getOutputBlob('output.gif', 'image/gif');
    }
    
    async compress(file, options = {}) {
        const { crf = 23, preset = 'medium' } = options;
        
        await this.loadFile(file);
        
        await this.ffmpeg.exec([
            '-i', 'input.mp4',
            '-c:v', 'libx264',
            '-crf', crf.toString(),
            '-preset', preset,
            '-c:a', 'aac',
            'output.mp4'
        ]);
        
        return await this.getOutputBlob('output.mp4', 'video/mp4');
    }
    
    async trim(file, startTime, duration) {
        await this.loadFile(file);
        
        await this.ffmpeg.exec([
            '-ss', startTime.toString(),
            '-i', 'input.mp4',
            '-t', duration.toString(),
            '-c', 'copy',
            'output.mp4'
        ]);
        
        return await this.getOutputBlob('output.mp4', 'video/mp4');
    }
    
    downloadBlob(blob, filename) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(url);
    }
}

// Usage
const processor = new VideoProcessor();

document.getElementById('gifBtn').addEventListener('click', async () => {
    const fileInput = document.getElementById('videoInput');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('Please select a video file');
        return;
    }
    
    try {
        const gifBlob = await processor.convertToGIF(file, {
            width: 640,
            fps: 15
        });
        processor.downloadBlob(gifBlob, 'output.gif');
    } catch (error) {
        console.error('Error:', error);
        alert('Processing failed: ' + error.message);
    }
});

HTML Interface Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Processor</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
        #progress {
            width: 0%;
            height: 30px;
            background: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
            transition: width 0.3s;
        }
        .progress-container {
            width: 100%;
            background: #ddd;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Browser Video Processor</h1>
    
    <div class="controls">
        <input type="file" id="videoInput" accept="video/*">
    </div>
    
    <div class="controls">
        <button id="gifBtn">Convert to GIF</button>
        <button id="compressBtn">Compress Video</button>
        <button id="extractAudioBtn">Extract Audio</button>
        <button id="thumbnailBtn">Extract Thumbnail</button>
    </div>
    
    <div class="progress-container">
        <div id="progress">0%</div>
    </div>
    
    <div id="output"></div>
    
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.7/dist/umd/ffmpeg.js"></script>
    <script src="complete-video-processor.js"></script>
    <script>
        const processor = new VideoProcessor();
        
        document.getElementById('compressBtn').addEventListener('click', async () => {
            const file = document.getElementById('videoInput').files[0];
            if (!file) return alert('Select a video first');
            
            const compressed = await processor.compress(file, { crf: 28 });
            processor.downloadBlob(compressed, 'compressed.mp4');
        });
        
        document.getElementById('extractAudioBtn').addEventListener('click', async () => {
            const file = document.getElementById('videoInput').files[0];
            if (!file) return alert('Select a video first');
            
            await processor.loadFile(file);
            await processor.ffmpeg.exec([
                '-i', 'input.mp4',
                '-vn',
                '-c:a', 'libmp3lame',
                'audio.mp3'
            ]);
            
            const audio = await processor.getOutputBlob('audio.mp3', 'audio/mp3');
            processor.downloadBlob(audio, 'audio.mp3');
        });
        
        document.getElementById('thumbnailBtn').addEventListener('click', async () => {
            const file = document.getElementById('videoInput').files[0];
            if (!file) return alert('Select a video first');
            
            await processor.loadFile(file);
            await processor.ffmpeg.exec([
                '-ss', '00:00:03',
                '-i', 'input.mp4',
                '-vframes', '1',
                'thumb.jpg'
            ]);
            
            const thumb = await processor.getOutputBlob('thumb.jpg', 'image/jpeg');
            processor.downloadBlob(thumb, 'thumbnail.jpg');
        });
    </script>
</body>
</html>

Advanced Patterns

Screen Wake Lock During Processing

async function processWithWakeLock(processingFunction) {
    let wakeLock = null;
    
    try {
        if ('wakeLock' in navigator) {
            wakeLock = await navigator.wakeLock.request('screen');
            console.log('Wake lock activated');
        }
        
        const result = await processingFunction();
        return result;
        
    } finally {
        if (wakeLock) {
            await wakeLock.release();
            console.log('Wake lock released');
        }
    }
}

// Usage
const result = await processWithWakeLock(async () => {
    return await processor.compress(videoFile, { crf: 23 });
});

Web Worker for Background Processing

// worker.js
importScripts('https://unpkg.com/@ffmpeg/ffmpeg@0.12.7/dist/umd/ffmpeg.js');

const { FFmpeg } = FFmpegWASM;

let ffmpeg = null;

self.onmessage = async (e) => {
    const { type, data } = e.data;
    
    if (type === 'load') {
        ffmpeg = new FFmpeg();
        await ffmpeg.load();
        self.postMessage({ type: 'loaded' });
    }
    
    if (type === 'process') {
        const { file, operation, options } = data;
        
        await ffmpeg.writeFile('input.mp4', file);
        
        // Execute operation based on type
        if (operation === 'compress') {
            await ffmpeg.exec([
                '-i', 'input.mp4',
                '-c:v', 'libx264',
                '-crf', options.crf.toString(),
                'output.mp4'
            ]);
        }
        
        const output = await ffmpeg.readFile('output.mp4');
        self.postMessage({ type: 'complete', data: output });
    }
};

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (e) => {
    const { type, data } = e.data;
    
    if (type === 'loaded') {
        console.log('Worker ready');
    }
    
    if (type === 'complete') {
        const blob = new Blob([data.buffer], { type: 'video/mp4' });
        downloadBlob(blob, 'output.mp4');
    }
};

worker.postMessage({ type: 'load' });

Estimate Output Size

async function estimateOutputSize(inputFile, crf) {
    const inputSize = inputFile.size;
    
    // Rough estimation based on CRF
    // CRF 18 = ~1.0x, CRF 23 = ~0.5x, CRF 28 = ~0.25x, CRF 51 = ~0.05x
    const sizeMultipliers = {
        18: 1.0,
        23: 0.5,
        28: 0.25,
        33: 0.15,
        38: 0.10,
        51: 0.05
    };
    
    // Interpolate
    let multiplier = 0.5;
    const keys = Object.keys(sizeMultipliers).map(Number).sort((a, b) => a - b);
    
    for (let i = 0; i < keys.length - 1; i++) {
        if (crf >= keys[i] && crf <= keys[i + 1]) {
            const range = keys[i + 1] - keys[i];
            const progress = (crf - keys[i]) / range;
            multiplier = sizeMultipliers[keys[i]] + 
                        (sizeMultipliers[keys[i + 1]] - sizeMultipliers[keys[i]]) * progress;
            break;
        }
    }
    
    return Math.round(inputSize * multiplier);
}

// Usage
const estimated = estimateOutputSize(videoFile, 28);
console.log(`Estimated output: ${(estimated / 1024 / 1024).toFixed(2)} MB`);

Troubleshooting

FFmpeg Not Loading

async function loadWithRetry(maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            await ffmpeg.load({
                coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.js',
                wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.wasm',
            });
            return true;
        } catch (error) {
            console.error(`Load attempt ${i + 1} failed:`, error);
            if (i === maxRetries - 1) throw error;
            await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
        }
    }
}

Memory Issues with Large Files

// Process large files in chunks or with lower quality settings
async function processLargeFile(file) {
    const MAX_SIZE = 500 * 1024 * 1024; // 500 MB
    
    if (file.size > MAX_SIZE) {
        console.warn('Large file detected, using aggressive compression');
        return await processor.compress(file, {
            crf: 28,
            preset: 'faster' // Faster preset uses less memory
        });
    }
    
    return await processor.compress(file, { crf: 23 });
}

Cross-Origin Headers for SharedArrayBuffer

If using multi-threading (advanced ffmpeg.wasm feature), serve with:

// server.js (Express example)
app.use((req, res, next) => {
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
    res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
    next();
});

Clean Up Virtual Filesystem

async function cleanupFiles() {
    try {
        await ffmpeg.deleteFile('input.mp4');
        await ffmpeg.deleteFile('output.mp4');
        await ffmpeg.deleteFile('palette.png');
        console.log('Cleanup complete');
    } catch (error) {
        console.warn('Cleanup error:', error);
    }
}

// Call after each operation
await processor.compress(file);
await cleanupFiles();

Configuration

Set Custom FFmpeg Arguments

async function rawCommand(inputFile, args, outputExt) {
    await processor.loadFile(inputFile);
    
    const outputFile = `output.${outputExt}`;
    
    // User provides args array: ['-vf', 'scale=1280:-1', '-c:v', 'libx264']
    await processor.ffmpeg.exec([
        '-i', 'input.mp4',
        ...args,
        outputFile
    ]);
    
    return await processor.getOutputBlob(outputFile, `video/${outputExt}`);
}

// Example: Apply custom filter
const result = await rawCommand(videoFile, [
    '-vf', 'eq=brightness=0.1:contrast=1.2',