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

Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

vidmix.app

Post reply on HN
Print view View original

1–10 of 13 posts

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#2

Post by bjano »

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor.

pros:

- Everything is processed locally, nothing is sent to the cloud. This means privacy, but also speed: if you want to extract a 20 seconds part of a 800 MB video file, you don't have to wait for the upload. - No limits on frame size or video length. It isn't using any cloud resources so no need to put artificial limits on that. - Precise timing. Seems like a small thing, but surprisingly difficult to get it right with html tags. - Preview matches exactly the final result: the exact same code generates the preview and the exported video, not some ugly hack attempting to replicate what you see in the browser to the cloud renderer.

cons:

- It only works properly in Chrome and Edge, with some acceptable fallbacks in Firefox. - HEVC is not supported by any browser, so for that FFmpeg is needed but that's only fast enough on recent computers - Everything needs to be loaded into memory. Compared to the cloud-based editors this isn't much of an issue as those typically limit you to 100-200 MB files anyway, but eventually I'd like to use the Filesystem API to make it possible to edit videos of any size.

Also there are plenty of more advanced features: unlimited number of layers, motion tracking, blending modes, using LUT files, a not-so-basic painting tool, etc.

Let me know if you have any questions or feedback!

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#3

Post by ilovefood »

bjano wrote: post #2

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor. pros: - Ever…

I just tried it out with the demo project and I've gotta say, it's extremely well done, thanks a lot for making this available. It covers most of my needs for quick video edits, I was initially confused as to how I can create a new layer but I found it out quickly enough. However I couldn't import an mp3, I guess it's not currently supported right? Again, really really well done! This has enormous potential. :)

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#4

Post by bjano »

ilovefood wrote: post #3
bjano wrote: post #2

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor. pros: - Ever…

I just tried it out with the demo project and I've gotta say, it's extremely well done, thanks a lot for making this available. It covers most of my needs for quick video edits, I was initially confused as to how I can create a new layer but I found it out quickly enough. However I couldn't import an mp3, I guess it's not currently supported right? Again, really really well done! This has enormous potential. :)

Thank you, great to hear that you like it!

mp3 files not loading was an embarrassing bug, I just fixed it, should work now. (only remaining issue I just realised is that the volume panel doesn't show up when the track is first selected, I'll look into that later)

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#8

Post by SailingSperm »

bjano wrote: post #2

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor. pros: - Ever…

Any chance this will become open source? Would love to take a deeper look into it. Looks great though! And something that can use animated webp and do conversions! +BugReport - Dragging multiple webps to add, just adds eg. 5 of the first img in dif rows. (Not tested other formats)

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#9

Post by seanchambo »

SailingSperm wrote: post #8
bjano wrote: post #2

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor. pros: - Ever…

Any chance this will become open source? Would love to take a deeper look into it. Looks great though! And something that can use animated webp and do conversions! +BugReport - Dragging multiple webps to add, just adds eg. 5 of the first img in dif rows. (Not tested other formats)

+1 Would also love for this to become open source!

Re: Show HN: Video editor built with WebCodecs, WebAssembly and WebGL

#10

Post by bjano »

SailingSperm wrote: post #8
bjano wrote: post #2

Hello HN! WebCodecs landed in chromium recently opening new possibilities for browser-based video editing: instead of relying on cloud-based processing, everything can now be done locally. As I never had a good answer when app developer friends asked me how to quickly edit their screen recordings for appstore listings, I decided to build something with this: a no download, no sign-up, no BS video editor. pros: - Ever…

Any chance this will become open source? Would love to take a deeper look into it. Looks great though! And something that can use animated webp and do conversions! +BugReport - Dragging multiple webps to add, just adds eg. 5 of the first img in dif rows. (Not tested other formats)

At the moment I don't have plans to make it open source.

I suspect that the drag and drop limit of 5 may be a browser/OS limitation, now I couldn't reproduce this but will look out for it. And yes, probably it would make more sense to put them on the same track after each other so I will change that. Thanks for pointing this out!

Post reply on HN