Skip to content

Dinoosauro/ffmpeg-web

Repository files navigation

ffmpeg-web

A Web and Native UI for ffmpeg-wasm: convert video, audio and images using the power of ffmpeg, directly from your web browser or from your computer.

Try it: https://ffmpeg-web.netlify.app/

Want something faster than your browser? Run ffmpeg-web with the full power on your device using native ffmpeg and Electron only as a renderer. Read more in the "Electron" section below.

Netlify Status

Deploy to Netlify

What you can do:

Convert video and audio

You can convert video and audio files with lots of encoders. You can convert thanks to this tool basically every:

  • Video content to: H264 (MP4), H265 (MP4), VP9 (WebM), VP8* (WebM), Theora* (OGG), Windows Media Video* (WMW)
  • Audio content to: MP3, AAC (M4A), Vorbis (OGG), Opus (OGG), FLAC, ALAC, WAV, Windows Media Audio* (WMA)

Note: * You need to enable "Show less common codec" in Settings

Merge video and audio file

You can merge video and audio files by selecting the "Copy video" and "Copy audio" tag while encoding a media file. This will permit you to merge the video files (see "Selecting a file" for important notice)

Customize media size:

You can change the video/audio bitrate, and other essential settings of that media file (like FPS, orientation, channels etc.) directly from the interface.

Add filters

You can add both video and audio filters. The most common (I think) ones have a GUI, but you can pass any ffmpeg video filter configuration you want.

Custom command

Do you have a ffmpeg command that you need to execute? Write that in the "Custom command" section, and ffmpeg-web will execute that.

Merge media

If you have two or more videos/audios and you want to merge them, use this section. This will avoid re-encoding, so your media will be immediately ready.

Edit metadata

If you need to quickly edit some metadata, there's a section dedicated to it. Choose from lots of default metadata keys, or create your own. Add the value and then click to "Add value". Select the files and, without any re-encoding, the metadata will be edited.

Convert images

Just like videos and audios, ffmpeg-web can also convert images to lots of formats. You can also add some filters, the same as video's ones.

Extract album art

ffmpeg-web can easily extract album arts. Just choose the "Extract album art" option and select the audio files.

File selection

At the top right of the page, you can see a "File selection" tab. Before doing that, make sure you've set everything you want correctly. Then, if you are converting your media, you should look at all the ways you can manage multiple files by clicking on the select below the title:

  • You can keep only the first file in the script
  • Add all of the files in the output one (ffmpeg -i file1 -i file2 ... output)
  • Keep the files that have the same name
    • You can choose if keeping only the files that have the same name as the first file or do the script for each combination of equal names
  • Execute the same command for each selected file

Trim content

ffmpeg-web permits you to trim content in lots of cases. You can choose to trim a video:

  • Providing the start and the end of the new video
  • Writing a lists of timestamps with a divider (ex: useful if you need to trim video by chapters)

Settings

You can change some settings in ffmpeg-web:

  • Show less popular encoders
  • Save the output files in a ZIP file (you'll be able to download it by pressing the "Download zip" button at the end of the page)
  • Enable hardware acceleration (only on Electron)
  • Create and change themes
  • Change the length of alerts
  • See the open source licenses

Electron

You can run ffmpeg-web with native performance using Electron:

  1. Clone this repository (you can download it as a zip if you don't have git installed)
  2. Make sure to have Node.JS installed. The last LTS is recommended, but other versions might work.
  3. Build the dist folder, so that you'll need to download the resources only once, by writing node webHost.js local electron in the command line
  4. Finally, write npm run start to open the Electron build. From now on, you'll need to write only this to run ffmpeg-web.

Differences between Electron and Web/Docker version:

  • The Electron version is way faster, since it relies on native ffmpeg and not on a WebAssembly version
  • The Electron version offers hardware acceleration features. Note that only Apple and Intel hardware acceleration have been tested
  • You need to manually install ffmpeg on your device to run the Electron version, while the Web/Docker has the WebAssembly version built-in
  • You cannot create zip files from the Electron version

Dockerfile

You can run ffmpeg-web also in a Docker container. Clone the repository (or download the zip file) and then build the image:

docker build -t ffmpeg-web .

After this, you can start the container. Note that the exposed container port is 3000:

docker run 127.0.0.1:3000:3000 ffmpeg-web

Privacy

Every video is elaborated locally, and nothing is sent to a server. ffmpeg-web connects to:

  • Google Fonts: fetch fonts (no other data sent)
  • JSDelivr & unpkg: fetch essential scripts that make ffmpeg-web work
  • Netlify: hosting

Note that, if you are using Microsoft Edge, you should disable "Enhance security from this website" from the HTTPS secure symbol in the status bar. In this way, ffmpeg will encode the media faster than before. After you've chosen the files, the conversion will start automatically. You'll be able to see the progress at the end of the page

Offline use

You can install ffmpeg-web as a Progressive Web App to use it offline.