@ffmpeg.wasm/main

ffmpeg.wasm

About ffmpeg.wasm

Thanks to Jerome Wu for creating the very cool package ffmpegwasm! However, because this package hasn't been updated in a long time, a lot of features are on hold and it's not compatible with node18 and above (because the emsdk version is too old). So I decided to maintain a fork, fix the problems and continue development iterations. Feel free to create issues or pull requests ヾ(≧▽≦*)o Hopefully these changes can be merged into ffmpegwasm in the future

Release Plan

See the Todos chapter for more plans

• v0.12 is fully compatible with ffmpegwasm v0.11.x, but updates emsdk to the latest and fixes some bugs
• Since v0.13, I will start refactoring with a modern toolchain (Typescript, vite, etc), which will bring some breaking changes. Therefore, it is strongly recommended that you ensure that you use ~0.12.0 when installing to ensure compatibility!

Migration from ffmpegwasm

1. Change package names and update imports:
   • @ffmpeg/ffmpeg => @ffmpeg.wasm/main
   • @ffmpeg/core & @ffmpeg/core-mt => @ffmpeg.wasm/core-mt
   • @ffmpeg/core-st => @ffmpeg.wasm/core-st
   • @ffmpeg/types is expected to be bundled with @ffmpeg.wasm/main in v0.13
2. Update version to ~0.12.0

Todos

• Update emsdk to latest
• Update deps
• Rewrite with TypeScript (expected in v0.13)
• ESM Support (expected in v0.13)
• Migrate to pnpm (expected in v0.13)
• Support for parallel tasks in multi-threaded mode
• Release with Github Action
• Bundle with vite and test with vitest
• Support build cache
• Migrate to monorepo
• Upgrade to FFmpeg@5
• Use the faster libsvtav1 instead of libaom (currently disabled because it is too slow)

Original README

ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.

AVI to MP4 Demo

Try it: https://ffmpegwasm.netlify.app

Check next steps of ffmpeg.wasm HERE

Installation

Node

$ npm install @ffmpeg.wasm/main @ffmpeg.wasm/core-mt

As we are using experimental features, you need to add flags to run in Node.js

$ node --experimental-wasm-threads transcode.js

Browser

Or, using a script tag in the browser (only works in some browsers, see list below):

SharedArrayBuffer is only available to pages that are cross-origin isolated. So you need to host your own server with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin headers to use ffmpeg.wasm.

<script src="static/js/ffmpeg.min.js"></script>
<script>
  const { createFFmpeg } = FFmpeg;
  ...
</script>

Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.

Usage

ffmpeg.wasm provides simple to use APIs, to transcode a video you only need few lines of code:

import { writeFile } from "fs/promises";
import { createFFmpeg, fetchFile } from "@ffmpeg.wasm/main";

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

(async () => {
  await ffmpeg.load();
  ffmpeg.FS("writeFile", "test.avi", await fetchFile("./test.avi"));
  await ffmpeg.run("-i", "test.avi", "test.mp4");
  await fs.promises.writeFile("./test.mp4", ffmpeg.FS("readFile", "test.mp4"));
  process.exit(0);
})();

Use other version of ffmpeg.wasm-core / @ffmpeg.wasm/core-mt

For each version of ffmpeg.wasm, there is a default version of @ffmpeg.wasm/core-mt (you can find it in devDependencies section of package.json), but sometimes you may need to use newer version of @ffmpeg.wasm/core-mt to use the latest/experimental features.

Node

Just install the specific version you need:

$ npm install @ffmpeg.wasm/core-mt@latest

Or use your own version with customized path

const ffmpeg = createFFmpeg({
  corePath: "../../../src/ffmpeg-core.js",
});

Browser

const ffmpeg = createFFmpeg({
  corePath: "static/js/ffmpeg-core.js",
});

Keep in mind that for compatibility with webworkers and nodejs this will default to a local path, so it will attempt to look for 'static/js/ffmpeg.core.js' locally, often resulting in a local resource error. If you wish to use a core version hosted on your own domain, you might reference it relatively like this:

const ffmpeg = createFFmpeg({
  corePath: new URL("static/js/ffmpeg-core.js", document.location).href,
});

For the list available versions and their changelog, please check: https://github.com/DreamOfIce/ffmpeg.wasm-core/releases

Use single thread version

const ffmpeg = createFFmpeg({
  mainName: "main",
  corePath: "https://unpkg.com/@ffmpeg.wasm/core-st@0.12.0/dist/ffmpeg-core.js",
});

Multi-threading

Multi-threading need to be configured per external libraries, only following libraries supports it now:

x264

Run it multi-threading mode by default, no need to pass any arguments.

libvpx / webm

Need to pass -row-mt 1, but can only use one thread to help, can speed up around 30%

Documentation

• API
• Supported External Libraries

FAQ

What is the license of ffmpeg.wasm?

There are two components inside ffmpeg.wasm:

• @ffmpeg.wasm/main (https://github.com/DreamOfIce/ffmpeg.wasm)
• @ffmpeg.wasm/core-mt (https://github.com/DreamOfIce/ffmpeg.wasm-core)

@ffmpeg.wasm/core-mt contains WebAssembly code which is transpiled from original FFmpeg C code with minor modifications, but overall it still following the same licenses as FFmpeg and its external libraries (as each external libraries might have its own license).

@ffmpeg.wasm/main contains kind of a wrapper to handle the complexity of loading core and calling low-level APIs. It is a small code base and under MIT license.

Can I use ffmpeg.wasm in Firefox?

Yes, but only for Firefox 79+ with proper header in both client and server, visit https://ffmpegwasm.netlify.app to try whether your Firefox works.

For more details: https://github.com/DreamOfIce/ffmpeg.wasm/issues/106

What is the maximum size of input file?

2 GB, which is a hard limit in WebAssembly. Might become 4 GB in the future.

How can I build my own ffmpeg.wasm?

In fact, it is ffmpeg.wasm-core most people would like to build.

To build on your own, you can check build.sh inside https://github.com/DreamOfIce/ffmpeg.wasm-core repository.

Also you can check this series of posts to learn more fundamental concepts:

• https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-1-preparation/
• https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-2-compile-with-emscripten/
• https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-3-v0.1/
• https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-4-v0.2/

Why it doesn't work in my local environment?

When calling ffmpeg.load(), by default it looks for http://localhost:3000/node_modules/@ffmpeg.wasm/core-mt/dist/ to download essential files (ffmpeg-core.js, ffmpeg-core.wasm, ffmpeg-core.worker.js). It is necessary to make sure you have those files served there.

If you have those files serving in other location, you can rewrite the default behavior when calling createFFmpeg():

const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({
  corePath: "http://localhost:3000/public/ffmpeg-core.js",
  // Use public address if you don't want to host your own.
  // corePath: 'https://unpkg.com/@ffmpeg.wasm/core-mt@0.10.0/dist/ffmpeg-core.js'
  log: true,
});