Truy cập mặt phẳng (Plane) của WebCodecs VideoFrame: Tìm hiểu sâu về thao tác dữ liệu video thô

Trong nhiều năm, việc xử lý video hiệu suất cao trong trình duyệt web dường như là một giấc mơ xa vời. Các nhà phát triển thường bị giới hạn bởi phần tử <video> và API Canvas 2D, mặc dù mạnh mẽ nhưng lại gây ra các tắc nghẽn về hiệu suất và hạn chế quyền truy cập vào dữ liệu video thô cơ bản. Sự ra đời của WebCodecs API đã thay đổi hoàn toàn cục diện này, cung cấp quyền truy cập cấp thấp vào các bộ giải mã phương tiện tích hợp sẵn của trình duyệt. Một trong những tính năng mang tính cách mạng nhất của nó là khả năng truy cập và thao tác trực tiếp dữ liệu thô của từng khung hình video thông qua đối tượng VideoFrame.

Bài viết này là một hướng dẫn toàn diện cho các nhà phát triển muốn vượt ra ngoài việc phát video đơn giản. Chúng ta sẽ khám phá sự phức tạp của việc truy cập mặt phẳng (plane) VideoFrame, làm sáng tỏ các khái niệm như không gian màu và bố cục bộ nhớ, và cung cấp các ví dụ thực tế để trao quyền cho bạn xây dựng thế hệ tiếp theo của các ứng dụng video trong trình duyệt, từ các bộ lọc thời gian thực đến các tác vụ thị giác máy tính tinh vi.

Điều kiện tiên quyết

Để tận dụng tối đa hướng dẫn này, bạn nên có kiến thức vững chắc về:

• JavaScript hiện đại: Bao gồm lập trình bất đồng bộ (async/await, Promises).
• Các khái niệm video cơ bản: Quen thuộc với các thuật ngữ như khung hình (frames), độ phân giải (resolution), và bộ giải mã (codecs) là rất hữu ích.
• API trình duyệt: Kinh nghiệm với các API như Canvas 2D hoặc WebGL sẽ có lợi nhưng không bắt buộc nghiêm ngặt.

Hiểu về Khung hình Video, Không gian màu và Mặt phẳng (Planes)

Trước khi chúng ta đi sâu vào API, trước tiên chúng ta phải xây dựng một mô hình tư duy vững chắc về dữ liệu của một khung hình video thực sự trông như thế nào. Một video kỹ thuật số là một chuỗi các hình ảnh tĩnh, hay còn gọi là khung hình. Mỗi khung hình là một lưới các pixel, và mỗi pixel có một màu sắc. Cách màu sắc đó được lưu trữ được xác định bởi không gian màu và định dạng pixel.

RGBA: Ngôn ngữ bản địa của Web

Hầu hết các nhà phát triển web đều quen thuộc với mô hình màu RGBA. Mỗi pixel được biểu diễn bằng bốn thành phần: Đỏ (Red), Xanh lá (Green), Xanh dương (Blue), và Alpha (độ trong suốt). Dữ liệu thường được lưu trữ xen kẽ (interleaved) trong bộ nhớ, nghĩa là các giá trị R, G, B, và A cho một pixel duy nhất được lưu trữ liên tiếp:

[R1, G1, B1, A1, R2, G2, B2, A2, ...]

Trong mô hình này, toàn bộ hình ảnh được lưu trữ trong một khối bộ nhớ duy nhất, liên tục. Chúng ta có thể coi đây là việc có một "mặt phẳng" (plane) dữ liệu duy nhất.

YUV: Ngôn ngữ của nén video

Tuy nhiên, các bộ giải mã video hiếm khi làm việc trực tiếp với RGBA. Chúng ưa thích các không gian màu YUV (hay chính xác hơn là Y'CbCr). Mô hình này tách thông tin hình ảnh thành:

• Y (Luma): Độ sáng hoặc thông tin thang độ xám. Mắt người nhạy cảm nhất với sự thay đổi về độ sáng.
• U (Cb) và V (Cr): Thông tin sắc độ hoặc chênh lệch màu. Mắt người ít nhạy cảm với chi tiết màu sắc hơn là chi tiết độ sáng.

Sự tách biệt này là chìa khóa để nén hiệu quả. Bằng cách giảm độ phân giải của các thành phần U và V—một kỹ thuật được gọi là lấy mẫu con sắc độ (chroma subsampling)—chúng ta có thể giảm đáng kể kích thước tệp với sự mất mát chất lượng cảm nhận được là tối thiểu. Điều này dẫn đến các định dạng pixel dạng mặt phẳng (planar), nơi các thành phần Y, U, và V được lưu trữ trong các khối bộ nhớ riêng biệt, hay còn gọi là "mặt phẳng" (planes).

Một định dạng phổ biến là I420 (một loại của YUV 4:2:0), trong đó với mỗi khối pixel 2x2, có bốn mẫu Y nhưng chỉ có một mẫu U và một mẫu V. Điều này có nghĩa là các mặt phẳng U và V có chiều rộng và chiều cao bằng một nửa so với mặt phẳng Y.

Hiểu được sự khác biệt này là cực kỳ quan trọng bởi vì WebCodecs cho phép bạn truy cập trực tiếp vào chính các mặt phẳng này, chính xác như cách bộ giải mã cung cấp chúng.

Đối tượng VideoFrame: Cánh cổng dẫn đến dữ liệu Pixel

Mảnh ghép trung tâm của câu đố này là đối tượng VideoFrame. Nó đại diện cho một khung hình duy nhất của video và không chỉ chứa dữ liệu pixel mà còn chứa siêu dữ liệu quan trọng.

Các thuộc tính chính của VideoFrame

• format: Một chuỗi chỉ định định dạng pixel (ví dụ: 'I420', 'NV12', 'RGBA').
• codedWidth / codedHeight: Kích thước đầy đủ của khung hình được lưu trữ trong bộ nhớ, bao gồm bất kỳ phần đệm nào theo yêu cầu của bộ giải mã.
• displayWidth / displayHeight: Kích thước nên được sử dụng để hiển thị khung hình.
• timestamp: Dấu thời gian trình bày của khung hình tính bằng micro giây.
• duration: Thời lượng của khung hình tính bằng micro giây.

Phương thức kỳ diệu: copyTo()

Phương thức chính để truy cập dữ liệu pixel thô là videoFrame.copyTo(destination, options). Phương thức bất đồng bộ này sao chép dữ liệu mặt phẳng của khung hình vào một bộ đệm mà bạn cung cấp.

• destination: Một ArrayBuffer hoặc một mảng định kiểu (như Uint8Array) đủ lớn để chứa dữ liệu.
• options: Một đối tượng chỉ định các mặt phẳng cần sao chép và bố cục bộ nhớ của chúng. Nếu bỏ qua, nó sẽ sao chép tất cả các mặt phẳng vào một bộ đệm liền kề duy nhất.

Phương thức này trả về một Promise phân giải với một mảng các đối tượng PlaneLayout, một đối tượng cho mỗi mặt phẳng trong khung hình. Mỗi đối tượng PlaneLayout chứa hai thông tin quan trọng:

• offset: Độ lệch byte nơi dữ liệu của mặt phẳng này bắt đầu trong bộ đệm đích.
• stride: Số lượng byte giữa điểm bắt đầu của một hàng pixel và điểm bắt đầu của hàng tiếp theo cho mặt phẳng đó.

Một khái niệm quan trọng: Stride và Width

Đây là một trong những nguồn gây nhầm lẫn phổ biến nhất cho các nhà phát triển mới làm quen với lập trình đồ họa cấp thấp. Bạn không thể cho rằng mỗi hàng dữ liệu pixel được đóng gói chặt chẽ nối tiếp nhau.

• Width (Chiều rộng) là số lượng pixel trong một hàng của hình ảnh.
• Stride (còn gọi là pitch hoặc line step) là số lượng byte trong bộ nhớ từ đầu một hàng đến đầu hàng tiếp theo.

Thông thường, stride sẽ lớn hơn width * bytes_per_pixel. Điều này là do bộ nhớ thường được đệm (padded) để căn chỉnh với các ranh giới phần cứng (ví dụ: ranh giới 32 hoặc 64 byte) để CPU hoặc GPU xử lý nhanh hơn. Bạn phải luôn sử dụng stride để tính toán địa chỉ bộ nhớ của một pixel trong một hàng cụ thể.

Bỏ qua stride sẽ dẫn đến hình ảnh bị lệch hoặc méo mó và truy cập dữ liệu không chính xác.

Ví dụ thực tế 1: Truy cập và hiển thị một mặt phẳng thang độ xám

Hãy bắt đầu với một ví dụ đơn giản nhưng mạnh mẽ. Hầu hết video trên web được mã hóa ở định dạng YUV như I420. Mặt phẳng 'Y' thực chất là một biểu diễn thang độ xám hoàn chỉnh của hình ảnh. Chúng ta có thể trích xuất chỉ mặt phẳng này và kết xuất nó ra canvas.

async function displayGrayscale(videoFrame) {
  // Chúng ta giả định videoFrame có định dạng YUV như 'I420' hoặc 'NV12'.
  if (!videoFrame.format.startsWith('I4')) {
    console.error('Ví dụ này yêu cầu định dạng planar YUV 4:2:0.');
    videoFrame.close();
    return;
  }

  const yPlaneInfo = videoFrame.layout[0]; // Mặt phẳng Y luôn đứng đầu tiên.

  // Tạo một bộ đệm để chỉ chứa dữ liệu mặt phẳng Y.
  const yPlaneData = new Uint8Array(yPlaneInfo.stride * videoFrame.codedHeight);

  // Sao chép mặt phẳng Y vào bộ đệm của chúng ta.
  await videoFrame.copyTo(yPlaneData, {
    rect: { x: 0, y: 0, width: videoFrame.codedWidth, height: videoFrame.codedHeight },
    layout: [yPlaneInfo]
  });

  // Bây giờ, yPlaneData chứa các pixel thang độ xám thô.
  // Chúng ta cần kết xuất nó. Chúng ta sẽ tạo một bộ đệm RGBA cho canvas.
  const canvas = document.getElementById('my-canvas');
  canvas.width = videoFrame.displayWidth;
  canvas.height = videoFrame.displayHeight;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(canvas.width, canvas.height);

  // Lặp qua các pixel của canvas và điền chúng từ dữ liệu mặt phẳng Y.
  for (let y = 0; y < videoFrame.displayHeight; y++) {
    for (let x = 0; x < videoFrame.displayWidth; x++) {
      // Quan trọng: Sử dụng stride để tìm chỉ số nguồn chính xác!
      const yIndex = y * yPlaneInfo.stride + x;
      const luma = yPlaneData[yIndex];

      // Tính chỉ số đích trong bộ đệm RGBA ImageData.
      const rgbaIndex = (y * canvas.width + x) * 4;

      imageData.data[rgbaIndex] = luma;     // Đỏ
      imageData.data[rgbaIndex + 1] = luma; // Xanh lá
      imageData.data[rgbaIndex + 2] = luma; // Xanh dương
      imageData.data[rgbaIndex + 3] = 255;  // Alpha
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // QUAN TRỌNG: Luôn đóng VideoFrame để giải phóng bộ nhớ của nó.
  videoFrame.close();
}

Ví dụ này nêu bật một số bước chính: xác định bố cục mặt phẳng chính xác, cấp phát bộ đệm đích, sử dụng copyTo để trích xuất dữ liệu, và lặp qua dữ liệu một cách chính xác bằng cách sử dụng stride để xây dựng một hình ảnh mới.

Ví dụ thực tế 2: Thao tác tại chỗ (Bộ lọc Sepia)

Bây giờ hãy thực hiện một thao tác dữ liệu trực tiếp. Bộ lọc sepia là một hiệu ứng cổ điển dễ thực hiện. Đối với ví dụ này, việc làm việc với một khung hình RGBA sẽ dễ dàng hơn, bạn có thể lấy nó từ canvas hoặc context WebGL.

async function applySepiaFilter(videoFrame) {
  // Ví dụ này giả định khung hình đầu vào là 'RGBA' hoặc 'BGRA'.
  if (videoFrame.format !== 'RGBA' && videoFrame.format !== 'BGRA') {
    console.error('Ví dụ bộ lọc Sepia yêu cầu một khung hình RGBA.');
    videoFrame.close();
    return null;
  }

  // Cấp phát một bộ đệm để chứa dữ liệu pixel.
  const frameDataSize = videoFrame.allocationSize();
  const frameData = new Uint8Array(frameDataSize);
  await videoFrame.copyTo(frameData);

  const layout = videoFrame.layout[0]; // RGBA là một mặt phẳng duy nhất

  // Bây giờ, thao tác dữ liệu trong bộ đệm.
  for (let y = 0; y < videoFrame.codedHeight; y++) {
    for (let x = 0; x < videoFrame.codedWidth; x++) {
      const pixelIndex = y * layout.stride + x * 4; // 4 byte mỗi pixel (R,G,B,A)

      const r = frameData[pixelIndex];
      const g = frameData[pixelIndex + 1];
      const b = frameData[pixelIndex + 2];

      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
      const tb = 0.272 * r + 0.534 * g + 0.131 * b;

      frameData[pixelIndex] = Math.min(255, tr);
      frameData[pixelIndex + 1] = Math.min(255, tg);
      frameData[pixelIndex + 2] = Math.min(255, tb);
      // Alpha (frameData[pixelIndex + 3]) không thay đổi.
    }
  }

  // Tạo một VideoFrame *mới* với dữ liệu đã sửa đổi.
  const newFrame = new VideoFrame(frameData, {
    format: videoFrame.format,
    codedWidth: videoFrame.codedWidth,
    codedHeight: videoFrame.codedHeight,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  // Đừng quên đóng khung hình gốc!
  videoFrame.close();

  return newFrame;
}

Điều này minh họa một chu trình đọc-sửa-ghi hoàn chỉnh: sao chép dữ liệu ra, lặp qua nó bằng cách sử dụng stride, áp dụng một phép biến đổi toán học cho mỗi pixel, và xây dựng một VideoFrame mới với dữ liệu kết quả. Khung hình mới này sau đó có thể được kết xuất ra canvas, gửi đến một VideoEncoder, hoặc chuyển sang một bước xử lý khác.

Hiệu suất là quan trọng: JavaScript và WebAssembly (WASM)

Lặp qua hàng triệu pixel cho mỗi khung hình (một khung hình 1080p có hơn 2 triệu pixel, hoặc 8 triệu điểm dữ liệu trong RGBA) bằng JavaScript có thể chậm. Mặc dù các công cụ JS hiện đại cực kỳ nhanh, nhưng đối với việc xử lý video độ phân giải cao (HD, 4K) trong thời gian thực, cách tiếp cận này có thể dễ dàng làm quá tải luồng chính, dẫn đến trải nghiệm người dùng giật lag.

Đây là lúc WebAssembly (WASM) trở thành một công cụ thiết yếu. WASM cho phép bạn chạy mã được viết bằng các ngôn ngữ như C++, Rust, hoặc Go với tốc độ gần như gốc bên trong trình duyệt. Quy trình làm việc để xử lý video trở thành:

1. Trong JavaScript: Sử dụng videoFrame.copyTo() để lấy dữ liệu pixel thô vào một ArrayBuffer.
2. Chuyển đến WASM: Chuyển một tham chiếu đến bộ đệm này vào mô-đun WASM đã được biên dịch của bạn. Đây là một hoạt động rất nhanh vì nó không liên quan đến việc sao chép dữ liệu.
3. Trong WASM (C++/Rust): Thực thi các thuật toán xử lý hình ảnh được tối ưu hóa cao của bạn trực tiếp trên bộ đệm bộ nhớ. Điều này nhanh hơn nhiều lần so với một vòng lặp JavaScript.
4. Trở về JavaScript: Khi WASM hoàn thành, quyền kiểm soát trở lại JavaScript. Sau đó, bạn có thể sử dụng bộ đệm đã sửa đổi để tạo một VideoFrame mới.

Đối với bất kỳ ứng dụng thao tác video thời gian thực nghiêm túc nào—chẳng hạn như nền ảo, phát hiện đối tượng, hoặc các bộ lọc phức tạp—việc tận dụng WebAssembly không chỉ là một lựa chọn; đó là một sự cần thiết.

Xử lý các định dạng Pixel khác nhau (ví dụ: I420, NV12)

Mặc dù RGBA đơn giản, bạn sẽ thường xuyên nhận được các khung hình ở định dạng YUV dạng mặt phẳng từ một VideoDecoder. Hãy xem cách xử lý một định dạng hoàn toàn dạng mặt phẳng như I420.

Một VideoFrame ở định dạng I420 sẽ có ba bộ mô tả bố cục trong mảng layout của nó:

• layout[0]: Mặt phẳng Y (luma). Kích thước là codedWidth x codedHeight.
• layout[1]: Mặt phẳng U (chroma). Kích thước là codedWidth/2 x codedHeight/2.
• layout[2]: Mặt phẳng V (chroma). Kích thước là codedWidth/2 x codedHeight/2.

Đây là cách bạn sẽ sao chép cả ba mặt phẳng vào một bộ đệm duy nhất:

async function extractI420Planes(videoFrame) {
  const totalSize = videoFrame.allocationSize({ format: 'I420' });
  const allPlanesData = new Uint8Array(totalSize);

  const layouts = await videoFrame.copyTo(allPlanesData);

  // layouts là một mảng gồm 3 đối tượng PlaneLayout
  console.log('Bố cục mặt phẳng Y:', layouts[0]); // { offset: 0, stride: ... }
  console.log('Bố cục mặt phẳng U:', layouts[1]); // { offset: ..., stride: ... }
  console.log('Bố cục mặt phẳng V:', layouts[2]); // { offset: ..., stride: ... }

  // Bây giờ bạn có thể truy cập từng mặt phẳng trong bộ đệm `allPlanesData`
  // bằng cách sử dụng offset và stride cụ thể của nó.

  const yPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[0].offset,
    layouts[0].stride * videoFrame.codedHeight
  );

  // Lưu ý kích thước sắc độ bị giảm đi một nửa!
  const uPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[1].offset,
    layouts[1].stride * (videoFrame.codedHeight / 2)
  );

  const vPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[2].offset,
    layouts[2].stride * (videoFrame.codedHeight / 2)
  );

  console.log('Kích thước mặt phẳng Y đã truy cập:', yPlaneView.byteLength);
  console.log('Kích thước mặt phẳng U đã truy cập:', uPlaneView.byteLength);

  videoFrame.close();
}

Một định dạng phổ biến khác là NV12, là bán-phẳng (semi-planar). Nó có hai mặt phẳng: một cho Y, và một mặt phẳng thứ hai nơi các giá trị U và V được xen kẽ (ví dụ: [U1, V1, U2, V2, ...]). API WebCodecs xử lý điều này một cách minh bạch; một VideoFrame ở định dạng NV12 sẽ chỉ có hai bố cục trong mảng layout của nó.

Thách thức và các phương pháp hay nhất

Làm việc ở cấp độ thấp này rất mạnh mẽ, nhưng nó đi kèm với trách nhiệm.

Quản lý bộ nhớ là tối quan trọng

Một VideoFrame giữ một lượng bộ nhớ đáng kể, thường được quản lý bên ngoài heap của bộ thu gom rác JavaScript. Nếu bạn không giải phóng bộ nhớ này một cách rõ ràng, bạn sẽ gây ra rò rỉ bộ nhớ có thể làm sập tab trình duyệt.

Luôn luôn, luôn luôn gọi videoFrame.close() khi bạn đã hoàn tất với một khung hình.

Bản chất bất đồng bộ

Tất cả các truy cập dữ liệu đều là bất đồng bộ. Kiến trúc ứng dụng của bạn phải xử lý luồng Promises và async/await một cách hợp lý để tránh các điều kiện tranh đua (race conditions) và đảm bảo một quy trình xử lý mượt mà.

Khả năng tương thích của trình duyệt

WebCodecs là một API hiện đại. Mặc dù được hỗ trợ trong tất cả các trình duyệt lớn, hãy luôn kiểm tra tính khả dụng của nó và nhận thức về bất kỳ chi tiết triển khai hoặc hạn chế cụ thể nào của nhà cung cấp. Sử dụng phát hiện tính năng trước khi cố gắng sử dụng API.

Kết luận: Một chân trời mới cho Video trên Web

Khả năng truy cập và thao tác trực tiếp dữ liệu mặt phẳng thô của một VideoFrame thông qua API WebCodecs là một sự thay đổi mô hình cho các ứng dụng phương tiện dựa trên web. Nó loại bỏ hộp đen của phần tử <video> và mang lại cho các nhà phát triển quyền kiểm soát chi tiết mà trước đây chỉ dành cho các ứng dụng gốc.

Bằng cách hiểu các nguyên tắc cơ bản của bố cục bộ nhớ video—mặt phẳng, stride, và các định dạng màu—và bằng cách tận dụng sức mạnh của WebAssembly cho các hoạt động quan trọng về hiệu suất, bạn giờ đây có thể xây dựng các công cụ xử lý video cực kỳ tinh vi trực tiếp trong trình duyệt. Từ việc chỉnh màu thời gian thực và các hiệu ứng hình ảnh tùy chỉnh đến học máy phía máy khách và phân tích video, các khả năng là vô cùng rộng lớn. Kỷ nguyên của video hiệu suất cao, cấp thấp trên web đã thực sự bắt đầu.