Some of the features: multi-track timeline, frame accurate seek, MP4 export, audio, video, image, and text tracks, and a WebGL backed canvas where available. It also works on mobile.
Under the hood, WebCodecs handles frame decode for timeline playback and scrubbing, which is what makes seeking responsive since decode runs on the hardware decoder when the browser supports it. FFmpeg compiled to WebAssembly handles final encode, format conversion, and anything WebCodecs does not cover. Rendering goes through Pixi.js on a WebGL canvas, with a software fallback when WebGL is not available. Projects live in IndexedDB and the heavy work runs in Web Workers so the UI stays responsive during exports.
Happy to answer technical questions about the tradeoffs involved in keeping the whole pipeline client-side. Any feedback welcome.
FFmpeg's license is the LGPL 2.1. VidStudio looks like closed source software, I couldn't see any indication that it's free software. You're distributing this software to run in the client's browser. I'm not a lawyer but I think you're in breach of the terms of the LGPL.
- Provide links to the source of the version of ffmpeg you used in your code
- User should be able to replace the ffmpeg libs with his own compatible builds if you're using dynamically linked libs. For statically linked libs, you need to provide the tools to re-link against a compatible build.
I went through an LGPL review recently so some of this is fresh in my memory, but please correct me if I'm wrong.
I wonder if you can keep your application itself closed source, but make an open-source adapter that handles the interaction with FFMPEG.
I'm not super familiar with open source licensing, and IANAL, so make sure to do your own research :)
As an example, I believe Audacity required me to install ffmpeg manually myself, and add it to my path. This is slightly different since Audacity itself is also open source. But could be helpful to reference.
Mmmm...potential commercialisation? Always find it curious that people expect to get source code for free in ways that they don't do for other work (ask George Martin to release his drafts and notes).
Different isolates might even be enough to satisfy GPL, similar to how you can invoke FFmpeg as a command line tool from a closed application. Though that feels like legally shaky ground.
However, some popular codecs use GPL, which, if enabled, would require to distribute the rest of the code under it as well.
Anyway, OP doesn't do most of the things FFmpeg lists under their "License Compliance Checklist".
For example, we're complaining about a licensing issue for an app that can run locally (in your browser, no uploads needed). The licensing issues can easily be side-stepped by the the developer if they chose instead to do all the media manipulation in the backend.
In the end, for the user this means they have to upload & trust a random service with their data, potentially can't get raw data out, and other negative side-effects of lock in.
Legitimately asking, which points and how are they expected to handle it for this type of app (assuming they want to keep it closed source)? As far as I understand it they just need to credit the libraries?
A "your browser can't decode this codec, try Chrome" nudge would probably spare people the bounce, especially on test imports from their phone.
I went down the same path for videotobe.com, fully client-side with ffmpeg.wasm, and it fell over on longer videos. The memory ceiling and encode times pushed me to a cloud processing pipeline.
You've managed to solve both, the WebCodecs plus Pixi plus ffmpeg.wasm split looks like the right decomposition in hindsight.I processed 3+ hrs of media using VidStudio and it held up. Nicely done!
"Your browser does not support the codec "hvc1.2.4.L156". Try a different video."
Ok, fair, probably need to use Chrome for this type of tool. Tried it in Chrome:
"Audio decode failed: your browser cannot decode the audio in "..._webm.bin". Try re-encoding the file with AAC audio."
Sad. Hope you manage to work this out. Let me know if you have a newsletter or something where I can get notified if this gets fixed.
I've been using server-based (online, upload required) tools for this sort of stuff, but am now going to be using this.
Pretty cool find considering I have no need for a full-fledged video editor right now, and was just checking this out for fun.
I'm interested in how you handle demuxing different container formats any which ones are supported?
I get "Audio decode failed: your browser cannot decode the audio in "41b1aee9-ac65-43f6-b020-e8fed77c3c72_webm.bin". Try re-encoding the file with AAC audio." for a WEBM with no audio.
h264/aac MP4 works, is that demuxed with mp4box.js? I noticed seeking (clicking or scrubbing on timeline) initializes a new VideoDecoder and destroys the previous one for every new frame, leading to abysmal performance as you lose decoder state and a lot of decoding work has to be repeated. Plus the decoder reinitialization time. Is that because the demuxing logic doesn't give precise access to encoded frames? iirc mp4box.js didn't support that last time I checked.
How is the performance? Curious if you've tried using the FFmpeg libraries directly (libav), rather than compiling all of FFMpeg to WASM?
I always end up using running FFmpeg directly since it's faster and more reliable, but I still have some hope for a full functioning browser-based implementation someday.
I also made https://ffmpeg-commander.com a while back to generate commands for FFmpeg.
Wondering if it support subtitle and transcript? It would be helpful for non-native speaker use case.
Also, can you talk more about the use case difference between VidStudio vs. Finalcut/Imovie/Premiere? I am quite interested. Thanks
Does anyone know if there is any limitation to create a "https-local://" or something like that, which guarantee that things are only downloaded, and never uploaded?
It sounds like a similar stack, but distributed as an app. FFmpeg (LGPL compilation).
I haven't tried Pixi.js, looks interesting. I guess it was good for this.
Have you looked at remotion? I found them good for somethings, but ended up using Safari for rendering (instead of remotion's chrome-based rendering) because app packaging was easier that way.
https://www.loremlabs.com/cliproom if you're interested in comparing
I really need this website if everything works well!
ffmpeg supports decoding 10-bit video.
