Näin mediankäsittely selaimessa oikeasti toimii
Vuosien ajan videon muokkaaminen tai kuvan muuntaminen verkossa tarkoitti tiedoston lähettämistä jonkun toisen palvelimelle, odottamista ja tuloksen lataamista. Nykyaikaiset selaimet eivät enää vaadi tätä vaihtokauppaa. Kypsyneiden verkkorajapintojen ansiosta verkkosivu voi nyt purkaa, muuntaa ja koodata mediaa suoraan koneellasi – samalla tietokoneella, jolla luet tätä sivua. Tämä opas kertoo selkeällä kielellä, mitkä tekniikat tekevät sen mahdolliseksi ja miten voit itse varmistaa, että tiedostosi pysyvät paikallisina.
Mitä ”mediankäsittely selaimessa” oikeastaan tarkoittaa?
Kun verkkosivusto käsittelee mediaa selaimessa, työ tapahtuu samassa eristetyssä moottorissa, joka piirtää sivun, ja käyttää rajapintoja, jotka selaimessasi jo ovat. Tiedostosi luetaan levyltä muistiin omalla laitteellasi, muunnetaan siellä ja kirjoitetaan ulos ladattavana tiedostona – ilman että itse tiedosto käy palvelimella. Sivu lataa yhä oman koodinsa ja resurssinsa verkosta, mutta videosi, äänesi, kuvasi tai PDF-tiedostosi ei poistu tietokoneeltasi.
Miten WebAssembly ajaa videokoodekkeja lähes natiivinopeudella?
WebAssembly (WASM) on tiivis binäärinen käskymuoto, jonka selaimet suorittavat lähes natiivinopeudella. C- tai C++-kielellä kirjoitetut kypsät kirjastot – kuten FFmpeg videolle tai kuvakooderi – käännetään WASM-muotoon ja toimitetaan moduulina, jonka sivu lataa kerran. Tätä tarkoitetaan, kun puhutaan selainpuolen WASM-videosta: sama purku- ja koodausmatematiikka, jonka työpöytäsovellus suorittaa, ajetaan selaimen eristetyssä ympäristössä laitteesi omalla suorittimella. Koska WASM on muistiturvallinen ja eristetty, se voi jauhaa suurta tiedostoa pääsemättä käsiksi muuhun järjestelmääsi.
Mikä WebCodecs on, ja miksi se voi olla nopeampi kuin pelkkä WASM?
WebCodecs on uudempi selainrajapinta, joka tuo laitteen sisäänrakennetut, usein laitteistokiihdytetyt ääni- ja videokoodekit suoraan JavaScriptin käyttöön. Sen sijaan että koodekki toimitettaisiin WASM-muodossa, sivu antaa raakakuvat sille kooderille tai purkajalle, jonka käyttöjärjestelmä jo tarjoaa – tämä voi olla huomattavasti nopeampaa ja kevyempää akulle. Tuki vaihtelee yhä selaimen ja tiedostomuodon mukaan, joten hyvin tehdyt työkalut käyttävät WebCodecsia silloin kun se on saatavilla ja turvautuvat muutoin WASM-versioon. Kummassakin tapauksessa itse media pysyy laitteellasi.
Miten Canvas-rajapinta ja PDF-renderöinti käsittelevät kuvia?
Canvas-rajapinta antaa JavaScriptille piirrettävän pikselipinnan. Kun kuvan kokoa muutetaan, kuva rajataan, käännetään, siihen lisätään vesileima tai se muunnetaan toiseen muotoon, työkalu piirtää kuvan näkymättömälle kankaalle, käsittelee pikselit ja lukee tuloksen ulos uutena JPG-, PNG- tai WebP-tiedostona. Samalla pinnalla PDF-sivut rasteroidaan kuviksi ja yksittäinen videoruutu talletetaan pysäytyskuvaksi. Kaikki tämä on suoraa pikselimatematiikkaa koneellasi, eikä mitään lähetetä palvelimelle.
Miten Web Audio -rajapinta käsittelee ääntä paikallisesti?
Web Audio -rajapinta on verkosto toisiinsa kytkettyjä äänisolmuja – lähteitä, suodattimia, vahvistusta ja analysaattoreita – joiden avulla sivu voi purkaa, leikata, uudelleennäytteistää ja koodata ääntä muistissa. Leikkeen leikkaaminen tai ääniraidan poimiminen videosta kulkee kokonaan tämän verkoston läpi laitteellasi. Yhdistettynä WASM-kooderiin se voi kirjoittaa ulos MP3-, WAV- tai muita tiedostomuotoja ilman, että tallenteesi koskaan päätyy palvelimelle.
Mitä MediaRecorder ja Web Workers tuovat mukanaan?
MediaRecorder kaappaa suoran lähteen – näyttösi, kamerasi tai mikrofonisi – ja koodaa sen ladattavaksi tiedostoksi jo tallennuksen aikana, ja juuri näin selaimessa toimiva näytön tallennin toimii. Web Workers ajaa raskaan työn taustasäikeessä, jotta koodaus tai transkoodaus ei jäädytä sivua ja välilehti pysyy responsiivisena pitkänkin viennin ajan. Yhdessä nämä rajapinnat saavat selaimen käyttäytymään kuin pieni paikallinen mediatyöasema.
Miten voin todistaa, etteivät tiedostoni poistu laitteeltani?
Avaa selaimesi kehittäjätyökalut, siirry Verkko-välilehdelle ja käsittele tiedosto – näet sivun oman koodin ja resurssien latautuvan, mutta et yhtään pyyntöä, joka lähettäisi mediasi. Yksi tarkoituksellinen poikkeus on Äänen litterointi, joka lataa puheentunnistusmallin kerran ensimmäisellä käyttökerralla ja tallentaa sen välimuistiin, jotta myöhemmät litteroinnit toimivat ilman verkkoyhteyttä; tuo lataus on tekoälymalli itse, ei koskaan äänesi. Tämä on falsifioitavissa oleva väite, jonka voit itse tarkistaa – ja juuri siksi yksityisyys edellä rakennetut työkalut tehdään näin.
Aiheeseen liittyvät työkalut
Usein kysytyt kysymykset
- Tarkoittaako selaimessa tapahtuva käsittely, ettei tiedostojani koskaan lähetetä?
- Kyllä – mediatiedostosi luetaan ja muunnetaan muistissa omalla laitteellasi ja tarjotaan takaisin ladattavaksi, joten niitä ei lähetetä palvelimelle. Sivu itse lataa yhä koodinsa ja resurssinsa verkosta, mikä on normaalia kaikilla verkkosivustoilla; olennaista on, ettei tiedostosi ole osa tuota liikennettä. Voit varmistaa asian selaimesi kehittäjätyökalujen Verkko-välilehdeltä.
- Onko selainpuolen WASM-video yhtä hyvä kuin työpöytäsovellus?
- Useimmissa muunnoksissa, pakkauksessa ja leikkauksessa käytetään samoja taustakirjastoja (kuten FFmpeg) kuin työpöytäsovelluksissa, joten lopputuloksen laatu on vertailukelpoinen. Erot ovat lähinnä nopeudessa ja muistissa: selainvälilehdellä on vähemmän liikkumavaraa kuin natiivisovelluksella, joten hyvin suuret tai hyvin pitkät tiedostot käsitellään hitaammin. WebCodecsia tukevat työkalut voivat hyödyntää laitteistokiihdytystä ja kuroa suuren osan erosta umpeen.
- Miksi Äänen litterointi -työkalun täytyy ladata jotain?
- Puheentunnistus tarvitsee tekoälymallin, ja tuo malli ladataan selaimeesi kerran ensimmäisellä käyttökerralla ja tallennetaan sen jälkeen välimuistiin. Siitä eteenpäin litterointi tapahtuu paikallisesti ja voi toimia jopa ilman verkkoyhteyttä. Lataus koskee mallin painokertoimia – äänitallenteitasi ei silti koskaan lähetetä palvelimelle.
- Toimivatko nämä työkalut ilman verkkoyhteyttä?
- Kun sivu ja tarvittavat moduulit on kerran ladattu, suurin osa käsittelystä toimii ilman internetyhteyttä, koska laskenta tapahtuu laitteellasi. Äänen litterointi -työkalu toimii ilman verkkoyhteyttä sen jälkeen, kun sen malli on noudettu ja tallennettu välimuistiin. Uusi käynti tai tyhjennetty välimuisti vaatii verkkoa jälleen sivun resurssien lataamiseen.
- Riittääkö selaimeni teho suurille mediatiedostoille?
- Nykyaikaiset selaimet pystyvät käsittelemään yllättävän suuria tiedostoja, mutta ne toimivat muistirajojen sisällä, joten erittäin suurten videoiden käsittely voi olla hidasta tai ne on jaettava osiin. Auttaa, kun käytät työpöytäselainta, jossa on enemmän muistia, suljet muut raskaat välilehdet ja suosit WebCodecsia käyttäviä työkaluja. Jos tiedosto on liian suuri yhdellä kertaa käsiteltäväksi, sen leikkaaminen ensin on käytännöllinen kiertotie.