@ilovesong/ffmpeg-browser

A lightweight FFmpeg loader for browsers that loads FFmpeg from CDN at runtime, avoiding the need to bundle large WASM files in your application.

Why?

The official @ffmpeg/ffmpeg package is large and can cause issues with deployment platforms like Cloudflare Pages. This package solves that by:

• Loading FFmpeg from CDN only when needed
• Zero bundle size impact
• Same API as the official package
• Works in all modern browsers

Installation

npm install @ilovesong/ffmpeg-browser

Usage

import { getFFmpeg, getFetchFile, getToBlobURL } from '@ilovesong/ffmpeg-browser';

async function processVideo() {
  // Get FFmpeg class (loads from CDN on first call)
  const FFmpeg = await getFFmpeg();
  const fetchFile = await getFetchFile();
  const toBlobURL = await getToBlobURL();
  
  // Use FFmpeg as normal
  const ffmpeg = new FFmpeg();
  
  ffmpeg.on('log', ({ message }) => {
    console.log(message);
  });
  
  // Load FFmpeg core
  const coreBase = 'https://cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/dist/umd';
  await ffmpeg.load({
    coreURL: await toBlobURL(`${coreBase}/ffmpeg-core.js`, 'text/javascript'),
    wasmURL: await toBlobURL(`${coreBase}/ffmpeg-core.wasm`, 'application/wasm'),
  });
  
  // Process video...
  await ffmpeg.writeFile('input.mp4', await fetchFile(videoBlob));
  await ffmpeg.exec(['-i', 'input.mp4', 'output.mp4']);
  const data = await ffmpeg.readFile('output.mp4');
  
  return new Blob([data], { type: 'video/mp4' });
}

API

getFFmpeg()

Returns the FFmpeg class. Loads from CDN on first call.

const FFmpeg = await getFFmpeg();
const ffmpeg = new FFmpeg();

getFetchFile()

Returns the fetchFile utility function.

const fetchFile = await getFetchFile();
const data = await fetchFile(url);

getToBlobURL()

Returns the toBlobURL utility function.

const toBlobURL = await getToBlobURL();
const blobURL = await toBlobURL(url, mimeType);

How it works

1. On first use, the package dynamically loads FFmpeg libraries from CDN
2. Libraries are cached by the browser
3. Subsequent calls use the cached version
4. Your application bundle stays small

Browser Support

• Chrome/Edge 90+
• Firefox 89+
• Safari 15+

Requires WebAssembly and SharedArrayBuffer support.

License

MIT

Credits

This package is a lightweight wrapper around @ffmpeg/ffmpeg.