Hvorfor vi byggede et browserbaseret videobehandlingsværktøj

Da vi begyndte at bygge videoværktøjer til nettet, var den konventionelle visdom klar: videobehandling hører hjemme på serveren. Upload filen, kør FFmpeg, returner resultatet. Enkelt, gennemprøvet og dybt begrænset af båndbredde, omkostninger og privatliv.

Vi tænkte, at der måtte være en bedre måde. Det viser sig, at der er — og den har siddet i vores browsere hele tiden.

Status Quo: ffmpeg.wasm

I de seneste par år har ffmpeg.wasm været den foretrukne løsning til in-browser videobehandling. Den kompilerer FFmpeg til WebAssembly, hvilket giver dig adgang til hele FFmpeg-værktøjssættet direkte i browseren. Det virker, men det kommer med betydelige ulemper:

• Stor bundle-størrelse: ffmpeg.wasm-kernen er ~25MB, med formatspecifikke codecs, der presser den op til 30MB+
• Langsom initialisering: Indlæsning af et 25MB WebAssembly-modul, før nogen behandling starter
• Single-threaded som standard: Ingen adgang til hardwareacceleration
• Hukommelsesbegrænsninger: WebAssembly lineære hukommelsesgrænser (4GB) skaber problemer med store filer
• Ingen hardwareafkodning: Kun software-afkodning/kodning, mangler fuldstændig GPU-acceleration

I vores benchmarks tog en 50MB MP4-videokomprimering med 70% kvalitet 45-60 sekunder med ffmpeg.wasm. Ikke forfærdeligt, men heller ikke fantastisk.

WebCodecs-tilgangen

WebCodecs API er en relativt ny browser-API, der giver direkte adgang til browserens native mediecodecs — de samme, der bruges til videoafspilning på YouTube, Netflix og alle andre streamingplatforme. Nøglefordele:

• Hardwareacceleration: Bruger GPU til afkodning og kodning, hvor det er tilgængeligt
• Nul bundle-overhead: Ingen WebAssembly, ingen kompilerede binære filer — det er en native browser-API
• Hurtig initialisering: Tilgængelig med det samme, ingen indlæsningstid
• Fuld formatunderstøttelse: H.264, H.265, VP8, VP9, AV1 — hvad end din browser understøtter

Hagen? WebCodecs er lavniveau. Du skal håndtere demuxing, frame-for-frame kodning, containerformatering og alt derimellem. Det er en masse VVS-arbejde.

Her kommer mediabunny

Vi byggede mediabunny — et letvægtsbibliotek, der omslutter WebCodecs med en simpel, ergonomisk API. Det håndterer de komplekse dele:

• Automatisk demuxing: Registrerer containerformat og udtrækker video-/lydstreams
• Kontrol på frame-niveau: Adgang til individuelle frames for præcis redigering
• Smart re-kodning: Konfigurerbare kvalitetsforudindstillinger med realtidsfremdrift
• Hukommelseseffektiv streaming: Behandler frames i bidder, ikke alt på én gang

Ydeevnesammenligning

3-5 gange hurtigere over hele linjen, med dramatisk lavere hukommelsesforbrug og nul bundle-overhead.

Privatliv: Den afgørende funktion

Ydeevne er fantastisk, men her er, hvad der virkelig adskiller browserbaseret behandling: privatliv via arkitektur.

Med serverbaserede værktøjer overlader du dine data til en anden. Selv velmenende tjenester har servere, der kan kompromitteres, stævnes eller fejlkonfigureres. Med VideosKit:

• Filer forlader aldrig din enhed — der er bogstaveligt talt intet server-endpoint til filuploads
• Ingen cookies, ingen sporing, ingen analyse af filindhold
• Virker offline, når den er indlæst — behandl videoer på et fly, i et begrænset netværk, hvor som helst
• Virksomhedsvenlig til følsomt indhold — ingen bekymringer om datalagring eller compliance

Udviklingsudfordringerne

At bygge dette var ikke uden udfordringer:

Håndtering af store filer

Browsere giver dig ikke tilfældig filadgang. Vi bruger File API + streaming til at behandle videoer frame-for-frame uden at indlæse hele filen i hukommelsen. Dette krævede omhyggelig bufferstyring og justering af garbage collection.

Kompatibilitet på tværs af browsere

WebCodecs understøttes i Chrome 94+, Edge 94+ og Safari 16.4+. Firefox tilføjede understøttelse i version 130. Vi registrerer kapacitet og falder elegant tilbage til en meddelelse for browsere, der ikke understøttes.

Hukommelsesstyring

Videoframes er store — en enkelt 4K frame er ~33MB ukomprimeret. Vi implementerede frame-pooling og streaming-pipelines for at holde hukommelsesforbruget under kontrol, selv med 4K-indhold.

Fremdriftsrapportering

Brugere skal vide, hvor længe de skal vente. Vi byggede et callback-system, der rapporterer fremdrift baseret på frame-position, hvilket giver nøjagtige realtidsopdateringer.

Open Source

VideosKit og mediabunny er begge open source. Se koden her:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

Bidrag, problemer og feedback er velkomne.

Fremtiden for browserbaseret video

WebCodecs udvikler sig stadig. AV1-kodning, WebGPU-drevet behandling og forbedrede MediaSource Extensions vil gøre browserbaseret video endnu mere kraftfuld. Vi er begejstrede for at skubbe grænserne for, hvad der er muligt.

Hvis du ikke har prøvet VideosKit endnu, så besøg videoskit.cc. Komprimer, konverter, trim eller inspicér en video — alt sammen i din browser, alt sammen gratis.