Convert Video to GIF with FFmpeg

This post describes how to use Ffmpeg directly in browser, and use native commands. Ffmpeg loads web assembly script in browser, and gives APIs that we can consume.

What is Ffmpeg ?

FFmpeg is a free and open-source software project consisting of a large suite of libraries and programs for handling video, audio, and other multimedia files and streams.

How to add ffmpeg.wasm to vue app

# Use npm
npm  install @ffmpeg/ffmpeg
# Use yarn
yarn  add @ffmpeg/ffmpeg

or you can use CDN directly, read more on https://ffmpegwasm.github.io/#demo

Usage

Import ffmpeg as below

const { createFFmpeg, fetchFile } = FFmpeg
const ffmpeg = createFFmpeg({ log: true })

Load Load ffmpeg.wasm-core script in browser environment

await ffmpeg.load()

Use following file command to do file operations in browser, all data is bound to browser and will be lost on page refresh

// ffmpeg.FS(method, ...args)

// Write file using below command
ffmpeg.FS('writeFile', 'test.mp4', await fetchFile(this.video))

// Read file (already available in FS memory)
ffmpeg.FS('readFile', 'out.gif')

Run ffmpeg command, as ffmpeg native cli.

await ffmpeg.run(
  '-i',
  'test.mp4',
  '-t',
  '5',
  '-ss',
  '5',
  '-f',
  'gif',
  'out.gif'
)
// -t ==> total time of gif
// -ss ⇒ starting seconds or offset

Read more on ffmpeg commands on https://ffmpeg.org/ffmpeg.html

How app will look like

image alt text

Conclusion