[HN Gopher] Show HN: WebAssembly and ffmpeg = Quick clip, overla...
___________________________________________________________________
Show HN: WebAssembly and ffmpeg = Quick clip, overlay, resize and
GIF-ize videos
Author : Andrew_W
Score : 85 points
Date : 2021-03-25 13:58 UTC (9 hours ago)
(HTM) web link (vidds.co)
(TXT) w3m dump (vidds.co)
| jack_riminton wrote:
| "Error establishing a database connection" is what I'm getting.
| Hug of death?
|
| EDIT: working again now, looks pretty cool!
| Andrew_W wrote:
| Uggh yes. Which is awesome, but... damn! haha
|
| Might need to delete and repost later?
| Andrew_W wrote:
| It's up - for now :)
| Andrew_W wrote:
| Thanks! DO made it kind of easy to upgrade the virtual machine
| haha.
| kumarm wrote:
| Its amazing what we can do with modern browsers today.
|
| Our app plug: 7 years back we did a quick tool to shrink JPG's in
| browser (Again needs Chrome or Firefox) without uploading images
| to server: http://shrinkjpeg.com
| Andrew_W wrote:
| Seriously! We were trying to build our video editor in the same
| style (eg like tinypng and GIF optimizers).
|
| It's so cool to do it all in the browser!
|
| I even built a simple landing page creator that let you change
| text and images, then created a zip file that you could extract
| to your web host - no backend needed!
|
| I think for me, CORS is the biggest hindrance to some of my
| ideas, esp. around editing, creation, and working with the
| content.
| FunnyLookinHat wrote:
| This is awesome - nice job!
|
| Adding the ability to loop the gif back and forth would be great!
| Andrew_W wrote:
| Interesting idea, like append the video to itself but reversed
| for a clean loop? I like this idea :)
| danabrams wrote:
| "You might have come across .mov while working with Apple
| softwares such as QuickTime, it was introduced in 1998 and uses a
| top secret compression algorithm. It is often quoted as the
| catalyst to Apple bringing feature length movie quality to their
| devices."
|
| This description is absolutely killing me.
| prussian wrote:
| sounds cool. wonder in practice how this will work out with
| patent encumbered video formats.
| Quarrel wrote:
| Don't the patent holders want the creation / manipulation of
| patent encumbered videos?
|
| Unfortunately, of course, they then want to get paid during
| playback, but that's the reality for everyone already.
| tonyzzz wrote:
| I remembered that WASM application cannot use any kind of
| hardware acceleration. So have anyone tested the website for
| large videos?
| arsalanb wrote:
| This is great! Another neat project that comes to mind is
| https://modfy.video
| Andrew_W wrote:
| Oh that tool is neat, and they have a super slick UI!
|
| Our tool definitely isn't as slick, but I think that has its
| benefits too. Like our trim interface doesn't look as nice, but
| shows a live preview of where you're at in the video.
|
| I want their UI and style haha
| cryogenicplanet wrote:
| This is super cool, love to see more people working in this
| space!
|
| Would love to chat about what you guys doing.Potentially
| collab and improve both our products!
|
| Reach out rahul@modfy.video
| Andrew_W wrote:
| Emailing you now :)
| Andrew_W wrote:
| * 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!
| madeofpalk wrote:
| 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
| [deleted]
| iudqnolq wrote:
| 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.
| Andrew_W wrote:
| 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 })
| iudqnolq wrote:
| Don't sell yourself short, the cli args aren't easier
| either.
| Andrew_W wrote:
| 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 :)
| PowerfulWizard wrote:
| 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.
| Andrew_W wrote:
| 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.
| daxfohl wrote:
| Have you tried running this as a fastly worker?
| PowerfulWizard wrote:
| 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
|
| )
| iso1210 wrote:
| 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.
| PowerfulWizard wrote:
| 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.
| Andrew_W wrote:
| 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!
| felixfbecker wrote:
| Any plans to support WEBM? Files are even smaller than MP4,
| which makes them perfect for replacing GIFs
| Andrew_W wrote:
| 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!
| felixfbecker wrote:
| 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.
| Andrew_W wrote:
| 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 :)
| felixfbecker wrote:
| 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.
| shakna wrote:
| 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.
| phoboslab wrote:
| 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/
| Andrew_W wrote:
| 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 :)
| had-rien wrote:
| Awesome idea, it is hard to try for now but it could be very
| useful. I especially like simple clip and resize feature but
| can't try them right now...
| Andrew_W wrote:
| Sorry if you were having trouble because the website was down.
| We upgraded the server and it seems to be doing a little
| better!
|
| But also get it if you mean you're not in a good place to test
| the tool at the moment haha
| had-rien wrote:
| I have managed to try it now, and indeed it is almost perfect
| for my use case : Often I find videos on youtube for example
| which I want to show snippet to someone or save it. So I
| download it easily with youtube-dl but then clipping is never
| really easy (especially on linux).
|
| To improve the tool it would be nice to play the part clipped
| with the sound to check if it's ok. Also the tool failed to
| load one video.
|
| Good job !
| Andrew_W wrote:
| If you send me an e-mail (andrew@<domain in link>), I can
| dig in a bit more and let you know when I add it :)
| Andrew_W wrote:
| Hey, this feedback is great! And it isn't even too
| difficult to add - we have live clipped playback in our
| main app.
|
| When it failed to load the video, did it show a convert
| option that failed to load it as well? I think there are
| some limitations to the ffmpeg.wasm compile. Do you know
| the extension, or any details of the codecs, etc?
___________________________________________________________________
(page generated 2021-03-25 23:02 UTC)