FFmpeg filtergraph editor in the browser. Powered by libavfilter, Vue and Web Assembly!
https://filtergrapher.netlify.app/
Try out some video filters from: https://ffmpeg.org/ffmpeg-filters.html#Video-Filters
filtergrapher uses emscripten to compile FFmpeg's libav to Web Assembly via Docker.
Emscripten is also used to create and compile the Wasm bindings to be imported by the browser.
nodejs- https://nodejs.org/en/download/docker- https://docs.docker.com/desktop/
- Clone project and build the Wasm module via Docker:
docker-compose run filtergrapher make
This will build the Wasm module and place it into the /dist directory.
- Copy the JS and Wasm modules into
www/public/:
cp -a dist/. www/public/
- Install and run the web application:
cd www
npm install
npm run serve
- Load
http://localhost:8080/in the web browser.
npm run build
Builds and deploys to gh-pages branch.
However, I am hosting on Netlify to enable SharedArrayBuffer support via the required CORS headers.
npm run deploy
View at: https://alfg.github.io/filtergrapher/
- https://ffmpeg.org/doxygen/4.1/index.html
- https://ffmpeg.org/doxygen/4.1/filtering_video_8c-example.html
- https://ffmpeg.org/ffmpeg-filters.html#Video-Filters
- https://emscripten.org/
- https://vuejs.org
- https://bootstrap-vue.org
MIT