Varför vi byggde ett webbläsarbaserat videobearbetningsverktyg

När vi började bygga videoverktyg för webben var den konventionella visdomen tydlig: videobearbetning hör hemma på servern. Ladda upp filen, kör FFmpeg, returnera resultatet. Enkelt, beprövat och djupt begränsat av bandbredd, kostnad och integritet.

Vi trodde att det måste finnas ett bättre sätt. Det visar sig att det finns – och det har funnits i våra webbläsare hela tiden.

Status Quo: ffmpeg.wasm

De senaste åren har ffmpeg.wasm varit den självklara lösningen för videobearbetning i webbläsaren. Det kompilerar FFmpeg till WebAssembly, vilket ger dig tillgång till hela FFmpeg-verktygslådan direkt i webbläsaren. Det fungerar, men det kommer med betydande nackdelar:

• Stor paketeringsstorlek: ffmpeg.wasm-kärnan är ~25MB, med formatspecifika codecs som driver upp det till 30MB+
• Långsam initiering: Laddar en 25MB WebAssembly-modul innan någon bearbetning startar
• Enkeltrådad som standard: Ingen åtkomst till hårdvaruacceleration
• Minnesbegränsningar: WebAssemblys linjära minnesgränser (4GB) skapar problem med stora filer
• Ingen hårdvaruavkodning: Endast programvaruavkodning/kodning, saknar helt GPU-acceleration

I våra benchmarks tog en 50MB MP4-videokomprimering med 70 % kvalitet 45-60 sekunder med ffmpeg.wasm. Inte hemskt, men inte heller jättebra.

WebCodecs-metoden

WebCodecs API är ett relativt nytt webbläsar-API som ger direkt åtkomst till webbläsarens inbyggda mediekodekar – samma som används för videouppspelning på YouTube, Netflix och alla andra streamingplattformar. Viktiga fördelar:

• Hårdvaruacceleration: Använder GPU för avkodning och kodning där det är tillgängligt
• Noll paketeringskostnad: Ingen WebAssembly, inga kompilerade binärer – det är ett inbyggt webbläsar-API
• Snabb initiering: Tillgängligt omedelbart, ingen laddningstid
• Fullt formatstöd: H.264, H.265, VP8, VP9, AV1 – vad din webbläsare än stöder

Haken? WebCodecs är lågnivå. Du måste hantera demuxing, bildruta-för-bildruta-kodning, containerformatering och allt däremellan. Det är mycket VVS-arbete.

Här är mediabunny

Vi byggde mediabunny – ett lättviktsbibliotek som omsluter WebCodecs med ett enkelt, ergonomiskt API. Det hanterar de komplexa delarna:

• Automatisk demuxing: Upptäcker containerformat och extraherar video-/ljudströmmar
• Kontroll på bildrutnivå: Åtkomst till individuella bildrutor för exakt redigering
• Smart omkodning: Konfigurerbara kvalitetsförinställningar med realtidsframsteg
• Minnes-effektiv streaming: Bearbetar bildrutor i bitar, inte allt på en gång

Prestandajämförelse

3-5 gånger snabbare över hela linjen, med dramatiskt lägre minnesanvändning och noll paketeringskostnad.

Sekretess: Den avgörande funktionen

Prestanda är bra, men här är vad som verkligen skiljer webbläsarbaserad bearbetning åt: sekretess genom arkitektur.

Med serverbaserade verktyg litar du på någon annan med dina data. Även välmenande tjänster har servrar som kan utsättas för intrång, stämmas eller felkonfigureras. Med VideosKit:

• Filer lämnar aldrig din enhet – det finns bokstavligen ingen server-endpoint för filuppladdningar
• Inga cookies, ingen spårning, ingen analys av filinnehåll
• Fungerar offline när den väl laddats – bearbeta videor på ett flygplan, i ett begränsat nätverk, var som helst
• Företagsvänlig för känsligt innehåll – inga problem med datalagring eller efterlevnad

Utvecklingsutmaningarna

Att bygga detta var inte utan utmaningar:

Hantering av stora filer

Webbläsare ger dig inte slumpmässig filåtkomst. Vi använder File API + streaming för att bearbeta videor bildruta för bildruta utan att ladda hela filen i minnet. Detta krävde noggrann buffert-hantering och justering av skräpsamling.

Kompatibilitet mellan webbläsare

WebCodecs stöds i Chrome 94+, Edge 94+ och Safari 16.4+. Firefox lade till stöd i version 130. Vi upptäcker kapacitet och faller graciöst tillbaka till ett meddelande för webbläsare som inte stöds.

Minneshantering

Videobildrutor är stora – en enda 4K-bildruta är ~33MB okomprimerad. Vi implementerade bildrutepoolning och streaming-pipelines för att hålla minnesanvändningen under kontroll, även med 4K-innehåll.

Framstegsrapportering

Användare behöver veta hur länge de ska vänta. Vi byggde ett callback-system som rapporterar framsteg baserat på bildrutans position, vilket ger exakta realtidsuppdateringar.

Öppen källkod

VideosKit och mediabunny är båda öppen källkod. Kolla in koden:

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

Bidrag, problem och feedback är välkomna.

Framtiden för webbläsarbaserad video

WebCodecs utvecklas fortfarande. AV1-kodning, WebGPU-driven bearbetning och förbättrade MediaSource Extensions kommer att göra webbläsarbaserad video ännu kraftfullare. Vi är glada över att tänja på gränserna för vad som är möjligt.

Om du inte har provat VideosKit än, besök videoskit.cc. Komprimera, konvertera, trimma eller inspektera en video – allt i din webbläsare, allt gratis.