WebCodecs 与视频处理

概述

WebCodecs API 是 W3C 制定的浏览器原生编解码标准接口，它提供了一套底层的音视频编解码能力，允许 JavaScript 直接访问浏览器的编解码器（Codec），而不必依赖 <video> 或 <audio> 标签。WebCodecs 的出现填补了浏览器在精细化的音视频处理领域的空白，使开发者能够在浏览器端实现高效的视频编辑、转码、流式处理和实时通信。

传统的浏览器视频处理方案通常依赖 MediaRecorder 录制或 WebAssembly 编解码器，前者控制粒度太粗，后者性能不如原生实现。WebCodecs 直接调用浏览器底层的硬件或软件编解码器，在性能和控制力之间取得了最佳平衡。

核心 API

VideoEncoder 与 VideoDecoder

VideoEncoder 和 VideoDecoder 是 WebCodecs 的两个核心接口，分别用于视频的编码和解码。

VideoEncoder 的使用：

javascript

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // 处理编码后的 EncodedVideoChunk
    const buffer = new Uint8Array(chunk.byteLength)
    chunk.copyTo(buffer)
    // 发送或存储 buffer
  },
  error: (e) => console.error('编码错误', e)
})

await encoder.configure({
  codec: 'vp09.00.10.08',
  width: 1920,
  height: 1080,
  bitrate: 5_000_000,
  framerate: 30
})

// 送入视频帧进行编码
const frame = new VideoFrame(canvas, { timestamp: 0 })
encoder.encode(frame)
frame.close()

VideoDecoder 的使用：

javascript

const decoder = new VideoDecoder({
  output: (frame) => {
    // 处理解码后的 VideoFrame
    // 可以绘制到 Canvas 或传递给其他处理节点
    canvasContext.drawImage(frame, 0, 0)
    frame.close()
  },
  error: (e) => console.error('解码错误', e)
})

await decoder.configure({
  codec: 'vp09.00.10.08',
  codedWidth: 1920,
  codedHeight: 1080
})

// 送入编码数据块
decoder.decode(new EncodedVideoChunk({
  type: 'key',
  timestamp: 0,
  duration: 33000, // 微秒
  data: encodedBuffer
}))

EncodedVideoChunk

EncodedVideoChunk 代表一个编码后的视频数据块，包含以下关键属性：

type：'key'（关键帧）或 'delta'（增量帧）
timestamp：时间戳（微秒）
duration：持续时间（微秒）
byteLength：数据长度
copyTo：将数据拷贝到 ArrayBuffer

开发者可以通过 copyTo 方法将编码数据提取出来，用于存储、传输或进一步处理。

VideoFrame

VideoFrame 是 WebCodecs 中表示未编码视频帧的对象，可以通过多种方式创建：

从 Canvas 创建：new VideoFrame(canvas, options)
从 ImageBitmap 创建：new VideoFrame(bitmap, options)
从 OffscreenCanvas 创建：new VideoFrame(offscreenCanvas, options)
从 <video> 元素创建：通过 requestVideoFrameCallback 获取

VideoFrame 支持 YUV 和 RGB 色彩空间，可以通过 format 属性查询像素格式。

MediaStream 操作

getUserMedia 流捕获

navigator.mediaDevices.getUserMedia 用于获取摄像头和麦克风输入流，是视频处理流程的第一步：

javascript

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 30 }
  },
  audio: true
})

// 将流连接到 video 元素预览
videoElement.srcObject = stream

捕获到的 MediaStream 可以切割成独立的 MediaStreamTrack，每个 Track 可以被单独处理、替换或禁用。

MediaRecorder 录制

MediaRecorder 是对 MediaStream 进行录制的上层接口，支持多种容器格式：

javascript

const recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9'
})

recorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    chunks.push(event.data)
  }
}

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' })
  const url = URL.createObjectURL(blob)
  // 创建下载链接或预览
}

recorder.start(1000) // 每秒触发一次 dataavailable

MediaRecorder 的时间切片模式可以用于实时流式传输，将录制的数据分块发送到服务器。

屏幕录制

navigator.mediaDevices.getDisplayMedia 用于捕获屏幕内容：

javascript

const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: { cursor: 'always' },
  audio: false
})

屏幕录制常用于在线教育、远程协作和产品演示场景，结合 WebCodecs 可以实现高效的录屏编码。

Canvas 实时视频滤镜

Canvas API 提供了逐帧处理视频的能力，通过在 requestAnimationFrame 循环中读取每一帧并应用像素级变换，实现实时滤镜效果。

javascript

function processFrame() {
  // 从视频源绘制到 Canvas
  ctx.drawImage(videoElement, 0, 0, width, height)

  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, width, height)
  const data = imageData.data

  // 应用滤镜算法
  applyFilter(data, width, height, filterType)

  // 写回 Canvas
  ctx.putImageData(imageData, 0, 0)

  requestAnimationFrame(processFrame)
}

常见滤镜算法

灰度化：将 RGB 三个通道按亮度权重加权平均，gray = R * 0.299 + G * 0.587 + B * 0.114。

反色：每个通道值取 255 的补数，newValue = 255 - oldValue。

模糊：使用 CSS filter: blur(px) 或通过卷积核计算邻域像素平均值。

边缘检测：使用 Sobel 算子计算图像梯度，提取边缘信息：

javascript

const sobelX = [-1, 0, 1, -2, 0, 2, -1, 0, 1]
const sobelY = [-1, -2, -1, 0, 0, 0, 1, 2, 1]

function edgeDetect(data, width, height) {
  const output = new Uint8ClampedArray(data.length)
  // 对每个像素应用卷积核
  for (let y = 1; y < height - 1; y++) {
    for (let x = 1; x < width - 1; x++) {
      let gx = 0, gy = 0
      const idx = (y * width + x) * 4
      // 计算 3x3 邻域的梯度
      for (let ky = -1; ky <= 1; ky++) {
        for (let kx = -1; kx <= 1; kx++) {
          const pixelIdx = ((y + ky) * width + (x + kx)) * 4
          const gray = data[pixelIdx] * 0.299 + data[pixelIdx + 1] * 0.587 + data[pixelIdx + 2] * 0.114
          gx += gray * sobelX[(ky + 1) * 3 + (kx + 1)]
          gy += gray * sobelY[(ky + 1) * 3 + (kx + 1)]
        }
      }
      const magnitude = Math.min(255, Math.sqrt(gx * gx + gy * gy))
      output[idx] = output[idx + 1] = output[idx + 2] = magnitude
      output[idx + 3] = 255
    }
  }
  return output
}

像素化：将图像划分为块区域，每个块取平均值颜色，产生马赛克效果。

视频裁剪与拼接原理

裁剪

视频裁剪本质上是改变 VideoFrame 的可见区域，可以通过 VideoFrame 构造函数的 cropLeft、cropTop、cropWidth、cropHeight 参数实现。

在 Canvas 层面的裁剪更简单，使用 drawImage 的源区域参数即可截取视频的任意矩形区域：

javascript

// 参数：source, sx, sy, sw, sh, dx, dy, dw, dh
ctx.drawImage(videoElement, 100, 50, 640, 360, 0, 0, 640, 360)

拼接

视频拼接涉及多个视频片段的排列组合，可以分为：

时间拼接：将多个片段按时间顺序合并为一个连续视频
空间拼接：将多个画面同时显示在一个画面上（画中画、分屏等）

实现时间拼接需要依赖 WebCodecs 的精确时间戳控制，确保拼接点处的时间连续性和帧对齐。

浏览器端编解码性能

硬件加速

WebCodecs 在大多数现代浏览器中支持硬件加速编解码，包括：

VP8/VP9：Chrome、Edge、Firefox 均支持硬件加速
H.264：几乎所有现代浏览器都支持
AV1：Chrome 和 Edge 支持硬件加速（需较新 GPU）
HEVC/H.265：Safari 原生支持，其他浏览器通过系统解码器支持

性能对比

在浏览器端进行视频编解码时，WebCodecs 相比 WebAssembly 方案具有明显的性能优势：

方案	编码速度	解码速度	内存占用	CPU 使用率
WebCodecs（硬件加速）	60+ fps 1080p	120+ fps 1080p	低	10-20%
FFmpeg.wasm	15-25 fps 1080p	30-45 fps 1080p	高	80-100%
WebCodecs（软件）	30-40 fps 1080p	60-80 fps 1080p	中	40-60%

性能优化建议

优先使用硬件加速编解码：通过 VideoEncoder.isConfigSupported() 检测支持的配置组合
合理选择编码参数：根据场景调整 bitrate、framerate 和 GOP 大小
避免频繁创建/关闭 VideoFrame：使用对象池复用帧对象
利用 Workers：将编解码操作放在 Worker 线程中，避免阻塞主线程渲染
批量处理：收集多个帧后统一编码，减少编码器状态切换开销

实践注意事项

在使用 WebCodecs 进行视频开发时，需要注意以下事项：

浏览器兼容性：虽然主流浏览器已支持 WebCodecs，但不同浏览器的编解码器支持范围存在差异，建议在生产环境前进行充分的兼容性测试
编码配置检测：始终使用 VideoEncoder.isConfigSupported() 和 VideoDecoder.isConfigSupported() 检测配置是否可用
内存管理：VideoFrame 和 EncodedVideoChunk 占用 GPU/CPU 内存，使用完毕后必须调用 close() 方法释放资源
错误处理：编解码过程中可能发生各种错误（如不支持的码率、分辨率变化等），需要实现完善的错误恢复机制
安全限制：WebCodecs 受到浏览器的安全策略限制，需要在安全上下文（HTTPS 或 localhost）中使用

WebCodecs 与视频处理 ​

概述 ​

核心 API ​

VideoEncoder 与 VideoDecoder ​

EncodedVideoChunk ​

VideoFrame ​

MediaStream 操作 ​

getUserMedia 流捕获 ​

MediaRecorder 录制 ​

屏幕录制 ​

Canvas 实时视频滤镜 ​

常见滤镜算法 ​

视频裁剪与拼接原理 ​

裁剪 ​

拼接 ​

浏览器端编解码性能 ​

硬件加速 ​

性能对比 ​

性能优化建议 ​

实践注意事项 ​

WebCodecs 与视频处理

概述

核心 API

VideoEncoder 与 VideoDecoder

EncodedVideoChunk

VideoFrame

MediaStream 操作

getUserMedia 流捕获

MediaRecorder 录制

屏幕录制

Canvas 实时视频滤镜

常见滤镜算法

视频裁剪与拼接原理

裁剪

拼接

浏览器端编解码性能

硬件加速

性能对比

性能优化建议

实践注意事项