FFmpeg WASM encoder

The video editing extension is not included in the Pintura core product, you can upgrade to include it on the product page at https://pqina.nl/pintura, download and add the package to the example folder.

This example uses FFmpeg WASM to create video output. Please note that you need to download and copy the latest FFmpeg WASM files before this example works. See below for installation instructions:

Select an image or video below

Installation

Please make sure to read the FFmpeg GitHub page

The FFmpeg WASM package dist folder contents should be saved to ./ffmpeg/

The FFmpeg WASM Core package dist folder contents should be saved to ./ffmpeg/core/

Resulting in the following directory structure:

pintura-video
├─ favicon.ico
├─ ffmpeg-encoder.html
├─ mediastream-encoder.html
├─ pintura
├─ pintura-video
└─ ffmpeg
   ├─ core
   │  ├─ ffmpeg-core.js
   │  ├─ ffmpeg-core.wasm
   │  └─ ffmpeg-core.worker.js
   ├─ ffmpeg.min.js
   └─ ffmpeg.min.js.map

Important

FFmpeg WASM makes use of SharedArrayBuffer which is only available on webpages that are cross-origin isolated. Your server needs to return these two headers `Cross-Origin-Embedder-Policy: require-corp` and `Cross-Origin-Opener-Policy: same-origin` for SharedArrayBuffer to be activated.

To enabled SharedArrayBuffer for local testing with Chrome:

• Windows: chrome --enable-features=SharedArrayBuffer
• MacOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --enable-features=SharedArrayBuffer

Notes

The FFmpeg package clocks in at 25 megabytes of data so please consider the user network connection before using FFmpeg WASM. Alternatively you can use the MediaStream encoder which uses native browser APIs.

Alternatively we can generate the output video on the server, that way we bypass both the FFmpeg WASM download size and the MediaStream API limitations. Please see the FFmpeg encoder function in the pinturavideo.js file for the filter instructions applied.