Obvladovanje WebCodecs: Izboljšanje kakovosti videa s časovnim zmanjševanjem šuma

V svetu spletne video komunikacije, pretakanja in aplikacij v realnem času je kakovost najpomembnejša. Uporabniki po vsem svetu pričakujejo oster, jasen video, ne glede na to, ali so na poslovnem sestanku, gledajo dogodek v živo ali komunicirajo z oddaljeno storitvijo. Vendar pa video prenose pogosto kazi vztrajen in moteč artefakt: šum. Ta digitalni šum, ki je pogosto viden kot zrnata ali statična tekstura, lahko poslabša izkušnjo gledanja in, presenetljivo, poveča porabo pasovne širine. Na srečo zmogljiv API brskalnika, WebCodecs, razvijalcem omogoča izjemen nizkonivojski nadzor za neposredno reševanje te težave.

Ta obsežen vodnik vas bo popeljal v poglobljen pregled uporabe WebCodecs za specifično tehniko obdelave videa z velikim vplivom: časovno zmanjševanje šuma. Raziskali bomo, kaj je video šum, zakaj je škodljiv in kako lahko izkoristite objekt VideoFrame za izgradnjo cevovoda za filtriranje neposredno v brskalniku. Pokrili bomo vse, od osnovne teorije do praktične implementacije v JavaScriptu, vidike zmogljivosti z WebAssemblyjem in napredne koncepte za doseganje profesionalnih rezultatov.

Kaj je video šum in zakaj je pomemben?

Preden lahko odpravimo težavo, jo moramo najprej razumeti. V digitalnem videu se šum nanaša na naključne spremembe v svetlosti ali barvnih informacijah v video signalu. Je nezaželen stranski produkt procesa zajemanja in prenosa slike.

Viri in vrste šuma

• Šum senzorja: Glavni krivec. V slabih svetlobnih pogojih senzorji kamere ojačajo dohodni signal, da ustvarijo dovolj svetlo sliko. Ta proces ojačanja poveča tudi naključna elektronska nihanja, kar povzroči viden zrnat videz.
• Toplotni šum: Toplota, ki jo ustvarja elektronika kamere, lahko povzroči naključno gibanje elektronov, kar ustvari šum, ki je neodvisen od ravni svetlobe.
• Kvantizacijski šum: Vnese se med procesi analogno-digitalne pretvorbe in stiskanja, kjer se zvezne vrednosti preslikajo v omejen nabor diskretnih ravni.

Ta šum se običajno kaže kot Gaussov šum, kjer intenzivnost vsake slikovne pike naključno niha okoli svoje prave vrednosti, kar ustvarja drobno, migetajoče zrno po celotni sličici.

Dvojen vpliv šuma

Video šum je več kot le kozmetična težava; ima pomembne tehnične in zaznavne posledice:

1. Poslabšana uporabniška izkušnja: Najočitnejši vpliv je na vizualno kakovost. Zašumljen video izgleda neprofesionalno, je moteč in lahko oteži razločevanje pomembnih podrobnosti. V aplikacijah, kot so telekonference, lahko udeleženci izgledajo zrnato in nejasno, kar zmanjšuje občutek prisotnosti.
2. Zmanjšana učinkovitost stiskanja: To je manj intuitivna, a enako kritična težava. Sodobni video kodeki (kot so H.264, VP9, AV1) dosegajo visoka razmerja stiskanja z izkoriščanjem redundance. Iščejo podobnosti med sličicami (časovna redundanca) in znotraj posamezne sličice (prostorska redundanca). Šum je po svoji naravi naključen in nepredvidljiv. Prekine te vzorce redundance. Kodirnik vidi naključni šum kot visokofrekvenčno podrobnost, ki jo je treba ohraniti, kar ga prisili, da dodeli več bitov za kodiranje šuma namesto dejanske vsebine. Posledica je bodisi večja velikost datoteke za enako zaznano kakovost bodisi nižja kakovost pri enaki bitni hitrosti.

Z odstranjevanjem šuma pred kodiranjem lahko naredimo video signal bolj predvidljiv, kar kodirniku omogoča učinkovitejše delo. To vodi do boljše vizualne kakovosti, manjše porabe pasovne širine in bolj tekoče izkušnje pretakanja za uporabnike po vsem svetu.

Vstopa WebCodecs: Moč nizkonivojskega nadzora nad videom

Več let je bila neposredna manipulacija z videom v brskalniku omejena. Razvijalci so bili večinoma omejeni na zmožnosti elementa <video> in API-ja Canvas, kar je pogosto vključevalo branje podatkov iz GPE, ki ubija zmogljivost. WebCodecs popolnoma spreminja igro.

WebCodecs je nizkonivojski API, ki omogoča neposreden dostop do vgrajenih medijskih kodirnikov in dekoderjev v brskalniku. Zasnovan je za aplikacije, ki zahtevajo natančen nadzor nad obdelavo medijev, kot so video urejevalniki, platforme za igranje v oblaku in napredni odjemalci za komunikacijo v realnem času.

Osrednja komponenta, na katero se bomo osredotočili, je objekt VideoFrame. VideoFrame predstavlja posamezno sličico videa kot sliko, vendar je veliko več kot preprosta bitna slika. Je zelo učinkovit, prenosljiv objekt, ki lahko hrani video podatke v različnih formatih slikovnih pik (kot so RGBA, I420, NV12) in nosi pomembne metapodatke, kot so:

• timestamp: Čas predstavitve sličice v mikrosekundah.
• duration: Trajanje sličice v mikrosekundah.
• codedWidth in codedHeight: Dimenzije sličice v slikovnih pikah.
• format: Format slikovnih pik podatkov (npr. 'I420', 'RGBA').

Ključno je, da VideoFrame ponuja metodo, imenovano copyTo(), ki nam omogoča kopiranje surovih, nestisnjenih podatkov slikovnih pik v ArrayBuffer. To je naša vstopna točka za analizo in manipulacijo. Ko imamo surove bajte, lahko uporabimo naš algoritem za zmanjšanje šuma in nato zgradimo nov VideoFrame iz spremenjenih podatkov, da ga posredujemo naprej po cevovodu za obdelavo (npr. v video kodirnik ali na canvas).

Razumevanje časovnega filtriranja

Tehnike zmanjševanja šuma lahko na splošno razdelimo na dve vrsti: prostorske in časovne.

• Prostorsko filtriranje: Ta tehnika deluje na posamezni sličici izolirano. Analizira razmerja med sosednjimi slikovnimi pikami, da prepozna in zgladi šum. Preprost primer je filter za zameglitev. Čeprav so prostorski filtri učinkoviti pri zmanjševanju šuma, lahko zmehčajo tudi pomembne podrobnosti in robove, kar vodi do manj ostre slike.
• Časovno filtriranje: To je bolj sofisticiran pristop, na katerega se osredotočamo. Deluje na več sličicah skozi čas. Temeljno načelo je, da je dejanska vsebina prizora verjetno korelirana od ene sličice do druge, medtem ko je šum naključen in nekoreliran. S primerjavo vrednosti slikovne pike na določeni lokaciji v več sličicah lahko ločimo konsistenten signal (pravo sliko) od naključnih nihanj (šum).

Najenostavnejša oblika časovnega filtriranja je časovno povprečenje. Predstavljajte si, da imate trenutno in prejšnjo sličico. Za katero koli slikovno piko je njena 'prava' vrednost verjetno nekje med njeno vrednostjo v trenutni in prejšnji sličici. Z njihovim mešanjem lahko povprečimo naključni šum. Nova vrednost slikovne pike se lahko izračuna s preprostim tehtanim povprečjem:

nova_slikovna_pika = (alfa * trenutna_slikovna_pika) + ((1 - alfa) * prejšnja_slikovna_pika)

Tukaj je alfa faktor mešanja med 0 in 1. Višja alfa pomeni, da bolj zaupamo trenutni sličici, kar povzroči manjše zmanjšanje šuma, a tudi manj artefaktov gibanja. Nižja alfa zagotavlja močnejše zmanjšanje šuma, vendar lahko povzroči 'ghosting' ali sledi na območjih z gibanjem. Ključno je najti pravo ravnovesje.

Implementacija preprostega filtra za časovno povprečenje

Zgradimo praktično implementacijo tega koncepta z uporabo WebCodecs. Naš cevovod bo sestavljen iz treh glavnih korakov:

1. Pridobimo tok objektov VideoFrame (npr. iz spletne kamere).
2. Za vsako sličico uporabimo naš časovni filter z uporabo podatkov prejšnje sličice.
3. Ustvarimo nov, očiščen VideoFrame.

1. korak: Nastavitev toka sličic

Najlažji način za pridobitev živega toka objektov VideoFrame je z uporabo MediaStreamTrackProcessor, ki porablja MediaStreamTrack (kot je tisti iz getUserMedia) in izpostavi njegove sličice kot bralni tok.

Konceptualna nastavitev v JavaScriptu:

async function setupVideoStream() { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); const track = stream.getVideoTracks()[0]; const trackProcessor = new MediaStreamTrackProcessor({ track }); const reader = trackProcessor.readable.getReader(); let previousFrameBuffer = null; let previousFrameTimestamp = -1; while (true) { const { value: frame, done } = await reader.read(); if (done) break; // Tukaj bomo obdelali vsako 'sličico' const processedFrame = await applyTemporalFilter(frame, previousFrameBuffer); // Za naslednjo iteracijo moramo shraniti podatke *izvirne* trenutne sličice // Podatke izvirne sličice bi kopirali v 'previousFrameBuffer' tukaj, preden jo zaprete. // Ne pozabite zapreti sličic, da sprostite pomnilnik! frame.close(); // Naredite nekaj z processedFrame (npr. izrišite na canvas, kodirajte) // ... in nato zaprite tudi to! processedFrame.close(); } }

2. korak: Algoritem filtriranja - Delo s podatki slikovnih pik

To je jedro našega dela. Znotraj naše funkcije applyTemporalFilter moramo dostopati do podatkov slikovnih pik dohodne sličice. Za poenostavitev predpostavimo, da so naše sličice v formatu 'RGBA'. Vsaka slikovna pika je predstavljena s 4 bajti: rdeča, zelena, modra in alfa (prosojnost).

async function applyTemporalFilter(currentFrame, previousFrameBuffer) { // Določimo naš faktor mešanja. 0,8 pomeni 80 % nove sličice in 20 % stare. const alpha = 0.8; // Pridobimo dimenzije const width = currentFrame.codedWidth; const height = currentFrame.codedHeight; // Alociramo ArrayBuffer za shranjevanje podatkov slikovnih pik trenutne sličice. const currentFrameSize = width * height * 4; // 4 bajti na slikovno piko za RGBA const currentFrameBuffer = new Uint8Array(currentFrameSize); await currentFrame.copyTo(currentFrameBuffer); // Če je to prva sličica, ni prejšnje sličice za mešanje. // Samo vrnemo jo takšno, kot je, vendar shranimo njen medpomnilnik za naslednjo iteracijo. if (!previousFrameBuffer) { const newFrameBuffer = new Uint8Array(currentFrameBuffer); // Naš globalni 'previousFrameBuffer' bomo posodobili s tem zunaj te funkcije. return { buffer: newFrameBuffer, frame: currentFrame }; } // Ustvarimo nov medpomnilnik za našo izhodno sličico. const outputFrameBuffer = new Uint8Array(currentFrameSize); // Glavna zanka za obdelavo. for (let i = 0; i < currentFrameSize; i++) { const currentPixelValue = currentFrameBuffer[i]; const previousPixelValue = previousFrameBuffer[i]; // Uporabimo formulo za časovno povprečenje za vsak barvni kanal. // Preskočimo alfa kanal (vsak 4. bajt). if ((i + 1) % 4 !== 0) { outputFrameBuffer[i] = Math.round(alpha * currentPixelValue + (1 - alpha) * previousPixelValue); } else { // Ohrani alfa kanal takšen, kot je. outputFrameBuffer[i] = currentPixelValue; } } return { buffer: outputFrameBuffer, frame: currentFrame }; }

Opomba o formatih YUV (I420, NV12): Medtem ko je RGBA enostaven za razumevanje, se večina videa za učinkovitost izvorno obdeluje v barvnih prostorih YUV. Ravnanje z YUV je bolj zapleteno, saj se informacije o barvi (U, V) in svetlosti (Y) shranjujejo ločeno (v 'ravninah'). Logika filtriranja ostaja enaka, vendar bi morali ločeno iterirati čez vsako ravnino (Y, U in V), pri čemer bi morali biti pozorni na njihove dimenzije (barvne ravnine imajo pogosto nižjo ločljivost, tehnika, imenovana barvno podvzorčenje).

3. korak: Ustvarjanje novega filtriranega VideoFrame

Ko se naša zanka konča, outputFrameBuffer vsebuje podatke slikovnih pik za našo novo, čistejšo sličico. Sedaj moramo to zaviti v nov objekt VideoFrame in se prepričati, da smo kopirali metapodatke iz izvirne sličice.

// Znotraj vaše glavne zanke po klicu applyTemporalFilter... const { buffer: processedBuffer, frame: originalFrame } = await applyTemporalFilter(frame, previousFrameBuffer); // Ustvarimo nov VideoFrame iz našega obdelanega medpomnilnika. const newFrame = new VideoFrame(processedBuffer, { format: 'RGBA', codedWidth: originalFrame.codedWidth, codedHeight: originalFrame.codedHeight, timestamp: originalFrame.timestamp, duration: originalFrame.duration }); // POMEMBNO: Posodobite medpomnilnik prejšnje sličice za naslednjo iteracijo. // Kopirati moramo podatke *izvirne* sličice, ne filtriranih podatkov. // Ločeno kopijo je treba narediti pred filtriranjem. previousFrameBuffer = new Uint8Array(originalFrameData); // Zdaj lahko uporabite 'newFrame'. Izrišite ga, kodirajte ga itd. // renderer.draw(newFrame); // In ključno, zaprite ga, ko končate, da preprečite uhajanje pomnilnika. newFrame.close();

Upravljanje pomnilnika je ključno: Objekti VideoFrame lahko vsebujejo velike količine nestisnjenih video podatkov in so lahko podprti s pomnilnikom zunaj JavaScript kupa. You must call frame.close() na vsaki sličici, s katero ste končali. Če tega ne storite, bo hitro prišlo do izčrpanja pomnilnika in sesutja zavihka.

Vidiki zmogljivosti: JavaScript proti WebAssembly

Zgornja implementacija v čistem JavaScriptu je odlična za učenje in demonstracijo. Vendar pa mora za 30 FPS, 1080p (1920x1080) video naša zanka izvesti več kot 248 milijonov izračunov na sekundo! (1920 * 1080 * 4 bajti * 30 fps). Čeprav so sodobni JavaScript pogoni neverjetno hitri, je ta obdelava na ravni slikovnih pik popoln primer uporabe za tehnologijo, ki je bolj usmerjena v zmogljivost: WebAssembly (Wasm).

Pristop z WebAssemblyjem

WebAssembly vam omogoča, da v brskalniku izvajate kodo, napisano v jezikih, kot so C++, Rust ali Go, s skoraj izvorno hitrostjo. Logika za naš časovni filter je v teh jezikih enostavna za implementacijo. Napisali bi funkcijo, ki sprejme kazalce na vhodne in izhodne medpomnilnike ter izvede enako iterativno operacijo mešanja.

Konceptualna funkcija v C++ za Wasm:

extern "C" { void apply_temporal_filter(unsigned char* current_frame, unsigned char* previous_frame, unsigned char* output_frame, int buffer_size, float alpha) { for (int i = 0; i < buffer_size; ++i) { if ((i + 1) % 4 != 0) { // Preskoči alfa kanal output_frame[i] = (unsigned char)(alpha * current_frame[i] + (1.0 - alpha) * previous_frame[i]); } else { output_frame[i] = current_frame[i]; } } } }

S strani JavaScripta bi naložili ta preveden Wasm modul. Ključna prednost pri zmogljivosti izhaja iz deljenja pomnilnika. V JavaScriptu lahko ustvarite ArrayBufferje, ki so podprti z linearnim pomnilnikom modula Wasm. To vam omogoča, da podatke o sličici posredujete v Wasm brez dragega kopiranja. Celotna zanka za obdelavo slikovnih pik se nato izvede kot en sam, visoko optimiziran klic funkcije Wasm, kar je bistveno hitreje kot JavaScript `for` zanka.

Napredne tehnike časovnega filtriranja

Preprosto časovno povprečenje je odlično izhodišče, vendar ima pomembno pomanjkljivost: uvaja zameglitev gibanja ali 'ghosting'. Ko se predmet premakne, se njegove slikovne pike v trenutni sličici zmešajo s slikovnimi pikami ozadja iz prejšnje sličice, kar ustvari sled. Za izdelavo resnično profesionalnega filtra moramo upoštevati gibanje.

Časovno filtriranje s kompenzacijo gibanja (MCTF)

Zlati standard za časovno zmanjševanje šuma je časovno filtriranje s kompenzacijo gibanja. Namesto da slepo meša slikovno piko s tisto na isti (x, y) koordinati v prejšnji sličici, MCTF najprej poskuša ugotoviti, od kod je ta slikovna pika prišla.

Proces vključuje:

1. Ocena gibanja: Algoritem razdeli trenutno sličico na bloke (npr. 16x16 slikovnih pik). Za vsak blok preišče prejšnjo sličico, da najde blok, ki je najbolj podoben (npr. ima najnižjo vsoto absolutnih razlik). Premik med tema dvema blokoma se imenuje 'vektor gibanja'.
2. Kompenzacija gibanja: Nato zgradi 'gibanjem kompenzirano' različico prejšnje sličice s premikanjem blokov glede na njihove vektorje gibanja.
3. Filtriranje: Na koncu izvede časovno povprečenje med trenutno sličico in to novo, z gibanjem kompenzirano prejšnjo sličico.

Na ta način se premikajoči se predmet zmeša sam s seboj iz prejšnje sličice, ne z ozadjem, ki ga je pravkar odkril. To drastično zmanjša artefakte 'ghostinga'. Implementacija ocene gibanja je računsko intenzivna in zapletena, pogosto zahteva napredne algoritme in je skoraj izključno naloga za WebAssembly ali celo WebGPU računske senčilnike (compute shaders).

Prilagodljivo filtriranje

Druga izboljšava je, da filter naredimo prilagodljiv. Namesto uporabe fiksne vrednosti alfa za celotno sličico, jo lahko spreminjate glede na lokalne pogoje.

• Prilagodljivost gibanju: Na območjih z visoko zaznanim gibanjem lahko povečate alfa (npr. na 0,95 ali 1,0), da se skoraj v celoti zanesete na trenutno sličico in preprečite zameglitev gibanja. Na statičnih območjih (kot je stena v ozadju) lahko zmanjšate alfa (npr. na 0,5) za veliko močnejše zmanjšanje šuma.
• Svetlostna prilagodljivost: Šum je pogosto bolj viden v temnejših delih slike. Filter bi lahko naredili bolj agresiven v sencah in manj agresiven v svetlih območjih, da ohranimo podrobnosti.

Praktični primeri uporabe in aplikacije

Zmožnost izvajanja visokokakovostnega zmanjševanja šuma v brskalniku odpira številne možnosti:

• Komunikacija v realnem času (WebRTC): Predobdelajte vir spletne kamere uporabnika, preden se pošlje v video kodirnik. To je velika zmaga za video klice v slabo osvetljenih okoljih, saj izboljša vizualno kakovost in zmanjša potrebno pasovno širino.
• Spletno urejanje videa: Ponudite filter 'Odpravljanje šuma' kot funkcijo v spletnem video urejevalniku, kar uporabnikom omogoča, da očistijo svoje naložene posnetke brez obdelave na strani strežnika.
• Igranje v oblaku in oddaljeno namizje: Očistite dohodne video prenose, da zmanjšate artefakte stiskanja in zagotovite jasnejšo, stabilnejšo sliko.
• Predobdelava za računalniški vid: Pri spletnih AI/ML aplikacijah (kot sta sledenje objektov ali prepoznavanje obrazov) lahko odpravljanje šuma na vhodnem videu stabilizira podatke in vodi do natančnejših in zanesljivejših rezultatov.

Izzivi in prihodnje usmeritve

Čeprav je ta pristop močan, ni brez izzivov. Razvijalci morajo biti pozorni na:

• Zmogljivost: Obdelava v realnem času za HD ali 4K video je zahtevna. Učinkovita implementacija, običajno z WebAssemblyjem, je nujna.
• Pomnilnik: Shranjevanje ene ali več prejšnjih sličic kot nestisnjenih medpomnilnikov porabi znatno količino RAM-a. Skrbno upravljanje je bistveno.
• Latenca: Vsak korak obdelave doda zakasnitev. Za komunikacijo v realnem času mora biti ta cevovod visoko optimiziran, da se izognemo opaznim zamudam.
• Prihodnost z WebGPU: Prihajajoči API WebGPU bo odprl novo mejo za tovrstno delo. Omogočil bo, da se ti algoritmi na ravni slikovnih pik izvajajo kot visoko paralelni računski senčilniki na sistemski GPE, kar ponuja še en ogromen preskok v zmogljivosti celo v primerjavi z WebAssemblyjem na CPE.

Zaključek

API WebCodecs zaznamuje novo obdobje za napredno obdelavo medijev na spletu. Podira ovire tradicionalnega elementa <video> kot črne škatle in razvijalcem daje podroben nadzor, potreben za izdelavo resnično profesionalnih video aplikacij. Časovno zmanjševanje šuma je popoln primer njegove moči: sofisticirana tehnika, ki neposredno naslavlja tako kakovost, kot jo zaznava uporabnik, kot tudi temeljno tehnično učinkovitost.

Videli smo, da lahko s prestrezanjem posameznih objektov VideoFrame implementiramo močno logiko filtriranja za zmanjšanje šuma, izboljšanje stisljivosti in zagotavljanje vrhunske video izkušnje. Medtem ko je preprosta implementacija v JavaScriptu odlično izhodišče, pot do produkcijsko pripravljene rešitve v realnem času vodi skozi zmogljivost WebAssemblyja in v prihodnosti skozi paralelno procesorsko moč WebGPU.

Naslednjič, ko boste videli zrnat video v spletni aplikaciji, se spomnite, da so orodja za njegovo popravilo zdaj, prvič doslej, neposredno v rokah spletnih razvijalcev. To so vznemirljivi časi za gradnjo z videom na spletu.