Hvorfor vi bygde et nettleserbasert verktøy for videobehandling

Da vi begynte å bygge videoverktøy for weben, var den etablerte oppfatningen tydelig: videobehandling hører hjemme på serveren. Last opp filen, kjør FFmpeg, returner resultatet. Enkelt, utprøvd og sterkt begrenset av båndbredde, kostnad og personvern.

Vi mente det måtte finnes en bedre måte. Det viser seg at det gjør det - og den har ligget i nettleserne våre hele tiden.

Status quo: ffmpeg.wasm

De siste årene har ffmpeg.wasm vært standardløsningen for videobehandling i nettleseren. Det kompilerer FFmpeg til WebAssembly, slik at du får tilgang til hele FFmpeg-verktøykassen direkte i nettleseren. Det fungerer, men har betydelige ulemper:

• Stor pakkestørrelse: ffmpeg.wasm-kjernen er ~25MB, og formatspesifikke kodeker skyver det til 30MB+
• Treg initialisering: Innlasting av en 25MB WebAssembly-modul før behandling kan starte
• Enkelttrådet som standard: Ingen tilgang til maskinvareakselerasjon
• Minnebegrensninger: WebAssemblys lineære minnegrenser (4GB) skaper problemer med store filer
• Ingen maskinvaredekoding: Kun programvarebasert dekoding/koding, helt uten GPU-akselerasjon

I våre målinger tok komprimering av en 50MB MP4-video til 70 % kvalitet 45-60 sekunder med ffmpeg.wasm. Ikke forferdelig, men heller ikke spesielt bra.

WebCodecs-tilnærmingen

WebCodecs API er et relativt nytt nettleser-API som gir direkte tilgang til nettleserens innebygde mediekodeker - de samme som brukes til videoavspilling på YouTube, Netflix og alle andre strømmeplattformer. Viktige fordeler:

• Maskinvareakselerasjon: Bruker GPU til dekoding og koding der det er tilgjengelig
• Ingen pakkebelastning: Ingen WebAssembly, ingen kompilerte binærfiler - det er et innebygd nettleser-API
• Rask initialisering: Tilgjengelig umiddelbart, ingen lastetid
• Full formatstøtte: H.264, H.265, VP8, VP9, AV1 - det nettleseren din støtter

Hva er ulempen? WebCodecs er lavnivå. Du må håndtere demultipleksing, koding bilde for bilde, containerformatering og alt imellom. Det er mye rørlegging.

Møt mediabunny

Vi bygde mediabunny - et lettvektsbibliotek som pakker inn WebCodecs i et enkelt og ergonomisk API. Det håndterer de kompliserte delene:

• Automatisk demultipleksing: Oppdager containerformat og trekker ut video-/lydstrømmer
• Kontroll på bildeflatenivå: Tilgang til enkeltbilder for presis redigering
• Smart omkoding: Konfigurerbare kvalitetsforhåndsinnstillinger med fremdrift i sanntid
• Minneeffektiv strømming: Behandler bilder i blokker, ikke alt på én gang

Ytelsessammenligning

3-5x raskere over hele linjen, med dramatisk lavere minnebruk og uten pakkebelastning.

Personvern: Den avgjørende funksjonen

Ytelse er flott, men her er det som virkelig skiller nettleserbasert behandling ut: personvern gjennom arkitektur.

Med serverbaserte verktøy stoler du på at andre håndterer dataene dine. Selv tjenester med gode intensjoner har servere som kan bli hacket, pålagt utlevering eller feilkonfigurert. Med VideosKit:

• Filer forlater aldri enheten din - det finnes bokstavelig talt ikke noe serverendepunkt for filopplastinger
• Ingen informasjonskapsler, ingen sporing, ingen analyse av filinnhold
• Fungerer offline når siden først er lastet - behandle videoer på et fly, i et begrenset nettverk, hvor som helst
• Bedriftsvennlig for sensitivt innhold - ingen bekymringer rundt dataresidens eller etterlevelse

Utviklingsutfordringene

Å bygge dette var ikke uten utfordringer:

Håndtering av store filer

Nettlesere gir deg ikke tilfeldig filtilgang. Vi bruker File API + strømming for å behandle videoer bilde for bilde uten å laste hele filen inn i minnet. Dette krevde nøye bufferstyring og justering av garbage collection.

Kompatibilitet på tvers av nettlesere

WebCodecs støttes i Chrome 94+, Edge 94+ og Safari 16.4+. Firefox la til støtte i versjon 130. Vi oppdager kapasitet og faller elegant tilbake til en melding i nettlesere som ikke støttes.

Minnehåndtering

Videobilder er store - ett enkelt 4K-bilde er ~33MB ukomprimert. Vi implementerte bildepuljer og strømmepipelines for å holde minnebruken under kontroll, selv med 4K-innhold.

Fremdriftsrapportering

Brukere må vite hvor lenge de må vente. Vi bygde et callback-system som rapporterer fremdrift basert på bildeposisjon, og gir nøyaktige oppdateringer i sanntid.

Åpen kildekode

VideosKit og mediabunny er begge åpen kildekode. Sjekk ut koden:

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

Bidrag, issues og tilbakemeldinger er velkomne.

Fremtiden for nettleserbasert video

WebCodecs utvikler seg fortsatt. AV1-koding, WebGPU-drevet behandling og forbedrede MediaSource Extensions vil gjøre nettleserbasert video enda kraftigere. Vi er glade for å flytte grensene for hva som er mulig.

Hvis du ikke har prøvd VideosKit ennå, besøk videoskit.cc. Komprimer, konverter, trim eller inspiser en video - alt i nettleseren din, helt gratis.