26 ms·

Show HN: Open-Source Video Editor Web App

588 points by zenkyu 2y ago

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

nikunjy 2y ago
Are you interested in job opportunities in AI based creator tool.
- zenkyu 2y ago
  maybe add me through my dc server so I could know some more details https://discord.gg/Nr8t9s5wSM https://discord.gg/Nr8t9s5wSM
majestic5762 2y ago
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
hhsectech 2y ago
Nice!
boraturan 2y ago
do you have any insight if your tech stack works well on mobile, demuxer,ffmpeg....
8mobile 2y ago
Hi, nice but I don't really understand how it works. insert a landing page and a video to explain how to edit.
johny115 2y ago
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.
wonger_ 2y ago
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 2y ago
  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_ 2y ago
    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://caniuse.com/?search=webcodecs https://developer.chrome.com/docs/web-platform/best-practices/webcodecs https://developer.chrome.com/docs/web-platform/best-practice...
    - zenkyu 2y ago
      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 2y ago
    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.
skykooler 2y ago
Firefox is not supported apparently.
- zenkyu 2y ago
  yep webcodecs api is not supported in firefox .. any non based chromium browsers
  - koito17 2y ago
    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 2y ago
      good to know, hopefully they will add it soon to work without flags
      - padenot 2y ago
        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 2y ago
        Great! thanks for letting me know, users will finally no longer be faced with sad info that its not supported :D
- deleted 2y ago
  [deleted]
zenkyu 2y ago
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 :)
- tintedfireglass 2y ago
  oh thx for the heads up. I was wondering if it was an issue with my browser addons blocking stuff from loading
- endofreach 2y ago
  If i was you, i would at least say zenkyu for the github stars, but i guess thanks is fine too...
johnwheeler 2y ago
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 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 2y ago
  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 2y ago
  [deleted]
- pvg 2y ago
  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 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.
  - 2y ago
steren 2y ago
I love that it's 100% client side. I tried to drag and drop a .PNG but it didn't work.
- zenkyu 2y ago
  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 2y ago
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 2y ago
  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 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 2y ago
    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 2y ago
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 2y ago
  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-video-encoding-in-browsers-with-webcodecs https://portal.gitnation.org/contents/pushing-the-limits-of-...
chreniuc 2y ago
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 2y ago
  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 2y ago
  [deleted]
deleted 2y ago
[deleted]
SillyUsername 2y ago
How did you get around the Chrome tab max memory 4GB ("32 bit optimisation") limit?
- zenkyu 2y ago
  well ... I didnt :D some of the stuff you just need to live with ..
  - moffkalast 2y ago
    Could potentially use the indexedDB as a swap of sorts, iirc it's typically unlimited. It would probably be quite slow though.
    - zenkyu 2y ago
      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 2y ago
        Ah welp, was worth a shot.
hasante 2y ago
Bravo - impressive work
zenkyu 2y ago
btw shoutout to great frontend framework I built this project with: https://github.com/benevolent-games/slate https://github.com/benevolent-games/slate Im sure he would be happy with some stars :D
- deleted 2y ago
  [deleted]
anonzzzies 2y ago
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 2y ago
  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 2y ago
  I forgot I created discord server, if you want you can join: https://discord.gg/Nr8t9s5wSM https://discord.gg/Nr8t9s5wSM
- deleted 2y ago
  [deleted]
muragekibicho 2y ago
[flagged]
- deleted 2y ago
  [deleted]
GalaxyNova 2y ago
[flagged]
- zenkyu 2y ago
  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 2y ago
  [deleted]
zenkyu 2y ago
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 https://discord.gg/Nr8t9s5wSM
- deleted 2y ago
  [deleted]
deleted 2y ago
[deleted]
fauigerzigerk 2y ago
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 2y ago
  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
breck 2y ago
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/ 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 2y ago
  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 https://discord.com/invite/Nr8t9s5wSM
- adhamsalama 2y ago
  Kden Live.
  - breck 2y ago
    Hadn't heard of this (https://kdenlive.org/en/ https://kdenlive.org/en/). Thank you!
dtgriscom 2y ago
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 2y ago
  [deleted]
jimmiles 2y ago
[flagged]
- nprateem 2y ago
  Only if the prospective employer was confused and thought they were hiring a business exec rather than a developer.
  - necovek 2y ago
    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 2y ago
      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 2y ago
        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 2y ago
  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.
g4zj 2y ago
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 2y ago
  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 2y ago
    Automatic saving seems like the best option. Then you can always just re-open the tab. Undo is better than confirmation.
    - thaumaturgy 2y ago
      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 2y ago
        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 2y ago
Are you looking for a job? Hit me up! whatsapp: +16466701291
- deleted 2y ago
  [deleted]
seabass-labrax 2y ago
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 2y ago
  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 2y ago
    Ah, thanks - I see it now! I was trying to use Ctrl-Z and didn't notice the button.
vjeux 2y ago
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 https://youtu.be/0cb0Bq4gLPo?si=7sPcAuH_9CDzM4xg Let me know if I can be of any help. vjeuxx@gmail.com
martinbaun 2y ago
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 2y ago
great job!
Forgeties79 2y ago
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 2y ago
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 2y ago
  Avidemux without reencoding.
- deleted 2y ago
  [deleted]
gnicholas 2y ago
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 2y ago
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 2y ago
  No please. It's a security nightmare.
l3x4ur1n 2y ago
hi, does it support avi? it doesn't seem so?
ThisIsAWhatWhat 2y ago
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 2y ago
Damn I wish I saw that 5 hours ago, it's just what I needed.

588 points by zenkyu 2y ago

nikunjy 2y ago

Are you interested in job opportunities in AI based creator tool.

zenkyu 2y ago
maybe add me through my dc server so I could know some more details https://discord.gg/Nr8t9s5wSM https://discord.gg/Nr8t9s5wSM

majestic5762 2y ago

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

hhsectech 2y ago

Nice!

boraturan 2y ago

do you have any insight if your tech stack works well on mobile, demuxer,ffmpeg....

8mobile 2y ago

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

johny115 2y ago

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.

wonger_ 2y ago

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 2y ago
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_ 2y ago
  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://caniuse.com/?search=webcodecs https://developer.chrome.com/docs/web-platform/best-practices/webcodecs https://developer.chrome.com/docs/web-platform/best-practice...
  - zenkyu 2y ago
    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 2y ago
  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.

skykooler 2y ago

Firefox is not supported apparently.

zenkyu 2y ago
yep webcodecs api is not supported in firefox .. any non based chromium browsers
- koito17 2y ago
  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 2y ago
    good to know, hopefully they will add it soon to work without flags
    - padenot 2y ago
      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 2y ago
        Great! thanks for letting me know, users will finally no longer be faced with sad info that its not supported :D
deleted 2y ago
[deleted]

zenkyu 2y ago

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

tintedfireglass 2y ago
oh thx for the heads up. I was wondering if it was an issue with my browser addons blocking stuff from loading
endofreach 2y ago
If i was you, i would at least say zenkyu for the github stars, but i guess thanks is fine too...

johnwheeler 2y ago

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 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 2y ago
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 2y ago
[deleted]
pvg 2y ago
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 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.
- 2y ago

steren 2y ago

I love that it's 100% client side. I tried to drag and drop a .PNG but it didn't work.

zenkyu 2y ago
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 2y ago

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 2y ago
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 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 2y ago
  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 2y ago

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 2y ago
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-video-encoding-in-browsers-with-webcodecs https://portal.gitnation.org/contents/pushing-the-limits-of-...

chreniuc 2y ago

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 2y ago
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 2y ago
[deleted]

deleted 2y ago

[deleted]

SillyUsername 2y ago

How did you get around the Chrome tab max memory 4GB ("32 bit optimisation") limit?

zenkyu 2y ago
well ... I didnt :D some of the stuff you just need to live with ..
- moffkalast 2y ago
  Could potentially use the indexedDB as a swap of sorts, iirc it's typically unlimited. It would probably be quite slow though.
  - zenkyu 2y ago
    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 2y ago
      Ah welp, was worth a shot.

hasante 2y ago

Bravo - impressive work

zenkyu 2y ago

btw shoutout to great frontend framework I built this project with: https://github.com/benevolent-games/slate https://github.com/benevolent-games/slate Im sure he would be happy with some stars :D

deleted 2y ago
[deleted]

anonzzzies 2y ago

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 2y ago
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 2y ago
I forgot I created discord server, if you want you can join: https://discord.gg/Nr8t9s5wSM https://discord.gg/Nr8t9s5wSM
deleted 2y ago
[deleted]

muragekibicho 2y ago

[flagged]

deleted 2y ago
[deleted]

GalaxyNova 2y ago

[flagged]

zenkyu 2y ago
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 2y ago
[deleted]

zenkyu 2y ago

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 https://discord.gg/Nr8t9s5wSM

deleted 2y ago
[deleted]

deleted 2y ago

[deleted]

fauigerzigerk 2y ago

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 2y ago
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

breck 2y ago

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/ 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 2y ago
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 https://discord.com/invite/Nr8t9s5wSM
adhamsalama 2y ago
Kden Live.
- breck 2y ago
  Hadn't heard of this (https://kdenlive.org/en/ https://kdenlive.org/en/). Thank you!

dtgriscom 2y ago

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 2y ago
[deleted]

jimmiles 2y ago

[flagged]

nprateem 2y ago
Only if the prospective employer was confused and thought they were hiring a business exec rather than a developer.
- necovek 2y ago
  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 2y ago
    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 2y ago
      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 2y ago
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.

g4zj 2y ago

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 2y ago
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 2y ago
  Automatic saving seems like the best option. Then you can always just re-open the tab. Undo is better than confirmation.
  - thaumaturgy 2y ago
    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 2y ago
      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 2y ago

Are you looking for a job? Hit me up! whatsapp: +16466701291

deleted 2y ago
[deleted]

seabass-labrax 2y ago

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 2y ago
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 2y ago
  Ah, thanks - I see it now! I was trying to use Ctrl-Z and didn't notice the button.

vjeux 2y ago

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 https://youtu.be/0cb0Bq4gLPo?si=7sPcAuH_9CDzM4xg Let me know if I can be of any help. vjeuxx@gmail.com

martinbaun 2y ago

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 2y ago

great job!

Forgeties79 2y ago

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 2y ago

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 2y ago
Avidemux without reencoding.
deleted 2y ago
[deleted]

gnicholas 2y ago

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 2y ago

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 2y ago
No please. It's a security nightmare.

l3x4ur1n 2y ago

hi, does it support avi? it doesn't seem so?

ThisIsAWhatWhat 2y ago

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 2y ago

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