Площина WebCodecs VideoFrame: Глибоке занурення в доступ до даних відеокадру

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

Розуміння об'єкта VideoFrame

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

• Читання піксельних даних: Саме тут і з'являються площини.
• Копіювання кадрів: Створення нових об'єктів VideoFrame з існуючих.
• Закриття кадрів: Вивільнення ресурсів, що утримуються кадром.

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

Що таке площини VideoFrame?

Піксельні дані VideoFrame часто організовані у кілька площин, особливо у форматах, таких як YUV. Кожна площина представляє різний компонент зображення. Наприклад, у форматі YUV420 є три площини:

• Y (Luma): Представляє яскравість (світність) зображення. Ця площина містить інформацію про відтінки сірого.
• U (Cb): Представляє компонент кольоровості з різницею синього.
• V (Cr): Представляє компонент кольоровості з різницею червоного.

Формати RGB, хоч і здаються простішими, також можуть використовувати кілька площин у деяких випадках. Кількість площин та їхнє значення повністю залежать від VideoPixelFormat об'єкта VideoFrame.

Перевага використання площин полягає в тому, що це дозволяє ефективно отримувати доступ та маніпулювати конкретними компонентами кольору. Наприклад, ви можете захотіти змінити лише яскравість (площина Y), не впливаючи на колір (площини U та V).

Доступ до площин VideoFrame: API

API VideoFrame надає наступні методи для доступу до даних площин:

• copyTo(destination, options): Копіює вміст VideoFrame у місце призначення, яким може бути інший VideoFrame, CanvasImageBitmap або ArrayBufferView. Об'єкт options контролює, які площини копіюються та як саме. Це основний механізм доступу до площин.

Об'єкт options у методі copyTo дозволяє вказати структуру та ціль для даних відеокадру. Ключові властивості включають:

• format: Бажаний формат пікселів скопійованих даних. Це може бути той самий формат, що й у вихідного VideoFrame, або інший (наприклад, конвертація з YUV в RGB).
• codedWidth та codedHeight: Ширина та висота відеокадру в пікселях.
• layout: Масив об'єктів, що описують структуру кожної площини в пам'яті. Кожен об'єкт у масиві вказує:
• offset: Зсув у байтах від початку буфера даних до початку даних площини.
• stride: Кількість байтів між початком кожного рядка в площині. Це критично важливо для обробки вирівнювання (padding).

Розглянемо приклад копіювання VideoFrame у форматі YUV420 в сирий буфер:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 має 3 площини: Y, U та V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // площина Y
    { offset: yPlaneSize, stride: width / 2 }, // площина U
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // площина V
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Важливо вивільнити ресурси
}

Пояснення:

• Ми обчислюємо розмір кожної площини на основі width та height. Y має повну роздільну здатність, тоді як U та V мають знижену дискретизацію (4:2:0).
• Масив layout визначає структуру пам'яті. offset вказує, де починається кожна площина в буфері, а stride — кількість байтів, на які потрібно перейти, щоб дістатися до наступного рядка в цій площині.
• Параметр format встановлено на 'I420', що є поширеним форматом YUV420.
• Критично важливо після копіювання викликати videoFrame.close() для вивільнення ресурсів.

Формати пікселів: Світ можливостей

Розуміння форматів пікселів є ключовим для роботи з площинами VideoFrame. VideoPixelFormat визначає, як кодується інформація про колір у відеокадрі. Ось деякі поширені формати пікселів, з якими ви можете зіткнутися:

• I420 (YUV420p): Планарний формат YUV, де компоненти Y, U та V зберігаються в окремих площинах. U та V мають знижену дискретизацію в 2 рази як по горизонталі, так і по вертикалі. Це дуже поширений та ефективний формат.
• NV12 (YUV420sp): Напівпланарний формат YUV, де Y зберігається в одній площині, а компоненти U та V чергуються у другій площині.
• RGBA: Компоненти червоного, зеленого, синього та альфа-каналу зберігаються в одній площині, зазвичай по 8 біт на компонент (32 біти на піксель). Порядок компонентів може відрізнятися (наприклад, BGRA).
• RGB565: Компоненти червоного, зеленого та синього зберігаються в одній площині з 5 бітами для червоного, 6 для зеленого та 5 для синього (16 біт на піксель).
• GRAYSCALE: Представляє зображення у відтінках сірого з одним значенням яскравості (luma) для кожного пікселя.

Властивість VideoFrame.format повідомить вам формат пікселів даного кадру. Обов'язково перевіряйте цю властивість перед спробою доступу до площин. Ви можете звернутися до специфікації WebCodecs для повного списку підтримуваних форматів.

Практичні випадки використання

Доступ до площин VideoFrame відкриває широкий спектр можливостей для розширеної обробки відео в браузері. Ось кілька прикладів:

1. Відеоефекти в реальному часі

Ви можете застосовувати відеоефекти в реальному часі, маніпулюючи піксельними даними в VideoFrame. Наприклад, ви можете реалізувати фільтр відтінків сірого, усереднюючи компоненти R, G та B кожного пікселя в кадрі RGBA, а потім встановлюючи всі три компоненти на це середнє значення. Ви також можете створити ефект сепії або налаштувати яскравість і контрастність.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Червоний
    rgba[i + 1] = gray;   // Зелений
    rgba[i + 2] = gray;   // Синій
  }

  // Створення нового VideoFrame зі змінених даних.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Вивільнення оригінального кадру
  return newFrame;
}

2. Застосунки комп'ютерного зору

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

Наприклад, ви можете перетворити кольоровий VideoFrame у відтінки сірого, а потім застосувати алгоритм виявлення країв (наприклад, оператор Собеля) для ідентифікації країв на зображенні. Це може бути використано як етап попередньої обробки для розпізнавання об'єктів.

3. Редагування та композитинг відео

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

Наприклад, ви можете обрізати VideoFrame, скопіювавши лише частину піксельних даних у новий VideoFrame. Для цього вам потрібно буде відповідно налаштувати зсуви та кроки (strides) у layout.

4. Власні кодеки та транскодування

Хоча WebCodecs надає вбудовану підтримку поширених кодеків, таких як AV1, VP9 та H.264, ви також можете використовувати його для реалізації власних кодеків або конвеєрів транскодування. Вам доведеться самостійно обробляти процес кодування та декодування, але площини VideoFrame дозволяють отримувати доступ та маніпулювати сирими піксельними даними. Це може бути корисним для нішевих відеоформатів або спеціалізованих вимог до кодування.

5. Розширена аналітика

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

Робота з Canvas та WebGL

Хоча ви можете безпосередньо маніпулювати піксельними даними в площинах VideoFrame, часто потрібно відобразити результат на екрані. Інтерфейс CanvasImageBitmap забезпечує міст між VideoFrame та елементом <canvas>. Ви можете створити CanvasImageBitmap з VideoFrame, а потім намалювати його на полотні за допомогою методу drawImage().

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Вивільнення ресурсів bitmap
  videoFrame.close(); // Вивільнення ресурсів VideoFrame
}

Для більш просунутого рендерингу ви можете використовувати WebGL. Ви можете завантажувати піксельні дані з площин VideoFrame у текстури WebGL, а потім використовувати шейдери для застосування ефектів та перетворень. Це дозволяє використовувати GPU для високопродуктивної обробки відео.

Аспекти продуктивності

Робота з сирими піксельними даними може бути обчислювально інтенсивною, тому важливо враховувати оптимізацію продуктивності. Ось кілька порад:

• Мінімізуйте копіювання: Уникайте непотрібного копіювання піксельних даних. Намагайтеся виконувати операції на місці, коли це можливо.
• Використовуйте WebAssembly: Для критичних до продуктивності ділянок коду розглядайте можливість використання WebAssembly. WebAssembly може забезпечити продуктивність, близьку до нативної, для обчислювально інтенсивних завдань.
• Оптимізуйте структуру пам'яті: Вибирайте правильний формат пікселів та структуру пам'яті для вашого додатка. Розгляньте можливість використання упакованих форматів (наприклад, RGBA), якщо вам не потрібно часто отримувати доступ до окремих компонентів кольору.
• Використовуйте OffscreenCanvas: Для фонової обробки використовуйте OffscreenCanvas, щоб уникнути блокування основного потоку.
• Профілюйте свій код: Використовуйте інструменти розробника в браузері для профілювання коду та виявлення вузьких місць у продуктивності.

Сумісність з браузерами

WebCodecs та API VideoFrame підтримуються в більшості сучасних браузерів, включаючи Chrome, Firefox та Safari. Однак рівень підтримки може відрізнятися залежно від версії браузера та операційної системи. Перевіряйте останні таблиці сумісності браузерів на сайтах, таких як MDN Web Docs, щоб переконатися, що функції, які ви використовуєте, підтримуються у ваших цільових браузерах. Для кросбраузерної сумісності рекомендується виявлення функцій (feature detection).

Поширені помилки та їх вирішення

Ось деякі поширені помилки, яких слід уникати при роботі з площинами VideoFrame:

• Неправильна структура (layout): Переконайтеся, що масив layout точно описує структуру піксельних даних у пам'яті. Неправильні зсуви або кроки (strides) можуть призвести до пошкодження зображень.
• Невідповідність форматів пікселів: Переконайтеся, що формат пікселів, який ви вказуєте в методі copyTo, відповідає фактичному формату VideoFrame.
• Витоки пам'яті: Завжди закривайте об'єкти VideoFrame та CanvasImageBitmap після завершення роботи з ними, щоб вивільнити базові ресурси. Ігнорування цього може призвести до витоків пам'яті.
• Асинхронні операції: Пам'ятайте, що copyTo є асинхронною операцією. Використовуйте await, щоб переконатися, що операція копіювання завершена, перш ніж ви отримаєте доступ до піксельних даних.
• Обмеження безпеки: Пам'ятайте про обмеження безпеки, які можуть застосовуватися при доступі до піксельних даних з відео з інших доменів (cross-origin).

Приклад: Конвертація YUV у RGB

Розглянемо більш складний приклад: перетворення VideoFrame з формату YUV420 в VideoFrame формату RGB. Це включає читання площин Y, U та V, їх перетворення у значення RGB, а потім створення нового VideoFrame у форматі RGB.

Цю конвертацію можна реалізувати за допомогою наступної формули:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Ось код:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // площина Y
    { offset: yPlaneSize, stride: width / 2 }, // площина U
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // площина V
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Альфа
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Вивільнення оригінального кадру
  return newFrame;
}

Цей приклад демонструє потужність і складність роботи з площинами VideoFrame. Він вимагає доброго розуміння форматів пікселів, структури пам'яті та перетворень колірних просторів.

Висновок

API площин VideoFrame в WebCodecs відкриває новий рівень контролю над обробкою відео в браузері. Розуміючи, як отримувати доступ та маніпулювати піксельними даними безпосередньо, ви можете створювати розширені додатки для відеоефектів у реальному часі, комп'ютерного зору, редагування відео тощо. Хоча робота з площинами VideoFrame може бути складною, потенційні переваги є значними. Оскільки WebCodecs продовжує розвиватися, він, безсумнівно, стане важливим інструментом для веброзробників, які працюють з медіа.

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

Подальше вивчення

• MDN Web Docs про WebCodecs
• Специфікація WebCodecs
• Репозиторії з прикладами коду WebCodecs на GitHub.