ffmpeg.wasm

FFmpeg for browser and node, powered by WebAssembly

VideoWeb Assembly
ffmpegwasm/ffmpeg.wasmffmpegwasm.netlify.app@ffmpeg/core

README

ffmpeg.wasm


ffmpeg.wasm


stability-experimental
Node Version
Actions Status
CodeQL
npm (tag)
Maintenance
License: MIT
Code Style
Downloads Total
Downloads Month

Join us on Discord!

Discord

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

transcode-demo


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

Check next steps of ffmpeg.wasm HERE

Installation


Node

  1. ```
  2. $ npm install @ffmpeg/ffmpeg @ffmpeg/core
  3. ```

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


  1. ```
  2. $ node --experimental-wasm-threads transcode.js
  3. ```

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 withCross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin headers to use ffmpeg.wasm.


  1. ```html
  2. <script src="static/js/ffmpeg.min.js"></script>
  3. <script>
  4.   const { createFFmpeg } = FFmpeg;
  5.   ...
  6. </script>
  7. ```

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:

  1. ```javascript
  2. import { writeFile } from 'fs/promises';
  3. import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

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

  7. (async () => {
  8.   await ffmpeg.load();
  9.   ffmpeg.FS('writeFile', 'test.avi', await fetchFile('./test.avi'));
  10.   await ffmpeg.run('-i', 'test.avi', 'test.mp4');
  11.   await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'test.mp4'));
  12.   process.exit(0);
  13. })();
  14. ```

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


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

Node

Just install the specific version you need:

  1. ```bash
  2. $ npm install @ffmpeg/core@latest
  3. ```

Or use your own version with customized path

  1. ```javascript
  2. const ffmpeg = createFFmpeg({
  3.   corePath: '../../../src/ffmpeg-core.js',
  4. });
  5. ```

Browser

  1. ```javascript
  2. const ffmpeg = createFFmpeg({
  3.   corePath: 'static/js/ffmpeg-core.js',
  4. });
  5. ```

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:

  1. ```javascript
  2. const ffmpeg = createFFmpeg({
  3.   corePath: new URL('static/js/ffmpeg-core.js', document.location).href,
  4. });
  5. ```

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

Use single thread version


  1. ```javascript
  2. const ffmpeg = createFFmpeg({
  3.   mainName: 'main',
  4.   corePath: 'https://unpkg.com/@ffmpeg/core-st@0.11.1/dist/ffmpeg-core.js',
  5. });
  6. ```

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/ffmpeg (https://github.com/ffmpegwasm/ffmpeg.wasm)
- @ffmpeg/core (https://github.com/ffmpegwasm/ffmpeg.wasm-core)

@ffmpeg/core 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/ffmpeg 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.

undefined

For more details: https://github.com/ffmpegwasm/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/ffmpegwasm/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/core/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():

  1. ```javascript
  2. const { createFFmpeg } = FFmpeg;
  3. const ffmpeg = createFFmpeg({
  4.   corePath: "http://localhost:3000/public/ffmpeg-core.js",
  5.   // Use public address if you don't want to host your own.
  6.   // corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js'
  7.   log: true,
  8. });
  9. ```