Skip to content

Latest commit

 

History

History
69 lines (50 loc) · 1.87 KB

README.md

File metadata and controls

69 lines (50 loc) · 1.87 KB

Filtergrapher

FFmpeg filtergraph editor in the browser. Powered by libavfilter, Vue and Web Assembly!

https://filtergrapher.netlify.app/

screenshot

Try out some video filters from: https://ffmpeg.org/ffmpeg-filters.html#Video-Filters

⚠️ Experimental: Bugs and breaking changes are to be expected.

Development

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.

Requirements

Setup

  • 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.

Compiles and minifies for production

npm run build

Deploy

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/

Resources

License

MIT