Waarom We een Browsergebaseerde Videoverwerkingstool Hebben Gebouwd
Toen we begonnen met het bouwen van videotools voor het web, was de conventionele wijsheid duidelijk: videoverwerking hoort op de server. Upload het bestand, voer FFmpeg uit, retourneer het resultaat. Eenvoudig, bewezen en diepgaand beperkt door bandbreedte, kosten en privacy.
Wij dachten dat er een betere manier moest zijn. Het blijkt dat die er is — en die zat al die tijd al in onze browsers.
De Status Quo: ffmpeg.wasm
De afgelopen jaren is ffmpeg.wasm de standaardoplossing geweest voor in-browser videoverwerking. Het compileert FFmpeg naar WebAssembly, waardoor je toegang krijgt tot de volledige FFmpeg-toolkit rechtstreeks in de browser. Het werkt, maar het heeft aanzienlijke nadelen:
- Grote bundelgrootte: ffmpeg.wasm core is ~25MB, met formaatspecifieke codecs die het naar 30MB+ tillen
- Trage initialisatie: Het laden van een 25MB WebAssembly-module voordat enige verwerking begint
- Standaard single-threaded: Geen toegang tot hardwareversnelling
- Geheugenbeperkingen: WebAssembly lineaire geheugenlimieten (4GB) veroorzaken problemen met grote bestanden
- Geen hardwaredecodering: Alleen softwarematige decode/encode, mist GPU-versnelling volledig
In onze benchmarks duurde een 50MB MP4-videocompressie op 70% kwaliteit 45-60 seconden met ffmpeg.wasm. Niet verschrikkelijk, maar ook niet geweldig.
De WebCodecs Benadering
De WebCodecs API is een relatief nieuwe browser-API die directe toegang biedt tot de native mediacodecs van de browser — dezelfde die worden gebruikt voor videoweergave op YouTube, Netflix en elk ander streamingplatform. Belangrijkste voordelen:
- Hardwareversnelling: Gebruikt GPU voor decodering en codering waar beschikbaar
- Geen bundeloverhead: Geen WebAssembly, geen gecompileerde binaries — het is een native browser-API
- Snelle initialisatie: Onmiddellijk beschikbaar, geen laadtijd
- Volledige formaatondersteuning: H.264, H.265, VP8, VP9, AV1 — wat je browser ook ondersteunt
Het addertje onder het gras? WebCodecs is low-level. Je moet demuxing, frame-voor-frame codering, containeropmaak en alles daartussenin zelf afhandelen. Dat is veel werk.
Maak Kennis met mediabunny
We hebben mediabunny gebouwd — een lichtgewicht bibliotheek die WebCodecs omhult met een eenvoudige, ergonomische API. Het behandelt de complexe onderdelen:
- Automatische demuxing: Detecteert containerformaat en extraheert video-/audiostreams
- Frame-niveau controle: Toegang tot individuele frames voor precieze bewerking
- Slimme hercodering: Configureerbare kwaliteitsvoorinstellingen met real-time voortgang
- Geheugenefficiënte streaming: Verwerkt frames in chunks, niet allemaal tegelijk
Prestatievergelijking
| Metriek | ffmpeg.wasm | mediabunny (WebCodecs) |
|---|---|---|
| Bundelgrootte | 25-30MB | ~15KB |
| Initialisatie | 3-5s | Direct |
| 50MB compressie (70%) | 45-60s | 10-20s |
| Hardwareversnelling | ❌ | ✅ |
| Geheugengebruik (50MB bestand) | ~800MB | ~300MB |
3-5x sneller over de hele linie, met aanzienlijk lager geheugengebruik en geen bundeloverhead.
Privacy: De Killer Feature
Prestaties zijn geweldig, maar dit is wat browsergebaseerde verwerking echt onderscheidt: privacy door architectuur.
Met servergebaseerde tools vertrouw je iemand anders je gegevens toe. Zelfs goedbedoelde services hebben servers die kunnen worden gehackt, gedagvaard of verkeerd geconfigureerd. Met VideosKit:
- Bestanden verlaten nooit je apparaat — er is letterlijk geen server-endpoint voor bestandsuploads
- Geen cookies, geen tracking, geen analyses van bestandsinhoud
- Werkt offline zodra geladen — verwerk video's in een vliegtuig, in een beperkt netwerk, overal
- Bedrijfsvriendelijk voor gevoelige inhoud — geen zorgen over data residency of compliance
De Ontwikkelingsuitdagingen
Het bouwen hiervan ging niet zonder uitdagingen:
Grote Bestandsafhandeling
Browsers geven je geen willekeurige bestandstoegang. We gebruiken de File API + streaming om video's frame-voor-frame te verwerken zonder het hele bestand in het geheugen te laden. Dit vereiste zorgvuldig bufferbeheer en afstemming van garbage collection.
Cross-Browser Compatibiliteit
WebCodecs wordt ondersteund in Chrome 94+, Edge 94+ en Safari 16.4+. Firefox heeft ondersteuning toegevoegd in versie 130. We detecteren de mogelijkheden en vallen netjes terug op een bericht voor niet-ondersteunde browsers.
Geheugenbeheer
Video frames zijn groot — een enkel 4K frame is ~33MB ongecomprimeerd. We hebben frame pooling en streaming pipelines geïmplementeerd om het geheugengebruik onder controle te houden, zelfs met 4K-inhoud.
Voortgangsrapportage
Gebruikers moeten weten hoe lang ze moeten wachten. We hebben een callbacksysteem gebouwd dat de voortgang rapporteert op basis van de framepositie, wat nauwkeurige real-time updates geeft.
Open Source
VideosKit en mediabunny zijn beide open source. Bekijk de code:
- VideosKit: github.com/nicely-gg/video-tools
- mediabunny: github.com/nicely-gg/mediabunny
Bijdragen, problemen en feedback zijn welkom.
De Toekomst van Browsergebaseerde Video
WebCodecs is nog in ontwikkeling. AV1-codering, WebGPU-aangedreven verwerking en verbeterde MediaSource Extensions zullen browsergebaseerde video nog krachtiger maken. We zijn enthousiast om de grenzen te verleggen van wat mogelijk is.
Als je VideosKit nog niet hebt geprobeerd, bezoek dan videoskit.cc. Comprimeer, converteer, trim of inspecteer een video — alles in je browser, helemaal gratis.