Show HN: Open-Source Video Editor Web App
110 comments
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. [email protected]
Let me know if I can be of any help. [email protected]
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 :)
PS: thanks to anyone for giving me github stars :)
If i was you, i would at least say zenkyu for the github stars, but i guess thanks is fine too...
oh thx for the heads up. I was wondering if it was an issue with my browser addons blocking stuff from loading
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?
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
Automatic saving seems like the best option. Then you can always just re-open the tab. Undo is better than confirmation.
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.
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.
This would prevent people with auto cleanup to loose their work and avoid annoying others too much.
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!
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
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?
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?
Does anybody know a directory of free no-login in-browser apps?
Occasionally I search for something simple like character counter, text editor, etc. but google keeps giving me only ads-ridden login requiring options. I feel like you have to know the URL, they tend to do poorly with SEO as they have no marketing/SEO behind them.
Occasionally I search for something simple like character counter, text editor, etc. but google keeps giving me only ads-ridden login requiring options. I feel like you have to know the URL, they tend to do poorly with SEO as they have no marketing/SEO behind them.
How did you get around the Chrome tab max memory 4GB ("32 bit optimisation") limit?
well ... I didnt :D some of the stuff you just need to live with ..
Could potentially use the indexedDB as a swap of sorts, iirc it's typically unlimited. It would probably be quite slow though.
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
Ah welp, was worth a shot.
Wow this is amazing, I was actually thinking of making something similar but I tried researching and I was like - yeah not going to happen in my life.
Kudos to you, and thanks for making it open source!
Kudos to you, and thanks for making it open source!
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!
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
Ah, thanks - I see it now! I was trying to use Ctrl-Z and didn't notice the button.
I love that it's 100% client side.
I tried to drag and drop a .PNG but it didn't work.
I tried to drag and drop a .PNG but it didn't work.
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 ;/
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.
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.
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
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?
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-...
I did watched this video to get some broad idea how all that works, https://portal.gitnation.org/contents/pushing-the-limits-of-...
[deleted]
[deleted]
Rotating is great! IIRC this is not possible in iMovie, and I've had to resort to importing/exporting via Keynote to accomplish. Would love to be able to do this in a purpose-built tool.
Are there any future solutions to the download size of a ~32MB ffmpeg wasm? Like all the browsers bundle it as a package, or it can be cached by the browser and used across multiple domains...
No please. It's a security nightmare.
Damn I wish I saw that 5 hours ago, it's just what I needed.
As a video editor by trade I am very, very excited to try this out tomorrow! Got a very simple cut I need to do and it’s 25fps (zoom recording) so good timing.
Hi, nice but I don't really understand how it works. insert a landing page and a video to explain how to edit.
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.
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]
Thoughts:
1) add ffmpeg wasm
2) use ffmpeg to detect scene changes
3) you can generate nice & short social media videos based on scene changes
1) add ffmpeg wasm
2) use ffmpeg to detect scene changes
3) you can generate nice & short social media videos based on scene changes
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?
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?
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.
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.
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
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...
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...
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
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.
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 ...
hdlothia(1)
do you have any insight if your tech stack works well on mobile, demuxer,ffmpeg....
Are you interested in job opportunities in AI based creator tool.
maybe add me through my dc server so I could know some more details
https://discord.gg/Nr8t9s5wSM
hi, does it support avi? it doesn't seem so?
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?
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?
I forgot I created discord server, if you want you can join: https://discord.gg/Nr8t9s5wSM
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]
Nice!
great job!
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!
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!
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.
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.
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.
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]
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
> 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.
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.
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 ...
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.
[deleted]
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!
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!
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.
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.
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/
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]
Firefox is not supported apparently.
yep webcodecs api is not supported in firefox .. any non based chromium browsers
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.
good to know, hopefully they will add it soon to work without flags
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.
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.
Great! thanks for letting me know, users will finally no longer be faced with sad info that its not supported :D
[deleted]
btw shoutout to great frontend framework I built this project with: https://github.com/benevolent-games/slate
Im sure he would be happy with some stars :D
[deleted]
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]
Anybody know of a GUI video editor that runs on Linux and has a the ability to crop videos as easily as GIMP/photoshop does? Most of what I've seen is either really clunky/cumbersome to use, has non-GUI bugs/design issues, doesn't claim to have a good crop UI, or it's that one dumbass who doesn't realize that trimming is not cropping.
Avidemux without reencoding.
[deleted]
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]
Bravo - impressive work
Hey, not to take anything away from your work here, but if it's all client-side... why a browser-based thing?
Gotta love how someone downvoted a simple question...
Gotta love how someone downvoted a simple question...
GalaxyNova(2)
jimmiles(6)
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.