HN Explorer

Show HN: Open-Source Video Editor Web App

588 points by zenkyu ↗ HN
Hey everyone, for the past like six months I've been working on a portfolio project. I got tired of doing easy projects, so I decided to tackle something bigger and more challenging. That's when I came up with the idea of a video editor. This piece of work is intended to showcase my skills and land me a job, but I like to think when working on projects that my idea is so cool that people will like to use it, and I treat every project like a startup idea. Also I havent seen many open source video editors especially on web so that was one of the points why I decided to make that and not something else, but in the end its learning experience and im not expecting much if at all.

A bit about the video editor itself:

-website: https://omniclip.app/

-its free

-its open source (MIT Licensed)

-its using Webcodecs API for quick rendering

-works fully inside browser, client side, no private data is kept

-I made some readme with more details, im not expecting contributions but I added bit about it: https://github.com/aegir-assembly/omni-clip

Features:

-Trimming

-Splitting

-Supports - Text, Audio, Video (mp4) and Images

-Clip editing on preview - rotating, resizing, text styling and more

-Undo/Redo

-Render in different resolutions, up to 4k.

Things to know before using this editor:

-it is simple editor, but its my main project im working on and improving it.

-right now it only works with videos 25 fps and more but not less

-only 4 tracks -- its something I could improve quickly but forgot

-bug here and there (eg. filmstrip not rendering until timeline scroll moved)

-its not working on phones yet (drag and drop API problems)

I'd love to hear your thoughts and feedback on it.

110 comments

[ 2.3 ms ] story [ 227 ms ] thread
wonger_
Nice, seems like a good learning project. Black screen on mobile was disappointing, but oh well.

I've thought about video editing in the browser before. I understand there's a memory limit, something like 5GB iirc. Have you experienced that yet?

zenkyu
hmm yeah you will probably get black screen when its still loading, it is pretty big because of ffmpeg, probably about 50-80mb to load, ive noticed it myself but its usually couple of seconds, thats error on my end because im handling that loading not right because it should show loading indicator but its not ... but it wont work on mobile anyways, i need to fix problem with drag and drop because its simply not working, i dont exacly remember what was the memory limit, but it depends on the browser, i havent experienced the memory limit yet btw
wonger_
Ah yep! I just didn't wait long enough. Very cool. Seems like it took a lot of work. And it seems better than other browser-based video editors I've seen in the past, so kudos.

TIL about the webcodecs API to get frames of video and chunks of audio: https://caniuse.com/?search=webcodecs

https://developer.chrome.com/docs/web-platform/best-practice...

zenkyu
yeah sorry for that long loading and not properly showing indicator, it took long time for me to develop especially because I was trying to learn as much so I usually tried doing something myself for weeks and then finally thinking that was idiot move and using library, webcodecs API is super cool, im hoping they will also add muxing and demuxing to api, though I like ffmpeg because im using it more than just muxing and demuxing in this project
esafak
Make your loader indicate progress or something. Show what you will be able to do after it is finished loading... do something useful with that time. I thought you got hugged so I backed out after a few seconds.
zenkyu
yeah i will, sorry for that, i thought im handling it correctly but im not, and i was deceived becuase mine was already downloaded and cached so it no longer loaded for that long ...
[dead] hdlothia
[flagged]
hdlothia
Sorry everyone I posted this by accident on mobile and don't know how to delete it
bjano
You don't need to keep the video files in memory, it's enough to have the javascript File object and then you can read the packets you need on the fly. This way the app's memory usage should be okay.

This is what I did in my similar project (vidmix.app) and seems to be what OP's project is doing, except that they also copy the file to indexedDB to keep it around after the browser tab is closed.

skykooler
Firefox is not supported apparently.
zenkyu
yep webcodecs api is not supported in firefox .. any non based chromium browsers
koito17
Firefox supports the WebCodecs API behind a feature flag. Set dom.media.webcodecs.enabled to true. I am able to use your app this way -- the media import, timeline, and player functionality seems to work fine.
zenkyu
good to know, hopefully they will add it soon to work without flags
padenot
We're aiming to release this half, so in a month or so, on all desktop platforms, mobile will follow shortly after.

Then we'll gradually optimize (e.g. enable the use of more hardware encoders, decoding being generally in hardware at launch of supported) release after release, but generally almost everything will be supported at launch.

zenkyu
Great! thanks for letting me know, users will finally no longer be faced with sad info that its not supported :D
[deleted]
(comment deleted)
zenkyu
For anyone wondering why you are getting black screen, sorry for that, I completely forgot about handling it correctly, mine project was already cached so i forgot about this problem, basically you need to wait until it loads about 50-80mb

PS: thanks to anyone for giving me github stars :)

endofreach
If i was you, i would at least say zenkyu for the github stars, but i guess thanks is fine too...
tintedfireglass
oh thx for the heads up. I was wondering if it was an issue with my browser addons blocking stuff from loading
johnwheeler
That’s funny - I created one as well, but it took me a bit longer. It’s not as full featured as yours in the non linear editing sense, but it’s for a different use case

I’m trying to launch it on Show HN right now but not having your success :-(

It was hard as shit to build. mine is commercial

You can see my editor in action here:

https://www.demo.fun/d/lSVixyJOZeZ1ugT

It’s specialized for its use case—editing product demos, but, I had to virtualize the timeline events to support cutting and nested cuts. In other words, when a cut in placed in the video, I jump to the point in time at the end of the cut and adjust all surrounding events.

It doesn’t do join and split, but I would know how to do that.

Also lots of FFmpeg stuff on AWS Lambda

Love to chat sometime about what you learned! Yours is very impressive!

zenkyu
thanks im glad you think its impressive it means a lot for me after working on it so hard for so long and after endless destroyed sleeping schedules ... I did learn a lot about the tools like ffmpeg or mp4boxjs, and general idea about video processing and codecs to make it work .. in other words tons of different things to learn to pull it off, but thats what I wanted :D I needed to challenge myself because im not confident in my abilities as programmer so hearing some nice words about my project is all I need now
[deleted]
(comment deleted)
pvg
but not having your success

A couple of ideas to consider:

Include a blurb in your submission like you did here:

https://news.ycombinator.com/item?id=40234611

But maybe take the salesy-ness down a little and add a bit of technical or other interesting detail.

Think of a way to make it easier for HN readers to try - right now, there's no way to try the full thing without a credit card which is a massive barrier for most casual evaluators. Watermark but more of the full feature set could be an option, for example.

ldenoue
I also built ScreenRun, a video editor with zooms and fake clicks running 100% client side with web codecs. You can try for free https://screenrun.app/
steren
I love that it's 100% client side.

I tried to drag and drop a .PNG but it didn't work.

zenkyu
ooh theres that super confusing bug .. well another bug that im finding out about too late ..., if you tried to drag and drop file from explorer to the website then it wont work, but in the same time it will show that drop indicator which is confusing, I completely forgot to implement the importing on drop and in the same time I didnt remove that indicator, well stupid me, honestly I havent got many people to test it so it is what it is ;/
thatandyrose
Hey this is awesome! I'd love to hear more about some big issues you had, and how you solved them. For example, you mentioned using the webcodecs API for quick rendering. What do you mean by that? What was the slower alternative? Also when did you choose ffmpeg Vs webcodecs API and what were the differences? A lot questions, sorry just really impressed!
zenkyu
So basically webcodecs API is the best thing to happen in video processing, decoding and encoding are the most demanding parts of rendering, honestly there werent any good alternatives at all and If it wasnt for webcodecs api I wouldnt even bother trying to do it fully clientside, it would be slow and all, here is a bit about the alternatives: https://github.com/w3c/webcodecs/blob/main/explainer.md none of those alternatvies were specifically just for decoding and encoding, usually you had to work around it and get average results at best which I really wasnt satisfied with. When it comes to ffmpeg vs webcodecs API, honestly ffmpeg is slow as decoder and encoder I really dont recommend using it when theres webcodecs api, obviously depends what you are trying to do, but my god I dont remember exacly how fast it was but ive got like 10 fps when decoding or something like that, you would be better off just playing the video and drawing it in real time
matsemann
Thanks for the input! Some time ago I wanted to make some simple canvas animation into a video (output of some sensor data), but the animation should take about 5++ minutes to play, real time to the sensor values.

I found no way of really exporting it in browser without either rendering it real time (so having to wait forever) or through some asm ports (still slow). So this is better now?

chompychop
Awesome work! Could you tell us a little about how you went about building this? What resources would you recommend for learning to build something like this?
zenkyu
honestly when starting this project I knew that the rendering is most expensive, thats what I started digging into first and I found webcodecs API, it was like dream come true for my project, but that was just a start of my painful journey :D theres little tutorials how to use it, fortunately most of the issues I faced I could find solution on just github issues. Webcodecs is just decoding and encoding, but part of rendering is also muxing and demuxing, I recommend using ffmpeg wasm for that, or build your own webassembly version which should be leaner if you really need that. Generally the rendering process consists of a canvas that you need to draw things on in right order and place and time. First you demux your video file and decode its frames using webcodecs decoder, decoder is doing its work inside worker, you push those frames as they are decoded to some array and in the same time you draw those frames and other stuff on canvas and dispose/close the frames that are already drawn and are not needed, at the end of each canvas draw you send that canvas to another worker with encoder, encoder is doing its work encoding frames, and you push those encoded frames to some binary array, at the end of the work you just mux those frames and save the file :) I dont know if it makes sense, might not because i know those stuff may sound confusing .. but If you take it bit by bit i assure you will make it

I did watched this video to get some broad idea how all that works, https://portal.gitnation.org/contents/pushing-the-limits-of-...

chreniuc
I've noticed that having a screen recording or tab recording feature is very useful. I wanted to do a demo of my web app and looked for a while for a tool to be simple, I ended up using clipchamp.com.
zenkyu
I will definitely add that, I have a lot of cool things too add so stay tuned :D Psst, i havent mention that anywhere, but I want to add 3d animations, so your video will look like its in 3d, that will make those marketing kind of videos about websites or someting else that look flat look super cool, like some sliding animation from bottom to top, some zoom in and out, close ups from different points of views etc ..
[deleted]
(comment deleted)
[deleted]
(comment deleted)
SillyUsername
How did you get around the Chrome tab max memory 4GB ("32 bit optimisation") limit?
zenkyu
well ... I didnt :D some of the stuff you just need to live with ..
moffkalast
Could potentially use the indexedDB as a swap of sorts, iirc it's typically unlimited. It would probably be quite slow though.
zenkyu
I did tried that and yes it was slow, like it almost didnt make sense to use webcodecs api because there was too big of a bottleneck
anonzzzies
This is excellent work! Let’s see if I can contribute to the open parts as they seem more in my boring dev experience :)

Anyone know of a feature rich MIT (or similar; no (a)gpl) license based web based image editor I can use in my saas app?

zenkyu
cool! im a bit not prepared, I havent got any issues per se to work on, those 2 I have are old and I will remove them, to be honest I didnt expect that much reception, but I will try to figure something out for you if you are willing to contribute
[deleted]
(comment deleted)
[dead] GalaxyNova
[flagged]
zenkyu
sorry it doesnt work on firefox yet, webcodecs api is not supported here, but you can enable this flag: Set dom.media.webcodecs.enabled to true to make it work
[deleted]
(comment deleted)
zenkyu
for anyone willing to contribute, or just anyone who want to join, perhaps join my discord so we could somehow communicate: https://discord.gg/Nr8t9s5wSM
[deleted]
(comment deleted)
[deleted]
(comment deleted)
fauigerzigerk
Sorry for responding to relatively unimportant usability details rather than to the core of what must be a tremendously difficult project. But as one purpose of this app is to showcase your work, perhaps my feedback isn't completely useless and certainly not meant to offend.

When I open the home page, I see almost nothing right out of the gate. There's no contrast at all. It's all tiny dark symbols on a vast black back background. After I let my eyes adjust for a bit, I see an empty timeline with absolutely no indication of how to load anything into it. I tried closing the timeline by clicking on the X in the upper right corner, but nothing happens.

Clicking on some faint squares in the upper right produces more nested panes. Contrary to the main pane they do have a menu (with labels, which is great). Clicking on the text menu produces uneditable example text in that pane. Hovering the mouse over the example text makes a plus icon appear. Clicking it creates a big red bar below the timeline in the original pane. I can change its size horizontally, but I can't find a way to enter any text.

I think someone who works with video editors a lot wouldn't be quite as confused by this user interface as I am. But a web app like this is probably aimed at casual users like me.

So my suggestions are:

a) More contrast! If you absolutely must do dark mode then you must also make everything on that black background big, fat and very bright, or people like me will think they just turned blind.

b) Better discoverability! All those tiny faint controls that appear only when the mouse is hovering over them are making it extremely hard for video editing newbies like me to understand what's going on.

c) Do some more testing. Besides not being able to enter any text, the plus icon in the text editor that normally produces those red bars stopped responding for me after a while. Refreshing the page brought it back to life.

I'm using Chrome on Mac with a not too great external monitor, which might make some of the contrast issues worse than it would appear to others.

Congrats to actually releasing something!

zenkyu
Appreciate the detailed feedback and yeah sorry for those issues, I kind of wanted to make it raw for now to leave to test just the core features so i tried perfecting that, I mean I could make it more beautiful and all but I dont have infinite time -- in the end im trying to get a job with it and work on it on the side because its open source so I know I wont get any money out of it at all, so I aimed to make core features not to bugged out and show it as it is, but still you feedback is very helpful, like best I've got so far, so im saving all you said and surely I will improve it the way you said
grodriguez100
> I could make it more beautiful and all but I dont have infinite time -- in the end im trying to get a job with it

My two cents only, and this is meant to be constructive criticism. Precisely because you are trying to land a job with this I think you should try to polish as much as possible.

As an employer I’d probably get a better impression if someone shows me a less ambitious project, but one where attention to detail shines everywhere, rather than a more ambitious project that looks “half cooked”. The message I am looking for is “I can do things well, and I care” and for me that is more important than the size of the project.

Of course I am aware that this is completely subjective.

zenkyu
yeah I know... I had attention but too much to core features but not exacly the ui, I knew ui is flawed, honestly I thought its not as bad as it seems to be, but those feedbacks opened my eyes and so maybe I will try managing to have some more time to polish it, I mean now after this much recognition on this post I really started reconsidering where I want to go with this project ...
joenot443
In my experience, employers aren’t really impressed by “I made this project so you’d give me a job”, they’re impressed by living breathing projects with actual users which solve an actual problem.
crazygringo
I just want to push back on the contrast part -- you'd be right for most apps.

But video editing requires a dark interface with low contrast, so that it doesn't disturb how you see the video itself.

If you're working on a relatively dark nighttime scene, then bright UX icons would be kind of blindingly bright and impair your ability to work with the footage.

Just look at the interface for something like Adobe Premiere and see how dark and low-contrast it is. It's that way for a good reason.

The usual visual accessibility concerns simply don't apply here because if you have vision problems then video editing is probably not something you do in the first place. In the same way that DAWs (digital audio workstations) don't have accessibility features for the hearing-impaired.

fauigerzigerk
My eyesight is fine. What I'm thinking is that you can't do low contrast, very fine lines (1px) and very small text all at the same time. The lower the contrast, the broader the strokes have to be.

But as I said, the contrast may well be sufficient on a MacBook display while being unreadable on the lowish end monitor connected to my Mac mini. It's certainly not a setup that anyone would do professional video editing on, but casual users may well try.

Good point about the glare though.

[deleted]
(comment deleted)
[deleted]
(comment deleted)
breck
I struggled to use it but it seems like it has potential and I starred it. I love how you land us right into the editing experience. Maybe there's a way to add some kind of short fully featured demo video when a fresh visitor lands? I made an open source fully static web data science studio (https://ohayo.computer/) and it made a big difference to have some simple templates on a fresh session.

I hadn't thought of an open source web video editor, but now I definitely want one.

Are there other good open source web video editors out there? What about other good open source desktop video editors?

Nice choice of idea. Video editing is important. Looking forward to see this develop.

zenkyu
Thats what I wanted to do, to land right into the editor, test it quickly, and give some feedback, and yes I thought about making this demo video and I will probably make it, from what I was looking I didnt notice many open source video editors especially on web, if you want then join the discord: https://discord.com/invite/Nr8t9s5wSM
dtgriscom
A meta comment: the level of attention people are putting into their responses is wonderful. No trolls (except perhaps for those two deleted comments, which itself is great). Nobody trying to score points. Just people being helpful.
[deleted]
(comment deleted)
[dead] jimmiles
[flagged]
nprateem
Only if the prospective employer was confused and thought they were hiring a business exec rather than a developer.
necovek
That's not how things work: when you are hiring a software engineer/developer, you are not looking for someone to produce code by the spec (a "codemonkey"), but to question any assumptions and demands before commiting to them.

I wouldn't expect a "business exec" to worry about download/upload speeds (though I'd note that the claim here is that it's all locally running, so inefficient memory usage is likely a bigger deal), so a good software developer would partner on defining the roadmap.

nprateem
The vast majority of software and businesses are replicative.

If you only hire devs working on unique businesses or those with a sound business case you won't find many. They'll probably be too busy running successful businesses.

necovek
Who said anything about "unique businesses"?

A developer that simply (and only) blindly builds what they are told is rarely a part of a successful team. This translates to technical implementation plans too, but I am highlighting that if you want to get hired, you should showcase how you balance opposing priorities, requirements and time.

And once you do, you'll be judged on them.

moondev
Client side is the entire point that makes this project novel and awesome. It's obvious that the target use case is quick access to an editor in browser for easy video creation.
shkkmo
> I get that it's all client-side, but that is not an advantage to people working with video files, which are often large, and upload speeds are often the biggest bottleneck.

This comment seems strange to me, can you explain it better?

I would guess that for most video editing, source files will generally be either on some form of local storage, or will hosted with a cloud storage provider. Unless your server side editor is also providing your storage, I don't see how this is a benefit. Source files will generally be significantly largers so waiting on uploading material till after you have the finished result seems better for slow connections.

pinkgolem
If you are building any kind of tutorial/user content site, this could be quite a benefit for users + moderators.
madelgi
if i built this and an employer asked me why my project wasn't competitive with leading open source video editing software, i would probably cut the interview short. the vast majority of developers build stuff like this to learn and challenge themselves (which op basically says in the description), only a small fraction are attempting to build a viable product. i'd expect the interviewer to understand this dynamic and not grill me on the target audience for my toy project
[deleted]
(comment deleted)
g4zj
I often close tabs by mistake, and there doesn't seem to be a confirmation dialog when closing the tab (or otherwise navigating away from it) while I'm actively working on an unsaved project. Is this something that could be added?
zenkyu
I think I would be able to add that, also your project is saved every move, either when you move some clip on timeline or on canvas/player
kevincox
Automatic saving seems like the best option. Then you can always just re-open the tab. Undo is better than confirmation.
thaumaturgy
FWIW a few people fly around the web with persistent cookies and localstorage disabled except for selected sites -- once the tab is closed, the data is flushed, and re-opening the tab won't restore it. I'm one of those people. I recognize that this is entirely a "me" problem and don't expect anyone to change the way their software works to accommodate this behavior. Just raising a flag.
Nab443
I would use the following behavior: the first time (loaded with empty storage) ask for confirmation, the next times (if loaded from storage) don't ask.

This would prevent people with auto cleanup to loose their work and avoid annoying others too much.

randall
Are you looking for a job? Hit me up! whatsapp: +16466701291
[deleted]
(comment deleted)
seabass-labrax
Welcome to Hacker News. And what a post for your first post, too :) Omniclip is already at the level where I could have used this for a recent project, for which I had to inset a video inside a slideshow (I ended up using pymovie, but it was time-consuming without a GUI to help me align everything). As for feedback, I think an undo system could be a good next feature. I really appreciate that it's FOSS!
zenkyu
Yea I couldnt dream of better reception of this project after so much work I've put into it... not even expecting. There aleady is undo/redo if thats what you mean, its on timeline panel
seabass-labrax
Ah, thanks - I see it now! I was trying to use Ctrl-Z and didn't notice the button.
vjeux
Thank you so much for working on this! I strongly believe that we need as a community to invest in an open source video editor based on the web using WebCodec. I did a talk last year to beg people to work on it! https://youtu.be/0cb0Bq4gLPo?si=7sPcAuH_9CDzM4xg

Let me know if I can be of any help. vjeuxx@gmail.com