[HN Gopher] Show HN: Open-Source Video Editor Web App
___________________________________________________________________
Show HN: Open-Source Video Editor Web App
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.
Author : zenkyu
Score : 490 points
Date : 2024-05-12 02:35 UTC (20 hours ago)
| wonger_ wrote:
| 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 wrote:
| 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_ wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| WQ112'ccyyxxyyy6c7c7
| bjano wrote:
| 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 wrote:
| Firefox is not supported apparently.
| zenkyu wrote:
| yep webcodecs api is not supported in firefox .. any non based
| chromium browsers
| koito17 wrote:
| 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 wrote:
| good to know, hopefully they will add it soon to work
| without flags
| padenot wrote:
| 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 wrote:
| Great! thanks for letting me know, users will finally no
| longer be faced with sad info that its not supported :D
| zenkyu wrote:
| 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 wrote:
| If i was you, i would at least say zenkyu for the github stars,
| but i guess thanks is fine too...
| johnwheeler wrote:
| 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 wrote:
| 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
| pvg wrote:
| _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 wrote:
| 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 wrote:
| I love that it's 100% client side.
|
| I tried to drag and drop a .PNG but it didn't work.
| zenkyu wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 ..
| SillyUsername wrote:
| How did you get around the Chrome tab max memory 4GB ("32 bit
| optimisation") limit?
| zenkyu wrote:
| well ... I didnt :D some of the stuff you just need to live
| with ..
| moffkalast wrote:
| Could potentially use the indexedDB as a swap of sorts, iirc
| it's typically unlimited. It would probably be quite slow
| though.
| zenkyu wrote:
| 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
| moffkalast wrote:
| Ah welp, was worth a shot.
| hasante wrote:
| Bravo - impressive work
| zenkyu wrote:
| 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
| anonzzzies wrote:
| 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 wrote:
| 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
| zenkyu wrote:
| I forgot I created discord server, if you want you can join:
| https://discord.gg/Nr8t9s5wSM
| zenkyu wrote:
| 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
| fauigerzigerk wrote:
| 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 wrote:
| 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 wrote:
| > 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| breck wrote:
| 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 wrote:
| 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
| adhamsalama wrote:
| Kden Live.
| breck wrote:
| Hadn't heard of this (https://kdenlive.org/en/).
|
| Thank you!
| dtgriscom wrote:
| 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.
| g4zj wrote:
| 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 wrote:
| 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 wrote:
| Automatic saving seems like the best option. Then you can
| always just re-open the tab. Undo is better than
| confirmation.
| thaumaturgy wrote:
| 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.
| randall wrote:
| Are you looking for a job? Hit me up! whatsapp: +16466701291
| seabass-labrax wrote:
| 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 wrote:
| 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 wrote:
| Ah, thanks - I see it now! I was trying to use Ctrl-Z and
| didn't notice the button.
| vjeux wrote:
| 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
| martinbaun wrote:
| 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!
| armen99 wrote:
| great job!
| BolexNOLA wrote:
| 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.
| antifa wrote:
| 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.
| buccal wrote:
| Avidemux without reencoding.
| gnicholas wrote:
| 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.
| dsp_person wrote:
| 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...
| ing33k wrote:
| No please. It's a security nightmare.
| l3x4ur1n wrote:
| hi, does it support avi? it doesn't seem so?
| ThisIsAWhatWhat wrote:
| 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...
| Diris wrote:
| Damn I wish I saw that 5 hours ago, it's just what I needed.
___________________________________________________________________
(page generated 2024-05-12 23:01 UTC)