Miksi rakensimme selainpohjaisen videonkäsittelytyökalun

Kun lähdimme rakentamaan videotyökaluja verkkoon, vallitseva näkemys oli selvä: videonkäsittely kuuluu palvelimelle. Lataa tiedosto, aja FFmpeg, palauta tulos. Yksinkertaista, testattua ja syvästi kaistanleveyden, kustannusten ja yksityisyyden rajoittamaa.

Ajattelimme, että täytyy olla parempi tapa. Ja sellainen onkin — se on ollut selaimissamme koko ajan.

Nykytila: ffmpeg.wasm

Viime vuosina ffmpeg.wasm on ollut selainpohjaisen videonkäsittelyn oletusratkaisu. Se kääntää FFmpegin WebAssemblyksi, jolloin koko FFmpeg-työkalupakki on käytettävissä suoraan selaimessa. Se toimii, mutta siihen liittyy merkittäviä haittoja:

• Suuri pakettikoko: ffmpeg.wasm-ydin on noin 25MB, ja formaattikohtaiset koodekit nostavat koon yli 30MB:n
• Hidas alustus: 25MB:n WebAssembly-moduuli täytyy ladata ennen kuin käsittely voi alkaa
• Oletuksena yksisäikeinen: Ei pääsyä laitteistokiihdytykseen
• Muistirajoitteet: WebAssemblyn lineaarisen muistin rajat (4GB) aiheuttavat ongelmia suurilla tiedostoilla
• Ei laitteistodekoodausta: Vain ohjelmistopohjainen dekoodaus/koodaus, ilman GPU-kiihdytystä

Vertailutesteissämme 50MB:n MP4-videon pakkaus 70 % laadulla kesti ffmpeg.wasmilla 45–60 sekuntia. Ei huono, mutta ei erityisen hyväkään.

WebCodecs-lähestymistapa

WebCodecs API on suhteellisen uusi selain-API, joka tarjoaa suoran pääsyn selaimen natiiveihin mediakoodekkeihin — samoihin, joita käytetään videotoistossa YouTubessa, Netflixissä ja kaikilla muilla suoratoistoalustoilla. Keskeiset edut:

• Laitteistokiihdytys: Käyttää GPU:ta dekoodaukseen ja koodaukseen, kun se on saatavilla
• Ei pakettiylikuormaa: Ei WebAssemblyä, ei käännettyjä binäärejä — kyseessä on natiivi selain-API
• Nopea alustus: Käytettävissä heti, ei latausaikaa
• Laaja formaattituki: H.264, H.265, VP8, VP9, AV1 — mitä ikinä selaimesi tukee

Haaste? WebCodecs on matalan tason rajapinta. Demultipleksointi, frame-kohtainen koodaus, konttiformaatin muodostus ja kaikki siltä väliltä pitää hoitaa itse. Putkistoa on paljon.

Esittelyssä mediabunny

Rakensimme mediabunnyn — kevyen kirjaston, joka kapseloi WebCodecsin yksinkertaisen ja ergonomisen API:n taakse. Se hoitaa monimutkaiset osat:

• Automaattinen demultipleksointi: Tunnistaa konttiformaatin ja poimii video-/äänivirrat
• Frame-tason hallinta: Pääsy yksittäisiin frameihin tarkkaa editointia varten
• Älykäs uudelleenkoodaus: Määritettävät laatuasetukset reaaliaikaisella etenemisellä
• Muistitehokas suoratoisto: Käsittelee frameja erissä, ei kaikkea kerralla

Suorituskykyvertailu

3–5x nopeampi kautta linjan, huomattavasti pienemmällä muistin käytöllä ja ilman pakettiylikuormaa.

Yksityisyys: ratkaiseva ominaisuus

Suorituskyky on hienoa, mutta tämä erottaa selainpohjaisen käsittelyn todella muista: arkkitehtuuriin rakennettu yksityisyys.

Palvelinpohjaisissa työkaluissa luotat tietosi jonkun muun käsiin. Jopa hyvää tarkoittavilla palveluilla on palvelimia, joihin voidaan murtautua, joita voidaan velvoittaa luovuttamaan tietoja tai jotka voidaan konfiguroida väärin. VideosKitissa:

• Tiedostot eivät koskaan poistu laitteeltasi — tiedostojen latauksille ei kirjaimellisesti ole palvelinpäätepistettä
• Ei evästeitä, ei seurantaa, ei analytiikkaa tiedostosisällöstä
• Toimii offline-tilassa lataamisen jälkeen — käsittele videoita lentokoneessa, rajoitetussa verkossa tai missä tahansa
• Yritysystävällinen arkaluonteiselle sisällölle — ei dataresidenssiin tai vaatimustenmukaisuuteen liittyviä huolia

Kehityshaasteet

Tämän rakentaminen ei ollut ongelmatonta:

Suurten tiedostojen käsittely

Selaimet eivät tarjoa satunnaista tiedostopääsyä. Käytämme File API:a ja suoratoistoa videoiden käsittelyyn frame kerrallaan ilman, että koko tiedostoa ladataan muistiin. Tämä vaati huolellista puskurien hallintaa ja roskankeruun hienosäätöä.

Selainyhteensopivuus

WebCodecsia tuetaan Chrome 94+:ssa, Edge 94+:ssa ja Safari 16.4+:ssa. Firefox lisäsi tuen versiossa 130. Havaitsemme tuen automaattisesti ja näytämme selkeän fallback-viestin, jos selain ei ole tuettu.

Muistinhallinta

Videoframet ovat suuria — yksi 4K-frame on pakkaamattomana noin 33MB. Toteutimme frame-poolauksen ja suoratoistoputket, jotta muistinkäyttö pysyy hallinnassa myös 4K-sisällöllä.

Etenemisen raportointi

Käyttäjien täytyy tietää, kuinka kauan odottaa. Rakensimme callback-järjestelmän, joka raportoi etenemisen frame-sijainnin perusteella ja antaa tarkat reaaliaikaiset päivitykset.

Avoin lähdekoodi

VideosKit ja mediabunny ovat molemmat avointa lähdekoodia. Tutustu koodiin:

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

Kontribuutiot, issue-raportit ja palaute ovat tervetulleita.

Selainpohjaisen videon tulevaisuus

WebCodecs kehittyy edelleen. AV1-koodaus, WebGPU-pohjainen käsittely ja parannetut MediaSource Extensions -ominaisuudet tekevät selainpohjaisesta videosta entistäkin tehokkaampaa. Olemme innoissamme siitä, että saamme työntää mahdollisen rajoja eteenpäin.

Jos et ole vielä kokeillut VideosKitia, käy osoitteessa videoskit.cc. Pakkaa, muunna, trimmaa tai tarkista video — kaikki selaimessasi, täysin ilmaiseksi.