【译】 Web 端视频帧处理——WebAssembly、WebGPU、WebGL、WebCodecs、WebNN 和 WebTransport

前言

• Chrome 97+ 正式支持了WebTransport，

• Safari 16.4 正式支持了WebCodecs

• Chrome 113 正式支持 WebGPU

正文

视频帧处理选项

使用 JavaScript 处理

// 将帧复制到一个足够大的（full HD frame）缓冲器中
const buffer = new Uint8Array(1920*1080*4);
await frame.copyTo(buffer);
// 保存帧的预设（尺寸、格式、色彩空间）并关闭它
const frameSettings = getFrameSettings(frame);
frame.close();
// 处理缓冲区并创建更新的视频帧
process(buffer, frameSettings);
const processedFrame = new VideoFrame(buffer, frameSettings);

像素格式

性能

使用 WebAssembly

1. 顾名思义，WebAssembly 是一种低级汇编语言，编译成二进制格式在浏览器（和其他运行时）中运行。除了提供接近 native 性能外，还有许多编译器可用于从常见源语言（C / C ++，Rust，C＃，AssemblyScript 等）生成 WebAssembly 代码，使 WebAssembly 适用于将现有代码库移植到 Web 上。

2. WebAssembly 仅具有数字类型（好吧，引用类型也存在，但它们与手头的问题无关，让我们忽略它们）。从字符串到更复杂的对象，任何其他内容都是应用程序（或编译器）需要在数字类型之上创建的抽象。

3. WebAssembly 可以将函数导出 / 导入 JavaScript，因此与 JavaScript 的集成很简单。

4. WebAssembly 代码在线性内存上操作，即 ArrayBuffer，可以被 JavaScript 代码和WebAssembly 代码访问。

演示代码

速度

1. 像素可以使用 WebAssembly线程 进行并行处理（类似 JavaScript Worker）。WebAssembly 线程仍处于 proposal 阶段，尚未成为 WebAssembly 核心标准的一部分，但它们已经被各浏览器支持。

2. 单指令多数据（SIMD）指令可用于一次处理多达四个像素，详情见 WebAssembly 规范中的矢量指令。

其他考虑

• WebAssembly 读/写数字时使用 little-endian 的字节排序。演示中的 WebAssembly 代码一次性读取了四种颜色的组件，有效地颠倒了所得数字中的字节顺序（RGBA 变成ABGR）。

• 与 JavaScript 一样，WebAssembly 代码也需要处理所有不同的像素格式。我们的代码只处理类似 RGBA 的格式，因为我们使用WebGPU 将传入的帧转换为RGBA（见下文），然后再到达 WebAssembly 转换。

使用 WebGPU

Demo 代码

@vertex
fn vert_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
  var pos = array<vec2<f32>, 6>(
    vec2<f32>(1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, -1.0),
    vec2<f32>(1.0, 1.0), vec2<f32>(-1.0, -1.0), vec2<f32>(-1.0, 1.0));
  var uv = array<vec2<f32>, 6>(
    vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0), vec2<f32>(0.0, 1.0),
    vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0), vec2<f32>(0.0, 0.0));
  var output : VertexOutput;
  output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
  output.uv = uv[VertexIndex];
  return output;
}

@fragment
fn frag_main(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
  if (uv.x > 0.75 && uv.y > 0.75) {
    let xcomp: f32 = (1 + sign(uv.x - 0.875)) / 2;
    let ycomp: f32 = (1 + sign(uv.y - 0.875)) / 2;
    let idx: u32 = u32(sign(xcomp) + 2 * sign(ycomp));
    return timestampToColor(params.timestamp, idx);
  } else {
    return textureSampleBaseClampToEdge(myTexture, mySampler, uv);
  }
}

gpuDevice.queue.submit([commandEncoder.finish()]);
const processedFrame = new VideoFrame(canvas, …);
controller.enqueue(processedFrame);

• 对 submit 的调用在GPU上运行命令，这显然是一个异步过程。但无需等待，浏览器会自动等待与Canvas 链接的GPU命令完成，然后再尝试读取画布（此处是对VideoFrame构造函数的调用）。

• 从 WebGPU 的角度来看，Canvas 并非严格需要创建的，因为我们的目标不是将结果显示在屏幕上，而是生成一个新的 VideoFrame 对象。相反，我们可以使用 gpuDevice.createTexture 渲染普通纹理。问题是没有直接的方法从 GPUBuffer 中创建 VideoFrame，因此从 WebCodecs 的角度来看需要 Canvas 来避免将结果复制到 CPU内存中。

GPU 编程是完全不同的

1. WebGPU 着色语言（WGSL）中的内存布局在对齐和大小方面对值施加了限制。当您想将参数与纹理一起传递给GPU时，很容易出错。

2. 内存位置被划分为地址空间。我不清楚 uniform 和 storage 之间的区别。什么情况下应该使用这两种方式？什么是合理的内存容量？

3. 实现相同结果的方法有很多。有正确的方法吗？例如，按照目前的写法，片段着色器的效率很低，因为它要检查收到的每个像素的像素坐标。如果扩展顶点着色器，将整个帧划分为一组三角形，并为每个坐标返回一个附加参数，说明该点是取自原始帧，还是取自彩色编码点，则效率会更高。这样做值得吗？

WebGPU 速度很快!

@fragment
fn frag_main(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
  return textureSampleBaseClampToEdge(myTexture, mySampler, uv);
}

WebGPU samples 可能已经损坏

使用 WebGL

gl.texImage2D(
	gl.TEXTURE_2D, 0,
	gl.RGBA, gl.RGBA,
	gl.UNSIGNED_BYTE,
	frame);

使用 WebCodecs

TransformStream

const EncodeVideoStream = new TransformStream({
  start(controller) {
    // Skipped: a few per-frame parameters
    this.encodedCallback = null;
    this.encoder = encoder = new VideoEncoder({
      output: (chunk, cfg) => {
        if (cfg.decoderConfig) {
          // Serialize decoder config as chunk
          const decoderConfig = JSON.stringify(cfg.decoderConfig);
          const configChunk = { … };
          controller.enqueue(configChunk);
        }
        // Skipped: increment per-frame parameters
        if (this.encodedCallback) {
          this.encodedCallback();
          this.encodedCallback = null;
        }
        controller.enqueue(chunk);
      },
      error: e => { console.error(e); }
    });
    VideoEncoder.isConfigSupported(encodeConfig)
      .then(encoderSupport => {
        // Skipped: check that config is really supported
        this.encoder.configure(encoderSupport.config);
      })
  },
  transform(frame, controller) {
    // Skip: check encoder state
    // encode() runs async, resolve transform() promise once done
    return new Promise(resolve => {
      this.encodedCallback = resolve;
      // Skipped: check need to encode frame as key frame
      this.encoder.encode(frame, { … });
      frame.close();
    });
  }
});

WebCodecs 性能

CPU vs. GPU

使用 WebTransport

使用 Web Neural Network (WebNN)

SOURCE: https://www.w3.org/TR/webnn/#example-99852ef0

const context = await navigator.ml.createContext({powerPreference: 'low-power'});
/*
The following code builds a graph as:
constant1 ---+
             +--- Add ---> intermediateOutput1 ---+
input1    ---+                                    |
                                                  +--- Mul---> output
constant2 ---+                                    |
             +--- Add ---> intermediateOutput2 ---+
input2    ---+
*/

// Use tensors in 4 dimensions.
const TENSOR_DIMS = [1, 2, 2, 2];
const TENSOR_SIZE = 8;

const builder = new MLGraphBuilder(context);

// Create MLOperandDescriptor object.
const desc = {type: 'float32', dimensions: TENSOR_DIMS};

// constant1 is a constant MLOperand with the value 0.5.
const constantBuffer1 = new Float32Array(TENSOR_SIZE).fill(0.5);
const constant1 = builder.constant(desc, constantBuffer1);

// input1 is one of the input MLOperands. Its value will be set before execution.
const input1 = builder.input('input1', desc);

// constant2 is another constant MLOperand with the value 0.5.
const constantBuffer2 = new Float32Array(TENSOR_SIZE).fill(0.5);
const constant2 = builder.constant(desc, constantBuffer2);

// input2 is another input MLOperand. Its value will be set before execution.
const input2 = builder.input('input2', desc);

// intermediateOutput1 is the output of the first Add operation.
const intermediateOutput1 = builder.add(constant1, input1);

// intermediateOutput2 is the output of the second Add operation.
const intermediateOutput2 = builder.add(constant2, input2);

// output is the output MLOperand of the Mul operation.
const output = builder.mul(intermediateOutput1, intermediateOutput2);

总结

用 stream 还是不用 stream

像素格式和色彩空间

技术和复杂度

拷贝和隐藏拷贝