Using FFmpeg WASM in Quasar

qyloxe

ffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.

Home page is here:
https://ffmpegwasm.github.io/

Using this in Quasar is quite simple:

In file package.json in section dependencies add:

    "@ffmpeg/ffmpeg": "^0.9.3"

And then run from command line npm or yarn install.

In your Quasar page in template section add this:

    <video ref="player" controls></video>
    <input type="file" @change="transcode">

In <script> section add this:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'

...
  methods: {
    async transcode ({ target: { files } }) {
      const ffmpeg = createFFmpeg({ log: true })
      const { name } = files[0]
      await ffmpeg.load()
      const file = await fetchFile(files[0])
      ffmpeg.FS('writeFile', name, file)
      await ffmpeg.run('-i', name, 'output.mp4')
      const data = ffmpeg.FS('readFile', 'output.mp4')
      const urlblob = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
      this.$refs.player.src = urlblob
    }
  }
...

FFmpeg currently works in last 2 chromium versions, so do quasar dev, open chrome browser and choose some SMALL local video file (this conversion example could be time consuming). Open dev tools and look at the console log. The ffmpeg will be initialized and then the file will be converted and prepared for playing. Quite simple.

From now on you can process audio/video files in the browser, you can convert them, filter, transcode and much,much more. All of this without any server processing. More examples on the project’s home page and… in thousands of ffmpeg recipes.

Have fun for next weekend with video and Quasar!

Exercise for the reader - do the same with Quasar’s Electron build target!

Exercise for another advanced reader - do some benchmarks with local ffmpeg installation and various threading options

dobbel

@qyloxe

Can this ‘guide’ also been seen as a general approach for implementing/using other .wasm files/projects in Quasar?

qyloxe

@dobbel said in Using FFmpeg WASM in Quasar:

@qyloxe

Can this ‘guide’ also been seen as a general approach for implementing/using other .wasm files/projects in Quasar?

General? Rather not. The .wasm is wrapped in this library, thats why it’s so easy.

dobbel

@qyloxe

Not wanting to hijack you thread, but I found this plugin to wrap .asm files for use in vue:

plugin:
https://github.com/BrockReece/vue-wasm

article:
https://medium.com/@brockreece/vue-webassembly-1a09e38d0389

Could that be interesting approach to integrate/use .asm in Vue?

qyloxe

@dobbel said in Using FFmpeg WASM in Quasar:

@qyloxe
Not wanting to hijack you thread, but I found this plugin to wrap .asm files for use in vue:

feel free to hijack or byejack

Could that be interesting approach to integrate/use .asm in Vue?

Sure. The ffmpeg is interesting because it is highly useful in some applications. The general WASM imho is rather hard to find a purpose at least in my line of work.

Anyway - you asked about general solution - from the user point of view, then yes, this is specialized project, BUT from a developer point of view, the whole ffmpeg integration as a project a developer environment on github could be useful in other wasm projects. BUT on the other hand, the new WASM projects are started with rust or nim with llvm backend probably, so I don’t really know if it could/would be useful in real world applications.

So, ffmpeg in the browser could be VERY useful. From what I’ve seen it is an early project BUT there’s active development.

No More Posting New Topics!

Using FFmpeg WASM in Quasar