ffmpeg.wasm

https://ffmpegwasm.netlify.app
Admin
ffmpeg.wasm is a pure WebAssembly and JavaScript port of FFmpeg that enables video and audio...
Tokens:12,513
Snippets:125
Trust Score:7.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run development environment

Source: https://ffmpegwasm.netlify.app/docs/contribution/ffmpeg

Starts the development server for the package.

```bash
$ npm run dev
```

--------------------------------

### Split video into segments of equal duration

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

A React component example demonstrating how to load the FFmpeg core and execute a segmentation command to split a video into 3-second chunks.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg'; // import { fetchFile } from '@ffmpeg/util'; function() { const [loaded, setLoaded] = useState(false); const ffmpegRef = useRef(new FFmpeg()); const videoRef = useRef(null); const messageRef = useRef(null); const load = async () => { const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd' const ffmpeg = ffmpegRef.current; ffmpeg.on('log', ({ message }) => { messageRef.current.innerHTML = message; console.log(message); }); // toBlobURL is used to bypass CORS issue, urls with the same // domain can be used directly. await ffmpeg.load({ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'), }); setLoaded(true); } const transcode = async () => { const ffmpeg = ffmpegRef.current; await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm')); await ffmpeg.exec([ '-i', 'input.webm', '-f', 'segment', '-segment_time', '3', '-g', '9', '-sc_threshold', '0', '-force_key_frames', 'expr:gte(t,n_forced*9)', '-reset_timestamps', '1', '-map', '0', 'output_%d.mp4' ]); const data = await ffmpeg.readFile('output_1.mp4'); videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'})); } return (loaded ? ( <> <video ref={videoRef} controls></video><br/> <button onClick={transcode}>Split video to segments of 3 sec. and plays 2nd segment</button> <p ref={messageRef}></p> <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p> </> ) : ( <button onClick={load}>Load ffmpeg-core (~31 MB)</button> ) ); }
```

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.exec([
            '-i',
            'input.webm',
            '-f',
            'segment',
            '-segment_time',
            '3',
            '-g',
            '9',
            '-sc_threshold',
            '0',
            '-force_key_frames',
            'expr:gte(t,n_forced*9)',
            '-reset_timestamps',
            '1',
            '-map',
            '0',
            'output_%d.mp4'
        ]);
        const data = await ffmpeg.readFile('output_1.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Split video to segments of 3 sec. and plays 2nd segment</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### Install ffmpeg.wasm via package managers

Source: https://ffmpegwasm.netlify.app/docs/getting-started/installation

Use these commands to add the necessary ffmpeg.wasm packages to your project dependencies.

```bash
npm install @ffmpeg/ffmpeg @ffmpeg/util
```

```bash
yarn add @ffmpeg/ffmpeg @ffmpeg/util
```

--------------------------------

### Build @ffmpeg/core from source

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Commands to trigger different build configurations for @ffmpeg/core.

```bash
$ make dev
```

```bash
$ make dev-mt
```

```bash
$ make prd
```

```bash
$ make prd-mt
```

--------------------------------

### Build and verify output

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Execute the production build command and locate the resulting files.

```bash
# Run the build command  
make prd  
  
# Output will be in packages/core/dist/
```

--------------------------------

### Initializing FFmpeg instance

Source: https://ffmpegwasm.netlify.app/docs/migration

Replace the factory function with a class constructor and move configuration arguments to the load method.

```javascript
createFFmpeg()
```

```javascript
new FFmpeg()
```

--------------------------------

### Initialize FFmpeg instance

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/ffmpeg

Create a new instance of the FFmpeg class to begin interacting with the web worker.

```javascript
const ffmpeg = new FFmpeg();
```

--------------------------------

### Importing fetchFile utility

Source: https://ffmpegwasm.netlify.app/docs/migration

The fetchFile utility has been moved from the main package to the @ffmpeg/util package.

```javascript
import { fetchFile } from '@ffmpeg/ffmpeg'
```

```javascript
import { fetchFile } from '@ffmpeg/util'
```

--------------------------------

### Initialize FFmpeg instance

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Basic instantiation of the FFmpeg class.

```typescript
const ffmpeg = new FFmpeg();  
```

--------------------------------

### load(__namedParameters?, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Initializes the ffmpeg-core inside a web worker.

```APIDOC
## load(__namedParameters?, __namedParameters?)

### Description
Loads ffmpeg-core inside a web worker. It is required to call this method first as it initializes WebAssembly and other essential variables.

### Parameters
- **__namedParameters** (FFMessageLoadConfig) - Optional
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>** - true if ffmpeg core is loaded for the first time.
```

--------------------------------

### new FFmpeg()

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Constructor to initialize a new instance of the FFmpeg class.

```APIDOC
## constructor

### Description
Creates a new instance of the FFmpeg class to interact with the ffmpeg web worker.

### Usage
```javascript
const ffmpeg = new FFmpeg();
```
```

--------------------------------

### Build the package

Source: https://ffmpegwasm.netlify.app/docs/contribution/ffmpeg

Transpiles TypeScript source code into JavaScript.

```bash
$ npm run build
```

--------------------------------

### Executing FFmpeg commands

Source: https://ffmpegwasm.netlify.app/docs/migration

The run method has been renamed to exec, and arguments must now be passed as an array.

```javascript
await ffmpeg.run(...args)
```

```javascript
await ffmpeg.exec([...args])
```

--------------------------------

### Execute ffmpeg commands

Source: https://ffmpegwasm.netlify.app/playground

Comparison between the JavaScript API call and the equivalent standard command line syntax.

```javascript
// equivalent ffmpeg.wasm API call
ffmpeg.exec(["-i","video.webm","video.mp4"]);
// equivalent ffmpeg command line
ffmpeg -i video.webm video.mp4
```

--------------------------------

### Execute ffprobe command

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Executes an ffprobe command to analyze media files.

```typescript
const ffmpeg = new FFmpeg();  
await ffmpeg.load();  
await ffmpeg.writeFile("video.avi", ...);  
// Getting duration of a video in seconds: ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.avi -o output.txt  
await ffmpeg.ffprobe(["-v", "error", "-show_entries", "format=duration", "-of", "default=noprint_wrappers=1:nokey=1", "video.avi", "-o", "output.txt"]);  
const data = ffmpeg.readFile("output.txt");  
```

--------------------------------

### Handling events

Source: https://ffmpegwasm.netlify.app/docs/migration

Logger and progress handlers are now implemented using the on event listener pattern.

```javascript
ffmpeg.setLogger()
```

```javascript
ffmpeg.on("log", () => {})
```

```javascript
ffmpeg.setProgress()
```

```javascript
ffmpeg.on("progress", () => {})
```

--------------------------------

### Lint the source code

Source: https://ffmpegwasm.netlify.app/docs/contribution/ffmpeg

Runs the linting process to ensure code quality.

```bash
$ npm run lint
```

--------------------------------

### ffprobe(args, timeout?, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Executes an ffprobe command.

```APIDOC
## ffprobe(args, timeout?, __namedParameters?)

### Description
Executes an ffprobe command.

### Parameters
- **args** (string[]) - Required - ffprobe command line args
- **timeout** (number) - Optional - milliseconds to wait before stopping the command execution (default: -1)
- **__namedParameters** (FFMessageOptions) - Optional - Additional message options

### Returns
- **Promise<number>** - 0 if no error, != 0 if timeout (1) or error.
```

--------------------------------

### Execute ffmpeg commands

Source: https://ffmpegwasm.netlify.app/playground

Comparison between the JavaScript API call and the equivalent standard ffmpeg command line syntax.

```javascript
// equivalent ffmpeg.wasm API call
ffmpeg.exec(["-i","video.avi","video.mp4"]);
// equivalent ffmpeg command line
ffmpeg -i video.avi video.mp4
```

--------------------------------

### exec(args, timeout?, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Executes an ffmpeg command. Note that '-nostdin' and '-y' are prepended to the arguments by default.

```APIDOC
## exec(args, timeout?, __namedParameters?)

### Description
Executes an ffmpeg command. To avoid common I/O issues, "-nostdin" and "-y" are prepended to the args by default.

### Parameters
- **args** (string[]) - Required - ffmpeg command line args
- **timeout** (number) - Optional - milliseconds to wait before stopping the command execution (default: -1)
- **__namedParameters** (FFMessageOptions) - Optional - Additional message options

### Returns
- **Promise<number>** - 0 if no error, != 0 if timeout (1) or error.
```

--------------------------------

### Configure ffmpeg.wasm arguments

Source: https://ffmpegwasm.netlify.app/playground

JSON array defining the input and output parameters for the ffmpeg execution.

```json
[
"-i",
"video.webm",
"video.mp4"
]
```

--------------------------------

### fetchFile

Source: https://ffmpegwasm.netlify.app/docs/api/util

Fetches data from various sources including URL strings, base64, URL objects, File, or Blob.

```APIDOC
## fetchFile(file?)

### Description
An utility function to fetch data from url string, base64, URL, File or Blob format.

### Parameters
- **file** (string | Blob | File) - Optional - The source file or data to fetch.

### Returns
- **Promise<Uint8Array>** - The fetched data.
```

--------------------------------

### createDir(path, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Creates a new directory at the specified path.

```APIDOC
## createDir(path, __namedParameters?)

### Description
Create a directory.

### Parameters
- **path** (string) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>**
```

--------------------------------

### Interlace Two Videos with React

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

Demonstrates loading the FFmpeg core and executing a complex filter to interlace two WebM videos into an MP4 file within a React component.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.writeFile('reversed.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s_reversed.webm'));
        await ffmpeg.exec([
            '-i',
            'input.webm',
            '-i',
            'reversed.webm',
            '-filter_complex',
            '[0:v][1:v]blend=all_expr=\'A*(if(eq(0,N/2),1,T))+B*(if(eq(0,N/2),T,1))\'',
            'output.mp4',
        ]);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Interlace two webm video to mp4</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### on(event, callback)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Registers a listener for log or progress events.

```APIDOC
## on(event, callback)

### Description
Listen to log or progress events from ffmpeg.exec(). Log includes output to stdout and stderr. Progress events are accurate only when the length of input and output video/audio file are the same.

### Parameters
- **event** ("log" | "progress") - Required
- **callback** (LogEventCallback | ProgressEventCallback) - Required
```

--------------------------------

### downloadWithProgress

Source: https://ffmpegwasm.netlify.app/docs/api/util

Downloads content from a URL and tracks progress if Content-Length is provided.

```APIDOC
## downloadWithProgress(url, cb?)

### Description
Downloads content of a URL with progress. Progress only works when Content-Length is provided by the server.

### Parameters
- **url** (string | URL) - Required - The URL to download from.
- **cb** (ProgressCallback) - Optional - Callback function to track progress.

### Returns
- **Promise<ArrayBuffer>** - The downloaded content.
```

--------------------------------

### Fetch data with fetchFile

Source: https://ffmpegwasm.netlify.app/docs/api/util

Fetches data from various sources including URLs, base64 strings, File objects, and Blobs.

```typescript
// URL  
await fetchFile("http://localhost:3000/video.mp4");  
// base64  
await fetchFile("data:<type>;base64,wL2dvYWwgbW9yZ...");  
// URL  
await fetchFile(new URL("video.mp4", import.meta.url));  
// File  
fileInput.addEventListener('change', (e) => {  
  await fetchFile(e.target.files[0]);  
});  
// Blob  
const blob = new Blob(...);  
await fetchFile(blob);
```

--------------------------------

### mount

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Mounts a file system to a specific mount point.

```APIDOC
## mount(fsType, options, mountPoint)

### Description
Mounts a file system of a specified type to the given mount point.

### Parameters
- **fsType** (FFFSType) - Required - The type of file system to mount.
- **options** (WorkerFSMountData) - Required - Configuration options for the file system.
- **mountPoint** (string) - Required - The path where the file system will be mounted.

### Returns
- **Promise<boolean>** - Returns true if the mount operation was successful.
```

--------------------------------

### listDir(path, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Lists the contents of a directory.

```APIDOC
## listDir(path, __namedParameters?)

### Description
List directory contents.

### Parameters
- **path** (string) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<FSNode[]>**
```

--------------------------------

### Importing FFmpeg core

Source: https://ffmpegwasm.netlify.app/docs/migration

Update the import statement to use the class-based FFmpeg constructor.

```javascript
import { createFFmpeg } from '@ffmpeg/ffmpeg'
```

```javascript
import { FFmpeg } from '@ffmpeg/ffmpeg'
```

--------------------------------

### Performing file system operations

Source: https://ffmpegwasm.netlify.app/docs/migration

File system methods are now direct asynchronous methods on the FFmpeg instance instead of being accessed via the FS object.

```javascript
ffmpeg.FS.writeFile()
```

```javascript
await ffmpeg.writeFile()
```

```javascript
ffmpeg.FS.readFile()
```

```javascript
await ffmpeg.readFile()
```

--------------------------------

### writeFile(path, data, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Writes data to the FFmpeg file system.

```APIDOC
## writeFile(path, data, __namedParameters?)

### Description
Write data to ffmpeg.wasm.

### Parameters
- **path** (string) - Required
- **data** (FileData) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>**
```

--------------------------------

### Execute FFmpeg command

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Executes an ffmpeg command with specified arguments. Note that ["-nostdin", "-y"] are prepended to arguments by default to prevent I/O issues.

```typescript
const ffmpeg = new FFmpeg();  
await ffmpeg.load();  
await ffmpeg.writeFile("video.avi", ...);  
// ffmpeg -i video.avi video.mp4  
await ffmpeg.exec(["-i", "video.avi", "video.mp4"]);  
const data = ffmpeg.readFile("video.mp4");  
```

--------------------------------

### readFile(path, encoding?, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Reads data from the FFmpeg file system.

```APIDOC
## readFile(path, encoding?, __namedParameters?)

### Description
Read data from ffmpeg.wasm.

### Parameters
- **path** (string) - Required
- **encoding** (string) - Optional - Default: "binary". Supports "utf8" or "binary".
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<FileData>**
```

--------------------------------

### Transcode video with progress tracking

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

Uses the progress event to monitor transcoding status. Note that the progress feature is experimental and may not support all file types.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        // Listen to progress event instead of log.
        ffmpeg.on('progress', ({ progress, time }) => {
            messageRef.current.innerHTML = `${progress * 100} % (transcoded time: ${time / 1000000} s)`;
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Transcode webm to mp4</button>
                <p ref={messageRef}></p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### loaded

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Property indicating the loading state of the FFmpeg instance.

```APIDOC
## loaded

### Description
A boolean property that tracks whether the FFmpeg instance is loaded.

### Type
boolean
```

--------------------------------

### Transcode webm to mp4 video with React

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

Uses React hooks to manage the FFmpeg instance lifecycle and perform file transcoding. Vite users should replace 'umd' with 'esm' in the baseURL.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg'; // import { fetchFile, toBlobURL } from '@ffmpeg/util'; function() { const [loaded, setLoaded] = useState(false); const ffmpegRef = useRef(new FFmpeg()); const videoRef = useRef(null); const messageRef = useRef(null); const load = async () => { const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd' const ffmpeg = ffmpegRef.current; ffmpeg.on('log', ({ message }) => { messageRef.current.innerHTML = message; console.log(message); }); // toBlobURL is used to bypass CORS issue, urls with the same // domain can be used directly. await ffmpeg.load({ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'), }); setLoaded(true); } const transcode = async () => { const ffmpeg = ffmpegRef.current; await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm')); await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']); const data = await ffmpeg.readFile('output.mp4'); videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'})); } return (loaded ? ( <> <video ref={videoRef} controls></video><br/> <button onClick={transcode}>Transcode webm to mp4</button> <p ref={messageRef}></p> <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p> </> ) : ( <button onClick={load}>Load ffmpeg-core (~31 MB)</button> ) ); }
```

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile, toBlobURL } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Transcode webm to mp4</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### FFMessageLoadConfig

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/interfaces/FFMessageLoadConfig

Configuration object used to specify the locations of ffmpeg-core assets.

```APIDOC
## Interface: FFMessageLoadConfig

### Description
Configuration object used to define the URLs for loading ffmpeg-core assets. These properties are optional and have default values pointing to CDN locations.

### Properties
- **classWorkerURL** (string) - Optional - URL for `ffmpeg.worker.js`. Default: `./worker.js`.
- **coreURL** (string) - Optional - URL for `ffmpeg-core.js`. Default: `https://cdn.jsdelivr.net/npm/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`.
- **wasmURL** (string) - Optional - URL for `ffmpeg-core.wasm`. Default: `https://cdn.jsdelivr.net/npm/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.wasm`.
- **workerURL** (string) - Optional - URL for `ffmpeg-core.worker.js` (used for multithreading). Default: `https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.worker.js`.
```

--------------------------------

### Convert URL to Blob URL with toBlobURL

Source: https://ffmpegwasm.netlify.app/docs/api/util

Fetches data from a URL and returns a blob URL string.

```typescript
await toBlobURL("http://localhost:3000/ffmpeg.js", "text/javascript");
```

--------------------------------

### Dynamically import scripts with importScript

Source: https://ffmpegwasm.netlify.app/docs/api/util

Loads a script dynamically, useful for environment-specific ffmpeg.wasm versions.

```typescript
await importScript("http://localhost:3000/ffmpeg.js");
```

--------------------------------

### toBlobURL

Source: https://ffmpegwasm.netlify.app/docs/api/util

Fetches data from a URL and returns a blob URL.

```APIDOC
## toBlobURL(url, mimeType, progress?, cb?)

### Description
toBlobURL fetches data from an URL and return a blob URL.

### Parameters
- **url** (string) - Required - The URL to fetch.
- **mimeType** (string) - Required - The MIME type for the blob.
- **progress** (boolean) - Optional (Default: false) - Whether to track progress.
- **cb** (ProgressCallback) - Optional - Callback function for progress tracking.

### Returns
- **Promise<string>** - The resulting blob URL.
```

--------------------------------

### Listen to FFmpeg events

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Registers callbacks for log or progress events. Progress events are most accurate when input and output durations match.

```typescript
ffmpeg.on("log", ({ type, message }) => {  
  // ...  
})  
```

```typescript
ffmpeg.on("progress", ({ progress, time }) => {  
  // ...  
})  
```

--------------------------------

### Read file from FFmpeg

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Reads data from the ffmpeg.wasm file system. Requires an initialized FFmpeg instance.

```typescript
const ffmpeg = new FFmpeg();  
await ffmpeg.load();  
const data = await ffmpeg.readFile("video.mp4");  
```

--------------------------------

### Remove library configure flag

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Remove the corresponding --enable-lib flag in the ffmpeg-builder stage.

```dockerfile
# Remove this line from the ffmpeg-builder stage  
--enable-libwebp \
```

--------------------------------

### importScript

Source: https://ffmpegwasm.netlify.app/docs/api/util

Dynamically imports a script, useful for loading different versions of ffmpeg.wasm.

```APIDOC
## importScript(url)

### Description
Dynamically import a script, useful when you want to use different versions of ffmpeg.wasm based on environment.

### Parameters
- **url** (string) - Required - The URL of the script to import.

### Returns
- **Promise<void>**
```

--------------------------------

### Terminating FFmpeg instance

Source: https://ffmpegwasm.netlify.app/docs/migration

The exit method has been renamed to terminate.

```javascript
ffmpeg.exit()
```

```javascript
ffmpeg.terminate()
```

--------------------------------

### Transcode webm to mp4 with React

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

Uses React hooks to manage the ffmpeg instance and perform file transcoding. Requires SharedArrayBuffer for multi-threaded versions.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile, toBlobURL } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
            workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Transcode webm to mp4</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### Define ffmpeg.wasm command arguments

Source: https://ffmpegwasm.netlify.app/playground

JSON array format used in the editor to specify input and output files for the ffmpeg process.

```json
[
"-i",
"video.avi",
"video.mp4"
]
```

--------------------------------

### deleteDir(path, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Deletes an empty directory at the specified path.

```APIDOC
## deleteDir(path, __namedParameters?)

### Description
Delete an empty directory.

### Parameters
- **path** (string) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>**
```

--------------------------------

### rename(oldPath, newPath, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Renames a file or directory.

```APIDOC
## rename(oldPath, newPath, __namedParameters?)

### Description
Rename a file or directory.

### Parameters
- **oldPath** (string) - Required
- **newPath** (string) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>**
```

--------------------------------

### Remove library copy instruction

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Remove the COPY instruction in the ffmpeg-base stage for the library being removed.

```dockerfile
# Remove this line  
COPY --from=libwebp-builder $INSTALL_DIR $INSTALL_DIR
```

--------------------------------

### Write file to FFmpeg

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Writes data to the ffmpeg.wasm file system. Supports both binary data and string content.

```typescript
const ffmpeg = new FFmpeg();  
await ffmpeg.load();  
await ffmpeg.writeFile("video.avi", await fetchFile("../video.avi"));  
await ffmpeg.writeFile("text.txt", "hello world");  
```

--------------------------------

### unmount

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Unmounts a file system from a specific mount point.

```APIDOC
## unmount(mountPoint)

### Description
Unmounts a previously mounted file system from the specified mount point.

### Parameters
- **mountPoint** (string) - Required - The path of the mount point to unmount.

### Returns
- **Promise<boolean>** - Returns true if the unmount operation was successful.
```

--------------------------------

### React Component for FFmpeg.wasm Transcoding

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

A React component that handles loading the FFmpeg core, writing input files, executing transcoding commands, and displaying the resulting video.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg'; // import { fetchFile } from '@ffmpeg/util'; function() { const [loaded, setLoaded] = useState(false); const ffmpegRef = useRef(new FFmpeg()); const videoRef = useRef(null); const messageRef = useRef(null); const load = async () => { const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd' const ffmpeg = ffmpegRef.current; ffmpeg.on('log', ({ message }) => { messageRef.current.innerHTML = message; console.log(message); }); // toBlobURL is used to bypass CORS issue, urls with the same // domain can be used directly. await ffmpeg.load({ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'), }); setLoaded(true); } const transcode = async () => { const ffmpeg = ffmpegRef.current; await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm')); await ffmpeg.writeFile('arial.ttf', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf')); await ffmpeg.exec([ '-i', 'input.webm', '-vf', 'drawtext=fontfile=/arial.ttf:text=\'ffmpeg.wasm\':x=10:y=10:fontsize=24:fontcolor=white', 'output.mp4', ]); const data = await ffmpeg.readFile('output.mp4'); videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'})); } return (loaded ? ( <> <video ref={videoRef} controls></video><br/> <button onClick={transcode}>Transcode webm to mp4 with text</button> <p ref={messageRef}></p> <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p> </> ) : ( <button onClick={load}>Load ffmpeg-core (~31 MB)</button> ) ); }
```

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        await ffmpeg.writeFile('arial.ttf', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf'));
        await ffmpeg.exec([
            '-i',
            'input.webm',
            '-vf',
            'drawtext=fontfile=/arial.ttf:text=\'ffmpeg.wasm\':x=10:y=10:fontsize=24:fontcolor=white',
            'output.mp4',
        ]);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Transcode webm to mp4 with text</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### FFFSType Enumeration

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/enums/FFFSType

The FFFSType enumeration provides constants for specifying the file system type to be used by the ffmpeg instance.

```APIDOC
## FFFSType

### Description
An enumeration representing the supported file system types for ffmpeg operations.

### Members
- **MEMFS** - In-memory file system.
- **NODEFS** - Node.js file system.
- **NODERAWFS** - Node.js raw file system.
- **IDBFS** - IndexedDB file system.
- **WORKERFS** - Worker file system.
- **PROXYFS** - Proxy file system.
```

--------------------------------

### Transcode video with timeout in React

Source: https://ffmpegwasm.netlify.app/docs/getting-started/usage

This component manages the loading of ffmpeg-core and executes a transcoding task with a 1000ms timeout. It requires the @ffmpeg/ffmpeg and @ffmpeg/util packages.

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg'; // import { fetchFile } from '@ffmpeg/util'; function() { const [loaded, setLoaded] = useState(false); const ffmpegRef = useRef(new FFmpeg()); const videoRef = useRef(null); const messageRef = useRef(null); const load = async () => { const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd' const ffmpeg = ffmpegRef.current; ffmpeg.on('log', ({ message }) => { messageRef.current.innerHTML = message; console.log(message); }); // toBlobURL is used to bypass CORS issue, urls with the same // domain can be used directly. await ffmpeg.load({ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'), }); setLoaded(true); } const transcode = async () => { const ffmpeg = ffmpegRef.current; await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm')); // The exec should stop after 1 second. await ffmpeg.exec(['-i', 'input.webm', 'output.mp4'], 1000); const data = await ffmpeg.readFile('output.mp4'); videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'})); } return (loaded ? ( <> <video ref={videoRef} controls></video><br/> <button onClick={transcode}>Transcode webm to mp4</button> <p ref={messageRef}></p> <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p> </> ) : ( <button onClick={load}>Load ffmpeg-core (~31 MB)</button> ) ); }
```

```javascript
// import { FFmpeg } from '@ffmpeg/ffmpeg';
// import { fetchFile } from '@ffmpeg/util';
function() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef(null);
    const messageRef = useRef(null);


    const load = async () => {
        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on('log', ({ message }) => {
            messageRef.current.innerHTML = message;
            console.log(message);
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setLoaded(true);
    }


    const transcode = async () => {
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
        // The exec should stop after 1 second.
        await ffmpeg.exec(['-i', 'input.webm', 'output.mp4'], 1000);
        const data = await ffmpeg.readFile('output.mp4');
        videoRef.current.src =
            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
    }


    return (loaded
        ? (
            <>
                <video ref={videoRef} controls></video><br/>
                <button onClick={transcode}>Transcode webm to mp4</button>
                <p ref={messageRef}></p>
                <p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
            </>
        )
        : (
            <button onClick={load}>Load ffmpeg-core (~31 MB)</button>
        )
    );
}
```

--------------------------------

### Remove library linker flags

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Remove the library references from FFMPEG_LIBS in the ffmpeg-wasm-builder stage.

```dockerfile
# Remove these lines from FFMPEG_LIBS  
-lwebpmux \  
-lwebp \  
-lsharpyuv \
```

--------------------------------

### ProgressEvent Interface

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/interfaces/progressevent

The ProgressEvent interface defines the structure of progress updates emitted during FFmpeg execution.

```APIDOC
## Interface: ProgressEvent

### Description
Represents the progress state of an ongoing FFmpeg operation.

### Properties
- **progress** (number) - The current progress of the operation as a decimal value.
- **time** (number) - The current timestamp of the media being processed.
```

--------------------------------

### deleteFile(path, __namedParameters?)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Deletes a file at the specified path.

```APIDOC
## deleteFile(path, __namedParameters?)

### Description
Delete a file.

### Parameters
- **path** (string) - Required
- **__namedParameters** (FFMessageOptions) - Optional

### Returns
- **Promise<boolean>**
```

--------------------------------

### terminate()

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Terminates the web worker and all ongoing API calls.

```APIDOC
## terminate()

### Description
Terminate all ongoing API calls and terminate web worker. FFmpeg.load() must be called again before calling any other APIs.
```

--------------------------------

### off(event, callback)

Source: https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg

Removes a listener for log or progress events.

```APIDOC
## off(event, callback)

### Description
Unlisten to log or progress events from ffmpeg.exec().

### Parameters
- **event** ("log" | "progress") - Required
- **callback** (LogEventCallback | ProgressEventCallback) - Required
```

--------------------------------

### Remove library builder stage in Dockerfile

Source: https://ffmpegwasm.netlify.app/docs/contribution/core

Delete the specific builder stage block for the library being removed.

```dockerfile
# Remove this entire block  
FROM emsdk-base AS libwebp-builder  
COPY --from=zlib-builder $INSTALL_DIR $INSTALL_DIR  
ENV LIBWEBP_BRANCH=v1.3.2  
ADD https://github.com/ffmpegwasm/libwebp.git#$LIBWEBP_BRANCH /src  
COPY build/libwebp.sh /src/build.sh  
RUN bash -x /src/build.sh
```
Tokens:
Raw