Show HN: Open-Source Video Editor Web App

#1

Post by zenkyu » Sun, May 12, 2024, 2:35 AM UTC

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.

Re: Show HN: Open-Source Video Editor Web App

#2

Post by wonger_ » Sun, May 12, 2024, 4:05 AM UTC

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?

Re: Show HN: Open-Source Video Editor Web App

#3

Post by zenkyu » Sun, May 12, 2024, 4:32 AM UTC

wonger_ wrote: post #2

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?

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

Re: Show HN: Open-Source Video Editor Web App

#4

Post by wonger_ » Sun, May 12, 2024, 4:55 AM UTC

zenkyu wrote: post #3

wonger_ wrote: post #2

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?

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 worki…

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

Re: Show HN: Open-Source Video Editor Web App

#5

Post by esafak » Sun, May 12, 2024, 5:05 AM UTC

zenkyu wrote: post #3

wonger_ wrote: post #2

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?

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 worki…

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.

Re: Show HN: Open-Source Video Editor Web App

#6

Post by skykooler » Sun, May 12, 2024, 5:05 AM UTC

Firefox is not supported apparently.

Re: Show HN: Open-Source Video Editor Web App

#7

Post by zenkyu » Sun, May 12, 2024, 5:09 AM UTC

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 :)

Re: Show HN: Open-Source Video Editor Web App

#8

Post by zenkyu » Sun, May 12, 2024, 5:09 AM UTC

skykooler wrote: post #6

Firefox is not supported apparently.

yep webcodecs api is not supported in firefox .. any non based chromium browsers

Re: Show HN: Open-Source Video Editor Web App

#9

Post by zenkyu » Sun, May 12, 2024, 5:10 AM UTC

esafak wrote: post #5

zenkyu wrote: post #3

Earlier quoted context omitted.

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 worki…

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

Re: Show HN: Open-Source Video Editor Web App

#10

Post by koito17 » Sun, May 12, 2024, 5:11 AM UTC

zenkyu wrote: post #8

skykooler wrote: post #6

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.