Show HN: Open-Source Video Editor Web App

[zenkyu]

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.

[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. [email protected]

[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

[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

[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

[johny115]

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.

[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 ..

[martinbaun]

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!

[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

[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 ;/

[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

[adhamsalama]

Kden Live.

[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-...

[gnicholas]

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]

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]

No please. It's a security nightmare.

[Diris]

Damn I wish I saw that 5 hours ago, it's just what I needed.

[Forgeties79]

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.

[8mobile]

Hi, nice but I don't really understand how it works. insert a landing page and a video to explain how to edit.

[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 ..

[majestic5762]

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