DOCSEARCHbyAlgolia
Submit Docs

ffmpeg.wasm

repository·main·Indexed 12 days ago

https://github.com/ffmpegwasm/ffmpeg.wasm

A WebAssembly and JavaScript port of FFmpeg that enables client-side video and audio recording, conversion, and streaming directly in the browser. Version 0.12.0 introduces a TypeScript rewrite, monorepo structure, and official support for Web Workers and multi-threading.

Tokens
14.6K
Snippets
58
Records
83
Agent score
94%

What's inside ffmpeg.wasm

  1. What is ffmpeg.wasm

    main
    ffmpeg.wasm is a pure WebAssembly and JavaScript port of FFmpeg. It allows developers to perform video and audio recording, conversion, and streaming directly within a web browser without requiring a backend server for media processing.

  3. Understand ffmpeg.wasm performance expectations

    main
    ffmpeg.wasm uses transpiled FFmpeg C source code compiled to WebAssembly. Users should expect lower performance compared to native FFmpeg, as the WebAssembly implementation is not yet fully optimized. Even when using the multi-threaded version (core-mt), performance will be significantly slower than native execution. Use this knowledge to decide if ffmpeg.wasm is appropriate for your specific use case (e.g., background processing vs. real-time requirements).

  4. Typical ffmpeg.wasm Workflow

    main

    When using ffmpeg.wasm in your own applications, you should follow this standard lifecycle:

    1. Load Assets: Download and initialize the required JavaScript and WebAssembly assets. You can choose between the standard version or the multithreading version (@ffmpeg/core-mt).
    2. Prepare the File System: Upload your source files (media or text) into the ffmpeg.wasm in-memory File System. Files must be present in this virtual environment before the ffmpeg APIs can process them.
    3. Execute Commands: Pass the desired FFmpeg arguments to the API to process the files in the virtual file system.
    4. Retrieve Output: Access the resulting files from the in-memory file system for download or further processing.

  6. How ffmpeg.wasm architecture works

    main

    ffmpeg.wasm offloads resource-intensive multimedia transcoding tasks to a web worker (ffmpeg.worker) by default to avoid blocking the browser's main thread.

    Key Workflow:

    1. Worker Initialization: The ffmpeg.worker downloads the WebAssembly ffmpeg-core from a CDN and initializes it within the WorkerGlobalScope.
    2. File System Management: To process a video, you must first populate the ffmpeg-core File System with your input files. After processing, you must read the resulting files from the ffmpeg-core File System.
    3. Asynchronous API: Because tasks run in a worker, almost all function calls in ffmpeg.wasm are asynchronous. It is highly recommended to use async/await syntax.
    4. Threading:
      • Using the single-thread core (@ffmpeg/core) runs in one worker.
      • Using the multi-thread core (@ffmpeg/core-mt) causes ffmpeg-core to spawn additional web workers inside the primary ffmpeg.worker.

  7. Understanding ffmpeg.wasm cores

    main

    In ffmpeg.wasm, the core acts as the engine and is a swappable component. You can choose between different core implementations depending on your performance and complexity needs:

    • @ffmpeg/core: The single-thread version of the ffmpeg.wasm core.
    • @ffmpeg/core-mt: The multi-thread version of the ffmpeg.wasm core.

    Developers can also build custom cores (for example, a core containing only the x264 library to minimize the .wasm file size) using the build scripts provided in the repository.

  8. Migrate from 0.11.x to 0.12+ API

    main

    Version 0.12+ of @ffmpeg/ffmpeg is not backward compatible with 0.11.x. When upgrading, you must update your imports, instantiation logic, and method calls. Key changes include moving from a factory function (createFFmpeg) to a class constructor (new FFmpeg), renaming execution and file system methods, and switching from setter methods for logging and progress to an event-based listener pattern (ffmpeg.on).

    // 0.11.x
import { createFFmpeg } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg();
await ffmpeg.load();
await ffmpeg.run('-i', 'input.mp4');
await ffmpeg.FS.writeFile('test.txt', data);
await ffmpeg.FS.readFile('test.txt');
ffmpeg.setLogger(({ message }) => console.log(message));
ffmpeg.setProgress(({ progress }) => console.log(progress));
import { fetchFile } from '@ffmpeg/ffmpeg';

// 0.12+
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
const ffmpeg = new FFmpeg();
// Note: arguments previously passed to createFFmpeg() are now passed to ffmpeg.load()
await ffmpeg.load();
await ffmpeg.exec(['-i', 'input.mp4']);
await ffmpeg.writeFile('test.txt', data);
await ffmpeg.readFile('test.txt');
ffmpeg.on("log", ({ message }) => console.log(message));
ffmpeg.on("progress", ({ progress }) => console.log(progress));

  10. Build a SolidStart application with presets

    main

    Solid apps use presets to optimize projects for specific deployment environments.

    • By default, npm run build generates a Node.js application that can be executed with npm start.
    • To use a different deployment target, add the corresponding preset to your devDependencies in package.json and configure it within app.config.js.
    npm run build

# After building a default Node app, run it with:
npm start

  11. Install the ffmpeg.wasm website

    main

    To set up the website locally, first ensure you have git-lfs installed to handle large files. If you have already cloned the repository without git-lfs, run git lfs pull to download the necessary assets. Then, install the dependencies using npm.

    # If git-lfs was not installed during clone
git lfs pull

# Install dependencies
npm install