FFMPEG In The Browser

Learn how to run FFmpeg directly in the browser using WebAssembly. This guide covers setup, performance tips, and practical examples for video and audio processing without server-side dependencies.

ffmpeg / Main options ffmpeg.org

ffmpeg has been compiled to web assembley via emscripten a number of times typically it will run in a worker thread since by its nature it is very computationally heavy and will tie up the main thread

emscripten : Module object emscripten.org

videoconverter.js

bgrins / videoconverter.js github.com

there are two variants, both are
ffmpeg version 2.2.1 Copyright (c) 2000-2014 the FFmpeg developers
ffmpeg.js -- https://github.com/bgrins/videoconverter.js/blob/master/build/ffmpeg.js 22.5 MB
ffmpeg-all-codecs.js -- https://github.com/bgrins/videoconverter.js/blob/master/build/ffmpeg-all-codecs.js 26.3 MB
the files themselves are available from ( right click save as )
ffmpeg.js -- https://raw.githubusercontent.combgrins/videoconverter.js/master/build/ffmpeg.js
ffmpeg-all-codecs.js -- https://raw.githubusercontent.com/bgrins/videoconverter.js/master/build/ffmpeg-all-codecs.js
in my testing the all-codecs version is about 4 times slower
they are just javascript's, so you can use them by incuding a single, albeit quite large, file
it exposes a single function ffmpeg_run
note. there was mention of muaz-khan / Ffmpeg.js github.com
it does offer some additional exmaple code, but as far as i can tell its simply a varaiant of ffmpeg.js from videoconverter.js

tl;dr

ffmpeg.wasm

ffmpegwasm / ffmpeg.wasm github.com
ffmpeg version 5.1.4 Copyright (c) 2000-2023 the FFmpeg developers
this version i dont think was built to run purely in the browser and so i wrote a little patch for it so it can load its files from a remote server, such as github.com
its a little bit slower than the versions above, but quite a bit newer
the files that are needed are
ffmpeg-core.js -- https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd/ffmpeg-core.js
index.js -- https://cdn.jsdelivr.net/npm/@ffmpeg/util@0.12.2/dist/cjs/index.js
814.ffmpeg.js -- https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.15/dist/umd/814.ffmpeg.js
ffmpeg.js -- https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.15/dist/umd/ffmpeg.js
ffmpeg-core.wasm -- https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd/ffmpeg-core.wasm

tl;dr


Kagami / ffmpeg.js

https://github.com/Kagami/ffmpeg.js/tree/master
ive noticed this addition library, but havent had time to look at it further, i'll try to come back to it, and see if it is actually an independent version

media mimetypes

when working with audio / video its often helpful to determine the mime types of the codecs in use, actually this only works for mp4