5 ms·

FFmpeg-online: ffpmeg running on the browser

97 points by bvaldivielso 3y ago

netsharc 3y ago
As their github page says, based on https://ffmpegwasm.netlify.app https://ffmpegwasm.netlify.app ... I'm guessing no one did GPU-optimizations? I saw a web app (not an ffmpeg transpilation) that went clever and used WebGL so it can access the GPU and use its parallel processing capabilities...
- xyst 3y ago
  It’s nice if you have a modern computer, but I wonder what happens when the client has a very old computer or a “Chromebook”. Will the experience for those low end computers be degraded? It’s been awhile since I actually used ffmeg directly but I do recall trying to transcode some video to a different format and it took some time on a 2015 MacBook (not a MBP, like a thinner version of the MBA, lol)
- devwastaken 3y ago
  The algs for media codecs are typically in handwritten assembly in combination with C. Actual GPU hardware acceleration implements specific media algorithms in hardware and is not accessible from the browser. I'm not aware of any kind of gpu codec algs that work in browser.
  - johntb86 3y ago
    They could use the WebCodec APIs to decode frames using the hardware, similar to how ffmpeg already supports VA-API for hardware decoding.
pojzon 3y ago
Anyone can explain to me why order of input file flag has such an impact on the accuracy of copy ? (Ffmpeg adds/removes randomly few sec)
- Kikawala 3y ago
  Are you using it with seeking? Order of the input flag while using seeking determines whether you're using input seeking or output seeking. https://trac.ffmpeg.org/wiki/Seeking https://trac.ffmpeg.org/wiki/Seeking
  - pojzon 3y ago
    Thanks thats probably it.
leptons 3y ago
I implemented ffmpeg.wasm in my own web app, and it's working out really well. I didn't have to set up a Lambda to resize video, it happens in the user's browser and the result is uploaded directly to S3. It saves me processing cost, and complexity. It was really easy to implement and works perfectly.
- haltist 3y ago
  How large is the wasm binary?
  - pleoxy 3y ago
    Last I looked into this it was around 30MB. wasm does compress really well.
    - haltist 3y ago
      Thanks. That's good to know.
- dadsquad 3y ago
  is this open sourced somewhere?
  - leptons 3y ago
    start here: https://www.npmjs.com/package/@ffmpeg.wasm/main https://www.npmjs.com/package/@ffmpeg.wasm/main
- danShumway 3y ago
  The only caveat I'd mention here for anyone else looking to do something similar is that if you're planning to use ffmpeg to convert a video into multiple different formats for serving at different bitrates or to different devices, then doing it clientside opens up the door for users to upload completely different videos for different formats; you are trusting the client ultimately to send you the data. Plenty of scenarios where that doesn't matter and it's fine to trust the client, but just something to be aware of.
hokkos 3y ago
Or better use the WebCodecs API to be able to use your hardware encoding and decoding facilities.
- crazygringo 3y ago
  Generally speaking, CPU decoding isn't that slow in the first place (compared to any kind of encoding), and hardware encoding is low-quality and lacking in options. Hardware encoding is great for quickly getting a camera feed to disk at a non-professional quality level, but it's hard to imagine ever using it to do a re-encode of anything -- where you usually want to prioritize quality and a smaller size over encoding speed.
  - dpe82 3y ago
    Depends what you're decoding. :) 4k H.265 or AVC will cook your CPU.
amelius 3y ago
When will it become practical to run Linux inside the browser using WASM?
- deleted 3y ago
  [deleted]
- Buttons840 3y ago
  Probably before WASM bytecode can manipulate the DOM without JavaScript. The browser seems on track to do everything except giving first-class support for other languages. I've been studying the WebGPU API, which seems good, and visions of even our game engines being written in JavaScript are continually before my eyes.
- daxelrod 3y ago
  It’s been possible for years. I’m not sure what a good definition of “practical” would be though. https://bellard.org/jslinux/ https://bellard.org/jslinux/
  - amelius 3y ago
    That's exactly why I said "practical" ;)
jonplackett 3y ago
Anyone know what the browser support is likely to be for this? I’m working on something right now where I’m having to use a web service to merge an mp3 and mp4. Doesn’t even need to re-encode. So this might be perfect if a decent amount of browsers can run it.
- lights0123 3y ago
  "Not IE": https://caniuse.com/?search=wasm https://caniuse.com/?search=wasm Multithreading probably requires https://caniuse.com/sharedarraybuffer https://caniuse.com/sharedarraybuffer
untitaker_ 3y ago
Similar, but nicer UI: https://ffmpeg.app https://ffmpeg.app
dang 3y ago
Related: ffmpeg.wasm – a pure WebAssembly / JavaScript port of FFmpeg - https://news.ycombinator.com/item?id=33794122 https://news.ycombinator.com/item?id=33794122 - Nov 2022 (23 comments) FFmpeg for browser and Node, powered by WebAssembly - https://news.ycombinator.com/item?id=28251801 https://news.ycombinator.com/item?id=28251801 - Aug 2021 (87 comments) A pure WebAssembly / JavaScript port of FFmpeg - https://news.ycombinator.com/item?id=24987861 https://news.ycombinator.com/item?id=24987861 - Nov 2020 (125 comments)
deleted 3y ago
[deleted]
syrusakbary 3y ago
This might also be interesting to the readers. In Wasmer we recently ported ffmpeg to Wasm/WASIX. It runs fully in both client (browser) and also fully on the server: https://wasmer.io/wasmer/ffmpeg https://wasmer.io/wasmer/ffmpeg (is multithreaded, all codecs supported) Here's a video showcasing it! https://twitter.com/wasmerio/status/1687238131395768320 https://twitter.com/wasmerio/status/1687238131395768320 I believe we can bring ffmpeg to any programming language quite easily... stay tuned!

97 points by bvaldivielso 3y ago

As their github page says, based on https://ffmpegwasm.netlify.app https://ffmpegwasm.netlify.app ... I'm guessing no one did GPU-optimizations? I saw a web app (not an ffmpeg transpilation) that went clever and used WebGL so it can access the GPU and use its parallel processing capabilities...

xyst 3y ago
It’s nice if you have a modern computer, but I wonder what happens when the client has a very old computer or a “Chromebook”. Will the experience for those low end computers be degraded? It’s been awhile since I actually used ffmeg directly but I do recall trying to transcode some video to a different format and it took some time on a 2015 MacBook (not a MBP, like a thinner version of the MBA, lol)
devwastaken 3y ago
The algs for media codecs are typically in handwritten assembly in combination with C. Actual GPU hardware acceleration implements specific media algorithms in hardware and is not accessible from the browser. I'm not aware of any kind of gpu codec algs that work in browser.
- johntb86 3y ago
  They could use the WebCodec APIs to decode frames using the hardware, similar to how ffmpeg already supports VA-API for hardware decoding.

pojzon 3y ago

Anyone can explain to me why order of input file flag has such an impact on the accuracy of copy ? (Ffmpeg adds/removes randomly few sec)

Kikawala 3y ago
Are you using it with seeking? Order of the input flag while using seeking determines whether you're using input seeking or output seeking. https://trac.ffmpeg.org/wiki/Seeking https://trac.ffmpeg.org/wiki/Seeking
- pojzon 3y ago
  Thanks thats probably it.

leptons 3y ago

I implemented ffmpeg.wasm in my own web app, and it's working out really well. I didn't have to set up a Lambda to resize video, it happens in the user's browser and the result is uploaded directly to S3. It saves me processing cost, and complexity. It was really easy to implement and works perfectly.

haltist 3y ago
How large is the wasm binary?
- pleoxy 3y ago
  Last I looked into this it was around 30MB. wasm does compress really well.
  - haltist 3y ago
    Thanks. That's good to know.
dadsquad 3y ago
is this open sourced somewhere?
- leptons 3y ago
  start here: https://www.npmjs.com/package/@ffmpeg.wasm/main https://www.npmjs.com/package/@ffmpeg.wasm/main
danShumway 3y ago
The only caveat I'd mention here for anyone else looking to do something similar is that if you're planning to use ffmpeg to convert a video into multiple different formats for serving at different bitrates or to different devices, then doing it clientside opens up the door for users to upload completely different videos for different formats; you are trusting the client ultimately to send you the data. Plenty of scenarios where that doesn't matter and it's fine to trust the client, but just something to be aware of.

hokkos 3y ago

Or better use the WebCodecs API to be able to use your hardware encoding and decoding facilities.

crazygringo 3y ago
Generally speaking, CPU decoding isn't that slow in the first place (compared to any kind of encoding), and hardware encoding is low-quality and lacking in options. Hardware encoding is great for quickly getting a camera feed to disk at a non-professional quality level, but it's hard to imagine ever using it to do a re-encode of anything -- where you usually want to prioritize quality and a smaller size over encoding speed.
- dpe82 3y ago
  Depends what you're decoding. :) 4k H.265 or AVC will cook your CPU.

amelius 3y ago

When will it become practical to run Linux inside the browser using WASM?

deleted 3y ago
[deleted]
Buttons840 3y ago
Probably before WASM bytecode can manipulate the DOM without JavaScript. The browser seems on track to do everything except giving first-class support for other languages. I've been studying the WebGPU API, which seems good, and visions of even our game engines being written in JavaScript are continually before my eyes.
daxelrod 3y ago
It’s been possible for years. I’m not sure what a good definition of “practical” would be though. https://bellard.org/jslinux/ https://bellard.org/jslinux/
- amelius 3y ago
  That's exactly why I said "practical" ;)

jonplackett 3y ago

Anyone know what the browser support is likely to be for this? I’m working on something right now where I’m having to use a web service to merge an mp3 and mp4. Doesn’t even need to re-encode. So this might be perfect if a decent amount of browsers can run it.

lights0123 3y ago
"Not IE": https://caniuse.com/?search=wasm https://caniuse.com/?search=wasm Multithreading probably requires https://caniuse.com/sharedarraybuffer https://caniuse.com/sharedarraybuffer

untitaker_ 3y ago

Similar, but nicer UI: https://ffmpeg.app https://ffmpeg.app

dang 3y ago

Related: ffmpeg.wasm – a pure WebAssembly / JavaScript port of FFmpeg - https://news.ycombinator.com/item?id=33794122 https://news.ycombinator.com/item?id=33794122 - Nov 2022 (23 comments) FFmpeg for browser and Node, powered by WebAssembly - https://news.ycombinator.com/item?id=28251801 https://news.ycombinator.com/item?id=28251801 - Aug 2021 (87 comments) A pure WebAssembly / JavaScript port of FFmpeg - https://news.ycombinator.com/item?id=24987861 https://news.ycombinator.com/item?id=24987861 - Nov 2020 (125 comments)

deleted 3y ago

[deleted]

syrusakbary 3y ago

This might also be interesting to the readers. In Wasmer we recently ported ffmpeg to Wasm/WASIX. It runs fully in both client (browser) and also fully on the server: https://wasmer.io/wasmer/ffmpeg https://wasmer.io/wasmer/ffmpeg (is multithreaded, all codecs supported) Here's a video showcasing it! https://twitter.com/wasmerio/status/1687238131395768320 https://twitter.com/wasmerio/status/1687238131395768320 I believe we can bring ffmpeg to any programming language quite easily... stay tuned!