Show HN: Video editor built with WebCodecs, WebAssembly and WebGL
vidmix.appHello 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 <video> 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!
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)
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!
Ah I meant, if I drag [n] images at once, eg. cat.jpg, dog.jpg and fish.jpg -- Three fish.jpgs are inserted (Chrome 96). Cheers for the reply, and again, the work looks great :)
+1 Would also love for this to become open source!
What's wrong with Firefox, why does it have limited features?
It doesn't have WebCodecs: https://caniuse.com/?search=videodecoder
The app seem to be working fine to me on Firefox. Which feature not available on Firefox? I just did some basic editing in Firefox and all features I tried (haven't tried them all) seem working. Even motion tracking works.
The biggest problem is not supporting h264 encoding for the output.
Also as the preview playback is done with html video elements and those can't be started at a precise enough time, the timing of these videos are imprecise and may not align with other elements. This only happens at playback or scrubbing, not when staying on a single frame and the exported result should not be affected.