Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

vidds.co

Post reply on HN
Print view View original

41–50 of 51 posts

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#41

Post by iudqnolq »

Andrew_W wrote: post #39
iudqnolq wrote: post #37

Earlier quoted context omitted.

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.

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#42

Post by Andrew_W »

iudqnolq wrote: post #41
Andrew_W wrote: post #39

Earlier quoted context omitted.

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 :)

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#44

Post by felixfbecker »

Andrew_W wrote: post #25
felixfbecker wrote: post #24

Earlier quoted context omitted.

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…

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@ and show me a sample command :)

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.

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#45

Post by Andrew_W »

daxfohl wrote: post #33
Andrew_W wrote: post #16

Earlier quoted context omitted.

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 In…

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.

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#46

Post by Andrew_W »

madeofpalk wrote: post #35
Andrew_W wrote: post #2

* 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'…

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 :)

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#48

Post by Andrew_W »

tonyzzz wrote: post #31

I remembered that WASM application cannot use any kind of hardware acceleration. So have anyone tested the website for large videos?

Definitely a performance hit! Probably a combination of the lack of hardware acceleration and running in a JS virtual machine.

I haven't checked the exact hit, but that's mostly because our focus for this tool was on people who would never touch ffmpeg or a command line.

Also, the alternative for us would've been to upload remotely and run on Lambda or similar, which I think would lack hardware acceleration as well.

Re: Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and GIF-ize videos

#50

Post by daxfohl »

Andrew_W wrote: post #45
daxfohl wrote: post #33

Earlier quoted context omitted.

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).
Post reply on HN