Comment by Andrew_W | Hacker News Reader

Comment by Andrew_W | Hacker News Reader

* VM is upgraded - we're back :) *

Hi HN,

I love new web tech, and was excited to see ffmpeg ported to WebAssembly so decided to build a free tool that uses it to:

- Clip/trim videos - Overlay text and images - Resize - Create GIFs or convert to a web-friendly MP4

All of this done in your browser, without ever uploading a file to a web server! (* Except Safari, it doesn't support SharedArrayBuffers)

A little more:

I've been building a video creation app with my cofounder, and being a 2-man team, we wanted to think outside of the box on an "eng as marketing" strategy.

As a techy on a budget, ffmpeg.wasm sounded like the perfect library to make a powerful free tool without requiring a ton of server resources.

So we looked up some common tasks people want to do with videos and set out to build a quick tool to accomplish them.

I think there's a ton more we can build into this - it's been about a 2 week project, but thought it was cool enough to do an initial release now.

Hope you like it, and have suggestions on what we can improve!

Very cool! I see that SharedArrayBuffers are enabled again, after they were disable due to spectre!?

I have previously tinkered with ffmpeg in the browser and implemented a workaround[1] for the (then) missing pthread support. It turned out quite clunky, but worked.

[1] https://phoboslab.org/files/ffmpeg-mt-fixed/

Yeah, SharedArrayBuffers have been back and forth!

- First they were disabled due to Spectre. - Chrome reenabled them. - New HTTP headers were added for cross-origin resource partitioning. - FF/Chrome are both requiring those headers (FF now, Chrome next month)

That's awesome that you've played around with this, too. It was quite a bit of fun :)

It is a really good idea. My #1 question with this type approach was how big the WASM would end up -- 24MB in this case.

Yeah, that's definitely an issue!

We had to "optimize" loading it twice.

The first time, I moved it from auto-loading to when the user clicks convert to save on bandwidth.

The second time, I moved it to after a file is selected. That gives it time to load while users are presented with options before converting.

It's definitely a trade-off. For us, the choice was easy-ish because we want to keep the budget down as Indie Hackers, so we can't just offer a free tool that costs a ton in backend/serverless charges.

I agree it makes a lot of sense for stuff that could never be offered as a free back-end service. FFmpeg is a complex app as well, I tried to measure the the size of the binary + all shared libraries on my linux system and I came up with almost 180MB. I couldn't tell if the .WASM file was being transferred compressed either, it should compress more than 2x.

(This is how I tried to measure FFmpeg binary size, I have no idea if it is correct:

    ldd $(which ffmpeg) | egrep -o "/[^ ]+" | \
      xargs readlink -f | xargs stat -c '%s' | \
      python3 -c 'import sys; print(sum(map(lambda s: int(s.strip(), 10), sys.stdin.read().split())))'

178092232

)

Yeah. My biggest question when I started building this was whether there was enough in the wasm to support the features we wanted to build.

I've been really happy with the results so far!

You're not adding the size of the ffmpeg binary itself with that.

My ffmpeg which I compiled as follows (with my own filter)

  --enable-gpl --enable-version3 --enable-nonfree --enable-libx264 --enable-libx265 --enable-libmp3lame

is 21,387,880 bytes

Running with your command reports an additional 18,273,624 bytes

linux-vdso.so.1 (0x00007ffcbcdfd000) libm.so.6 => /lib/x86_64-linux-gnu/libm.so.6 (0x00007ff60391b000) libmp3lame.so.0 => /usr/lib/x86_64-linux-gnu/libmp3lame.so.0 (0x00007ff6036a4000) libx264.so.152 => /usr/lib/x86_64-linux-gnu/libx264.so.152 (0x00007ff6032ff000) libx265.so.146 => /usr/lib/x86_64-linux-gnu/libx265.so.146 (0x00007ff60267e000) libpthread.so.0 => /lib/x86_64-linux-gnu/libpthread.so.0 (0x00007ff60245f000) libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007ff60206e000) /lib64/ld-linux-x86-64.so.2 (0x00007ff605d14000) libdl.so.2 => /lib/x86_64-linux-gnu/libdl.so.2 (0x00007ff601e6a000) libnuma.so.1 => /usr/lib/x86_64-linux-gnu/libnuma.so.1 (0x00007ff601c5f000) libstdc++.so.6 => /usr/lib/x86_64-linux-gnu/libstdc++.so.6 (0x00007ff6018d6000) libgcc_s.so.1 => /lib/x86_64-linux-gnu/libgcc_s.so.1 (0x00007ff6016be000)

I guess it depends what you compile in.

This is a slightly more correct command I think:

    du -cb $(ldd $(which ffmpeg) | egrep -o "/[^ ]+" | cat <(which ffmpeg) - | xargs readlink -f) | tail -n1

I think this is what the ffmpeg.wasm-core project is compiling in:

https://github.com/ffmpegwasm/ffmpeg.wasm-core/blob/n4.3.1-w...

Overall I think the wasm size is pretty good, maybe even smaller than the non-wasm binaries to a first approximation.

Have you tried running this as a fastly worker?

Nope! It's all running client-side, so it uses a bit more bandwidth, but there's no way a serverless platform can compete with the cost :)

If the tool is popular long term, we might do a serverless option to make it accessible to Safari users or something though.

I'd be curious what difference it makes. Supposedly fastly compiles wasm down to native first, so it should run faster. Obviously fetch time would be faster since it's sitting on their hard drives. Data transfer would obviously be video file size and bandwidth dependent. A lot of variables there, but still it would be interesting to see even for your particular bandwidth and distance from a fastly server, for what file size the break even point is (for a few different operations).

Any plans to support WEBM? Files are even smaller than MP4, which makes them perfect for replacing GIFs

Yeah, webm is already built in to ffmpeg, we just had a pretty limited focus for our initial release.

Even our mp4s aren't very well-optimized right now.

If you work with video a bit and think this tool might be helpful to you, let me know!

I record little screencasts/demos regularly for embedding them on webpages and currently always convert them with the ffmpeg CLI to WEBM, but it's really cumbersome and hard to remember all the command line flags you need to use (especially with 2 passes). I don't really like online cloud converters though because each video needs to both be uploaded and downloaded again and I'm worried they do a lossy compression on the video behind the scenes. A simple to use, trustworthy, client-based webapp to do this would be amazing.

That's awesome! Do you have an example ffmpeg command you run?

We're trying to keep this tool super simple for our end users, but I think we might be able to add a webm preset.

If you'd like me to look into it, drop me an email: andrew@<domain in link> and show me a sample command :)

I use the very basic:

    ffmpeg -i FILE -codec:v libvpx-vp9 -qscale:v 0 -codec:a libvorbis -qscale:a 0 FILE.webm

And end up with really good results out the other end. When I was rendering with pre-VP9 I needed a few more flags (stuff like crf) to maintain quality, but this works fine for most things. And has been really impressive on the filesize side of things.

I use this command I found on SO (was the first Google result): https://video.stackexchange.com/a/28276

    ffmpeg  -i input.mp4  -b:v 0  -crf 30  -pass 1  -an -f webm /dev/null
    ffmpeg  -i input.mp4  -b:v 0  -crf 30  -pass 2  output.webm

Making it two passes seems to be important for WEBM according to the post. It has worked well for me so far, but I need to look it up every time.

Amy advice for someone trying to write code against the ffmpeg api for the first time? It's...esoteric and the "correct" way seems to be reading a bunch of ten year old blog posts by random uncertain people. Even the python binding devs have a disclaimer they aren't confident they understand everything they document, despite doing their best to read the source.

Oh, no, I have nothing there, sorry! haha

I'm using ffmpeg.wasm, it's basically ffmpeg compiled for the browser, and it's a simple layer where you basically treat it like the ffmpeg command, eg:

ffmpeg.run(['-i', 'input.gif', ..., 'output.gif').then(() => { // handle output file })

Don't sell yourself short, the cli args aren't easier either.

True! When I first started building a video creation app, I was flailing around with google searches to find snippets to use. It was such a relief to spend an hour reading ffmpeg docs to understand how it works.

And I'm still learning a ton :)

The main reason why I use ffmpeg/edit videos is to take my 3440x1440 screen recordings and crop+resize them in a format friendly for twitter, otherwise twitter will do its own (additional?) resizing and compression which just destroys videos

Sorry for not responding sooner.

That sounds like a great use case for us to handle! Although I think ffmpeg in the browser loses some efficiency over the command line.

I think we added cropping as a possible future feature. I'll bet ffmpeg makes that really easy to do.

I think we should also work on optimizing the output size. I think we use a pretty high (err, low) -crf, which can result in ridiculous file sizes.

Thanks for the comment! Appreciate hearing use cases :)

Reply on news.ycombinator.com