Опановуємо WebCodecs: покращення якості відео за допомогою часового шумозаглушення

У світі веб-комунікацій, потокового відео та застосунків реального часу якість має першочергове значення. Користувачі по всьому світу очікують чіткого, ясного відео, незалежно від того, чи перебувають вони на діловій зустрічі, дивляться пряму трансляцію чи взаємодіють з віддаленим сервісом. Однак відеопотоки часто страждають від постійного та набридливого артефакту: шуму. Цей цифровий шум, який часто виглядає як зерниста або статична текстура, може погіршити враження від перегляду та, що дивно, збільшити споживання трафіку. На щастя, потужний браузерний API, WebCodecs, надає розробникам безпрецедентний низькорівневий контроль для вирішення цієї проблеми.

Цей вичерпний посібник занурить вас у використання WebCodecs для специфічної, високоефективної техніки обробки відео: часового шумозаглушення. Ми розглянемо, що таке відеошум, чому він шкідливий, і як ви можете використовувати об'єкт VideoFrame для створення конвеєра фільтрації безпосередньо в браузері. Ми охопимо все: від базової теорії до практичної реалізації на JavaScript, міркувань щодо продуктивності з WebAssembly та просунутих концепцій для досягнення результатів професійного рівня.

Що таке відеошум і чому це важливо?

Перш ніж ми зможемо вирішити проблему, ми повинні її зрозуміти. У цифровому відео шум — це випадкові варіації яскравості або колірної інформації у відеосигналі. Це небажаний побічний продукт процесу захоплення та передачі зображення.

Джерела та типи шуму

• Шум сенсора: Основний винуватець. В умовах низької освітленості сенсори камери підсилюють вхідний сигнал для створення достатньо яскравого зображення. Цей процес підсилення також збільшує випадкові електронні коливання, що призводить до видимої зернистості.
• Тепловий шум: Тепло, що генерується електронікою камери, може спричиняти хаотичний рух електронів, створюючи шум, незалежний від рівня освітлення.
• Шум квантування: Виникає під час аналого-цифрового перетворення та процесів стиснення, де неперервні значення відображаються на обмежений набір дискретних рівнів.

Цей шум зазвичай проявляється як гаусівський шум, де інтенсивність кожного пікселя випадково змінюється навколо свого істинного значення, створюючи дрібну, мерехтливу зернистість по всьому кадру.

Подвійний вплив шуму

Відеошум — це більше, ніж просто косметична проблема; він має значні технічні та перцептивні наслідки:

1. Погіршення користувацького досвіду: Найбільш очевидний вплив — на візуальну якість. Зашумлене відео виглядає непрофесійно, відволікає увагу і може ускладнити розрізнення важливих деталей. У таких застосунках, як телеконференції, учасники можуть виглядати зернистими та нечіткими, що погіршує відчуття присутності.
2. Зниження ефективності стиснення: Це менш інтуїтивна, але не менш важлива проблема. Сучасні відеокодеки (такі як H.264, VP9, AV1) досягають високих коефіцієнтів стиснення, використовуючи надмірність. Вони шукають схожість між кадрами (часова надмірність) та в межах одного кадру (просторова надмірність). Шум за своєю природою є випадковим і непередбачуваним. Він руйнує ці патерни надмірності. Кодер сприймає випадковий шум як високочастотну деталь, яку необхідно зберегти, змушуючи його виділяти більше бітів для кодування шуму замість фактичного вмісту. Це призводить або до більшого розміру файлу за тієї ж сприйманої якості, або до нижчої якості за того ж бітрейту.

Видаляючи шум перед кодуванням, ми можемо зробити відеосигнал більш передбачуваним, дозволяючи кодеру працювати ефективніше. Це призводить до кращої візуальної якості, меншого споживання трафіку та більш плавного потокового відтворення для користувачів у всьому світі.

Зустрічайте WebCodecs: сила низькорівневого контролю над відео

Протягом багатьох років прямі маніпуляції з відео в браузері були обмеженими. Розробники переважно залежали від можливостей елемента <video> та Canvas API, що часто призводило до зниження продуктивності через зчитування даних з GPU. WebCodecs повністю змінює правила гри.

WebCodecs — це низькорівневий API, що надає прямий доступ до вбудованих у браузер медіакодерів та декодерів. Він розроблений для застосунків, які вимагають точного контролю над обробкою медіа, таких як відеоредактори, платформи хмарного геймінгу та просунуті клієнти для спілкування в реальному часі.

Основний компонент, на якому ми зосередимося, — це об'єкт VideoFrame. VideoFrame представляє один кадр відео як зображення, але це набагато більше, ніж просто растрове зображення. Це високоефективний об'єкт, що передається, який може зберігати відеодані в різних форматах пікселів (наприклад, RGBA, I420, NV12) і містить важливі метадані, такі як:

• timestamp: Час представлення кадру в мікросекундах.
• duration: Тривалість кадру в мікросекундах.
• codedWidth та codedHeight: Розміри кадру в пікселях.
• format: Формат пікселів даних (наприклад, 'I420', 'RGBA').

Найважливіше те, що VideoFrame надає метод copyTo(), який дозволяє нам копіювати сирі, нестиснені піксельні дані в ArrayBuffer. Це наша точка входу для аналізу та маніпуляцій. Отримавши сирі байти, ми можемо застосувати наш алгоритм шумозаглушення, а потім створити новий VideoFrame зі змінених даних, щоб передати його далі по конвеєру обробки (наприклад, до відеокодера або на canvas).

Розуміння часової фільтрації

Техніки шумозаглушення можна умовно поділити на два типи: просторові та часові.

• Просторова фільтрація: Ця техніка працює з одним кадром ізольовано. Вона аналізує зв'язки між сусідніми пікселями для виявлення та згладжування шуму. Простим прикладом є фільтр розмиття. Хоча просторові фільтри ефективно зменшують шум, вони також можуть пом'якшувати важливі деталі та краї, що призводить до менш чіткого зображення.
• Часова фільтрація: Це більш складний підхід, на якому ми зосереджуємося. Він працює з кількома кадрами в часі. Основний принцип полягає в тому, що фактичний вміст сцени, ймовірно, буде корелювати від одного кадру до наступного, тоді як шум є випадковим і некорельованим. Порівнюючи значення пікселя в певному місці в кількох кадрах, ми можемо розрізнити послідовний сигнал (реальне зображення) від випадкових коливань (шум).

Найпростішою формою часової фільтрації є часове усереднення. Уявіть, що у вас є поточний кадр і попередній. Для будь-якого заданого пікселя його «справжнє» значення, ймовірно, знаходиться десь між його значенням у поточному кадрі та його значенням у попередньому. Змішуючи їх, ми можемо усереднити випадковий шум. Нове значення пікселя можна обчислити за допомогою простого зваженого середнього:

new_pixel = (alpha * current_pixel) + ((1 - alpha) * previous_pixel)

Тут alpha — це коефіцієнт змішування від 0 до 1. Вищий alpha означає, що ми більше довіряємо поточному кадру, що призводить до меншого шумозаглушення, але й меншої кількості артефактів руху. Нижчий alpha забезпечує сильніше шумозаглушення, але може спричинити «привиди» або шлейфи в областях з рухом. Знайти правильний баланс — ключове завдання.

Реалізація простого фільтра часового усереднення

Давайте створимо практичну реалізацію цієї концепції за допомогою WebCodecs. Наш конвеєр складатиметься з трьох основних кроків:

1. Отримати потік об'єктів VideoFrame (наприклад, з вебкамери).
2. Для кожного кадру застосувати наш часовий фільтр, використовуючи дані попереднього кадру.
3. Створити новий, очищений VideoFrame.

Крок 1: Налаштування потоку кадрів

Найпростіший спосіб отримати живий потік об'єктів VideoFrame — це використання MediaStreamTrackProcessor, який споживає MediaStreamTrack (наприклад, з getUserMedia) і надає його кадри як читабельний потік.

Концептуальне налаштування JavaScript:

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; // Тут ми будемо обробляти кожен 'frame' const processedFrame = await applyTemporalFilter(frame, previousFrameBuffer); // Для наступної ітерації нам потрібно зберегти дані *оригінального* поточного кадру // Ви б скопіювали дані оригінального кадру в 'previousFrameBuffer' тут, перш ніж закрити його. // Не забувайте закривати кадри, щоб звільнити пам'ять! frame.close(); // Зробіть щось із processedFrame (наприклад, відрендерити на canvas, закодувати) // ... а потім закрийте і його! processedFrame.close(); } }

Крок 2: Алгоритм фільтрації - робота з піксельними даними

Це ядро нашої роботи. У нашій функції applyTemporalFilter нам потрібно отримати доступ до піксельних даних вхідного кадру. Для простоти припустимо, що наші кадри мають формат 'RGBA'. Кожен піксель представлений 4 байтами: червоний, зелений, синій та альфа (прозорість).

async function applyTemporalFilter(currentFrame, previousFrameBuffer) { // Визначимо наш коефіцієнт змішування. 0.8 означає 80% нового кадру і 20% старого. const alpha = 0.8; // Отримаємо розміри const width = currentFrame.codedWidth; const height = currentFrame.codedHeight; // Виділимо ArrayBuffer для зберігання піксельних даних поточного кадру. const currentFrameSize = width * height * 4; // 4 байти на піксель для RGBA const currentFrameBuffer = new Uint8Array(currentFrameSize); await currentFrame.copyTo(currentFrameBuffer); // Якщо це перший кадр, немає попереднього кадру для змішування. // Просто повернемо його як є, але збережемо його буфер для наступної ітерації. if (!previousFrameBuffer) { const newFrameBuffer = new Uint8Array(currentFrameBuffer); // Ми оновимо наш глобальний 'previousFrameBuffer' цим буфером поза цією функцією. return { buffer: newFrameBuffer, frame: currentFrame }; } // Створимо новий буфер для нашого вихідного кадру. const outputFrameBuffer = new Uint8Array(currentFrameSize); // Основний цикл обробки. for (let i = 0; i < currentFrameSize; i++) { const currentPixelValue = currentFrameBuffer[i]; const previousPixelValue = previousFrameBuffer[i]; // Застосовуємо формулу часового усереднення для кожного колірного каналу. // Ми пропускаємо альфа-канал (кожен 4-й байт). if ((i + 1) % 4 !== 0) { outputFrameBuffer[i] = Math.round(alpha * currentPixelValue + (1 - alpha) * previousPixelValue); } else { // Залишаємо альфа-канал як є. outputFrameBuffer[i] = currentPixelValue; } } return { buffer: outputFrameBuffer, frame: currentFrame }; }

Примітка щодо форматів YUV (I420, NV12): Хоча RGBA легко зрозуміти, більшість відео обробляється в колірних просторах YUV для ефективності. Робота з YUV складніша, оскільки інформація про колір (U, V) та яскравість (Y) зберігається окремо (у «площинах»). Логіка фільтрації залишається тією ж, але вам потрібно було б ітерувати по кожній площині (Y, U та V) окремо, враховуючи їхні відповідні розміри (колірні площини часто мають нижчу роздільну здатність — техніка, що називається колірна субдискретизація).

Крок 3: Створення нового відфільтрованого `VideoFrame`

Після завершення нашого циклу outputFrameBuffer містить піксельні дані для нашого нового, чистішого кадру. Тепер нам потрібно обернути це в новий об'єкт VideoFrame, не забувши скопіювати метадані з оригінального кадру.

// У вашому основному циклі після виклику applyTemporalFilter... const { buffer: processedBuffer, frame: originalFrame } = await applyTemporalFilter(frame, previousFrameBuffer); // Створюємо новий VideoFrame з нашого обробленого буфера. const newFrame = new VideoFrame(processedBuffer, { format: 'RGBA', codedWidth: originalFrame.codedWidth, codedHeight: originalFrame.codedHeight, timestamp: originalFrame.timestamp, duration: originalFrame.duration }); // ВАЖЛИВО: Оновіть буфер попереднього кадру для наступної ітерації. // Нам потрібно копіювати дані *оригінального* кадру, а не відфільтровані. // Окрему копію слід зробити перед фільтрацією. previousFrameBuffer = new Uint8Array(originalFrameData); // Тепер ви можете використовувати 'newFrame'. Відрендерити його, закодувати тощо. // renderer.draw(newFrame); // І, що критично важливо, закрийте його, коли закінчите, щоб уникнути витоків пам'яті. newFrame.close();

Керування пам'яттю є критично важливим: Об'єкти VideoFrame можуть містити великі обсяги нестиснених відеоданих і можуть бути підкріплені пам'яттю поза купою JavaScript. Ви повинні викликати frame.close() для кожного кадру, з яким ви закінчили працювати. Невиконання цієї вимоги швидко призведе до вичерпання пам'яті та збою вкладки.

Міркування щодо продуктивності: JavaScript проти WebAssembly

Чиста реалізація на JavaScript, наведена вище, чудово підходить для навчання та демонстрації. Однак для відео 1080p (1920x1080) з частотою 30 кадрів на секунду наш цикл повинен виконувати понад 248 мільйонів обчислень за секунду! (1920 * 1080 * 4 байти * 30 кадрів/с). Хоча сучасні рушії JavaScript неймовірно швидкі, така попіксельна обробка є ідеальним випадком для використання більш орієнтованої на продуктивність технології: WebAssembly (Wasm).

Підхід з WebAssembly

WebAssembly дозволяє запускати в браузері код, написаний такими мовами, як C++, Rust або Go, з майже нативною швидкістю. Логіку нашого часового фільтра просто реалізувати цими мовами. Ви б написали функцію, яка приймає вказівники на вхідний та вихідний буфери і виконує ту ж саму ітеративну операцію змішування.

Концептуальна функція на C++ для 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) { // Пропустити альфа-канал output_frame[i] = (unsigned char)(alpha * current_frame[i] + (1.0 - alpha) * previous_frame[i]); } else { output_frame[i] = current_frame[i]; } } } }

З боку JavaScript ви б завантажили цей скомпільований модуль Wasm. Ключова перевага в продуктивності полягає у спільному використанні пам'яті. Ви можете створювати ArrayBuffer в JavaScript, які підкріплені лінійною пам'яттю модуля Wasm. Це дозволяє передавати дані кадру до Wasm без будь-якого дорогого копіювання. Весь цикл обробки пікселів тоді виконується як один, високооптимізований виклик функції Wasm, що значно швидше, ніж цикл `for` у JavaScript.

Просунуті методи часової фільтрації

Просте часове усереднення — це чудова відправна точка, але воно має суттєвий недолік: воно створює розмиття в русі або «привиди». Коли об'єкт рухається, його пікселі в поточному кадрі змішуються з пікселями фону з попереднього кадру, створюючи шлейф. Щоб створити справді професійний фільтр, нам потрібно враховувати рух.

Часова фільтрація з компенсацією руху (MCTF)

Золотим стандартом для часового шумозаглушення є часова фільтрація з компенсацією руху. Замість того, щоб сліпо змішувати піксель з тим, що знаходиться в тих самих координатах (x, y) у попередньому кадрі, MCTF спочатку намагається з'ясувати, звідки цей піксель прийшов.

Процес включає:

1. Оцінка руху: Алгоритм ділить поточний кадр на блоки (наприклад, 16x16 пікселів). Для кожного блоку він шукає в попередньому кадрі блок, який є найбільш схожим (наприклад, має найменшу суму абсолютних різниць). Зміщення між цими двома блоками називається «вектором руху».
2. Компенсація руху: Потім він створює «скомпенсовану за рухом» версію попереднього кадру, зміщуючи блоки відповідно до їхніх векторів руху.
3. Фільтрація: Нарешті, він виконує часове усереднення між поточним кадром і цим новим, скомпенсованим за рухом попереднім кадром.

Таким чином, рухомий об'єкт змішується сам із собою з попереднього кадру, а не з фоном, який він щойно відкрив. Це значно зменшує артефакти «привидів». Реалізація оцінки руху є обчислювально інтенсивною та складною, часто вимагає просунутих алгоритмів і є завданням майже виключно для WebAssembly або навіть для обчислювальних шейдерів WebGPU.

Адаптивна фільтрація

Ще одним удосконаленням є створення адаптивного фільтра. Замість використання фіксованого значення alpha для всього кадру, ви можете змінювати його залежно від локальних умов.

• Адаптація до руху: В областях з високим виявленим рухом ви можете збільшити alpha (наприклад, до 0.95 або 1.0), щоб майже повністю покладатися на поточний кадр, запобігаючи розмиттю в русі. У статичних областях (наприклад, стіна на фоні) ви можете зменшити alpha (наприклад, до 0.5) для значно сильнішого шумозаглушення.
• Адаптація за яскравістю: Шум часто більш помітний у темних ділянках зображення. Фільтр можна зробити більш агресивним у тінях і менш агресивним у світлих ділянках для збереження деталей.

Практичні сценарії використання та застосування

Можливість виконувати високоякісне шумозаглушення в браузері відкриває численні можливості:

• Комунікація в реальному часі (WebRTC): Попередня обробка потоку з вебкамери користувача перед його надсиланням до відеокодера. Це величезна перевага для відеодзвінків в умовах низької освітленості, що покращує візуальну якість та зменшує необхідну пропускну здатність.
• Веб-редактори відео: Пропонуйте фільтр «Denoise» як функцію у вбудованому відеоредакторі, що дозволяє користувачам очищати завантажені матеріали без обробки на стороні сервера.
• Хмарний геймінг та віддалений робочий стіл: Очищення вхідних відеопотоків для зменшення артефактів стиснення та забезпечення більш чіткої та стабільної картинки.
• Попередня обробка для комп'ютерного зору: Для веб-застосунків зі штучним інтелектом/машинним навчанням (наприклад, відстеження об'єктів або розпізнавання облич), шумозаглушення вхідного відео може стабілізувати дані та призвести до більш точних та надійних результатів.

Виклики та майбутні напрямки

Хоча цей підхід є потужним, він не позбавлений викликів. Розробникам потрібно пам'ятати про:

• Продуктивність: Обробка відео HD або 4K в реальному часі є вимогливою. Ефективна реалізація, зазвичай з WebAssembly, є обов'язковою.
• Пам'ять: Зберігання одного або кількох попередніх кадрів у вигляді нестиснених буферів споживає значний обсяг оперативної пам'яті. Ретельне керування є вкрай важливим.
• Затримка: Кожен крок обробки додає затримку. Для комунікації в реальному часі цей конвеєр має бути високо оптимізованим, щоб уникнути помітних затримок.
• Майбутнє з WebGPU: Новий API WebGPU відкриє нові горизонти для такої роботи. Він дозволить запускати ці попіксельні алгоритми як високопаралельні обчислювальні шейдери на GPU системи, пропонуючи ще один величезний стрибок у продуктивності навіть порівняно з WebAssembly на CPU.

Висновок

API WebCodecs знаменує нову еру для просунутої обробки медіа в Інтернеті. Він руйнує бар'єри традиційного «чорного ящика» — елемента <video> — і надає розробникам детальний контроль, необхідний для створення справді професійних відеозастосунків. Часове шумозаглушення є ідеальним прикладом його потужності: складна техніка, яка безпосередньо вирішує як проблему якості, що сприймається користувачем, так і проблему базової технічної ефективності.

Ми побачили, що, перехоплюючи окремі об'єкти VideoFrame, ми можемо реалізувати потужну логіку фільтрації для зменшення шуму, покращення стисливості та забезпечення кращого відеодосвіду. Хоча проста реалізація на JavaScript є чудовою відправною точкою, шлях до готового до виробництва рішення в реальному часі лежить через продуктивність WebAssembly і, в майбутньому, через паралельну обчислювальну потужність WebGPU.

Наступного разу, коли ви побачите зернисте відео у веб-застосунку, пам'ятайте, що інструменти для його виправлення тепер, вперше, знаходяться безпосередньо в руках веб-розробників. Це захоплюючий час для створення відео в Інтернеті.