FFMPEG.WASM
ffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
External Libraries
ffmpeg.wasm is built with common external libraries, and more of libraries to be added! (You can request them HERE)
x264
H.264 codec
x265
H.265 codec
libvpx
VP8/VP9 codec
theora
OGV codec
wavpack
WAV/WV codec
lame
MP3 codec
fdk-aac
AAC codec
vorbis
OGG codec
opus
OPUS codec
freetype2
Font file renderer
libass
subtitle renderer
libwebp
WEBP codec
Installation
Install ffmpeg.wasm:
# Use npm$ npm install @ffmpeg/ffmpeg @ffmpeg/core# Use yarn$ yarn add @ffmpeg/ffmpeg @ffmpeg/core
Usage
With few lines of code you can use ffmpeg.wasm
Browser
<body><video id="player" controls></video><input type="file" id="uploader"><script src="ffmpeg.min.js"></script><script>const { createFFmpeg, fetchFile } = FFmpeg;const ffmpeg = createFFmpeg({ log: true });const transcode = async ({ target: { files } }) => {const { name } = files[0];await ffmpeg.load();ffmpeg.FS('writeFile', name, await fetchFile(files[0]));await ffmpeg.run('-i', name, 'output.mp4');const data = ffmpeg.FS('readFile', 'output.mp4');const video = document.getElementById('player');video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));}document.getElementById('uploader').addEventListener('change', transcode);</script></body>
Node.JS
const fs = require('fs');const { createFFmpeg, fetchFile } = require('@ffmpeg/ffmpeg');const ffmpeg = createFFmpeg({ log: true });(async () => {await ffmpeg.load();ffmpeg.FS('writeFile', 'test.avi', await fetchFile('./test.avi'));await ffmpeg.run('-i', 'test.avi', 'test.mp4');await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'test.mp4'));process.exit(0);})();
Demo
Try ffmpeg.wasm now!
$ ffmpeg -i video.avi -c:v libx264 video.mp4
Edit the code block below to test your scenario (Download Sample Video/Audio):
x264 (mp4)
Use ffmpeg.wasm the way you like!
Template repositories for you to quick adopt ffmpeg.wasm into your project!
Useful Write-Ups
These write-ups can help know more details about ffmpeg.wasm, and even help you to build your own ffmpeg.wasm!
FFmpeg.wasm, a pure WebAssembly / JavaScript port of FFmpeg
Introduction to ffmpeg.wasm and technical details behind
Build FFmpeg WebAssembly version (= ffmpeg.wasm): Part.1 Preparation
A series of tutorials of using Emscripten to build ffmpeg
Build FFmpeg WebAssembly version (= ffmpeg.wasm): Part.2 Compile with Emscripten
A series of tutorials of using Emscripten to build ffmpeg
Build FFmpeg WebAssembly version (= ffmpeg.wasm): Part.3 ffmpeg.wasm v0.1 — Transcoding avi to mp4
A series of tutorials of using Emscripten to build ffmpeg
Build FFmpeg WebAssembly version (= ffmpeg.wasm): Part.4 ffmpeg.wasm v0.2 — Add Libx264
A series of tutorials of using Emscripten to build ffmpeg