17370845950

使用 webcodecs api 直接编码 webgl 帧为 h.264，并手动构建 mp4 容器，是当前浏览器端最高效、原生支持、跨平台（含 android chrome）的视频生成方案。

在 Web 应用中将 WebGL 渲染画面实时录制为 MP4 视频，长期以来受限于性能与兼容性——WASM 版 FFmpeg 体积大、启动慢、移动端耗电高；老旧的第三方 MP4 封装库（如已归档的 wasm-mp4-encoder）缺乏维护，且在现代 Android Chrome（v110+）中因 WebAssembly 线程或内存模型变更而失效。真正高性能、低延迟、可生产落地的解法，是拥抱浏览器原生能力：WebCodecs API + 手动 MP4 muxing。

✅ 核心优势：为什么 WebCodecs 是最优选？

• 零依赖、零加载：内置于 Chromium（Chrome / Edge / Android Chrome）、Firefox（部分支持）、Safari（逐步推进），无需下载 MB 级 WASM 模块；
• 硬件加速直通：通过 hardwareAcceleration: 'prefer-hardware'（需配合 latencyMode: 'realtime'）可触发 GPU 编码器，帧率稳定、CPU 占用极低；
• 流式处理友好：VideoEncoder 支持异步 encode() + output 回调，天然适配逐帧捕获（readPixels → VideoFrame → 编码）流水线；
• Android 全面兼容：自 Chrome 94 起已在 Android 12+ 设备稳定支持，实测 Android 13（Chrome 124）完全可用。

? 实战三步走：从 Canvas 到可播放 MP4

第一步：高效捕获帧并构造 VideoFrame

避免 readPixels 后冗余转换。推荐直接使用 canvas> 元素作为 VideoFrame 输入源（无需 ImageData 中转）：

// 假设 yourWebGLCanvas 已渲染完毕
const frame = new VideoFrame(yourWebGLCanvas, {
  timestamp: performance.now() * 1000, // μs 精度时间戳
  visibleRect: new DOMRect(0, 0, canvas.width, canvas.height)
});

⚠️ 注意：确保 Canvas 的 alpha: false（WebGL 上下文创建时设置），否则透明通道会强制启用 BGRA 转换，降低性能。

第二步：配置并启动 VideoEncoder

关键配置决定质量与性能平衡：

const encoder = new VideoEncoder({
  output: handleChunk,
  error: e => console.error("Encoder error:", e.message)
});

encoder.configure({
  codec: "avc1.42C01E", // H.264 Baseline Profile Level 3.0 (兼容性最佳)
  width: canvas.width,
  height: canvas.height,
  bitrateMode: "variable",
  bitrate: 2_000_000, // 2 Mbps（按需调整）
  framerate: 30,
  latencyMode: "realtime", // 必选！启用低延迟编码路径
  avc: { format: "annexb" } // 输出带 NALU 起始码（00 00 00 01），MP4 muxing 必需
});

第三步：封装为 MP4 —— 手写原子（Atom）而非依赖黑盒库

MP4 本质是“盒子嵌套”结构。最小可播放 MP4 至少需以下原子：

• ftyp（文件类型声明）
• moov（元数据：mvhd, trak, mdia, minf, stbl 等）
• mdat（实际 H.264 数据）

你无需实现全部——可复用成熟轻量库完成核心 muxing：

• ✅ MP4Box.js（推荐）：专注 MP4 操作，支持 addTrack() + addFrame() 流式写入，自动处理 SPS/PPS 注入、PTS/DTS 计算、stss（关键帧表）生成；
• ✅ mux.js：Video.js 生态，API 简洁，适合简单场景；
• ❌ 避免自行手写全 MP4 结构（如原始答案中的 stss 示例），易出错且维护成本高。

使用 MP4Box.js 封装示例：

import MP4Box from 'mp4box';

const mp4boxFile = MP4Box.createFile();
mp4boxFile.enableLogging(false);

// 添加 H.264 轨道（传入 SPS/PPS 及编码参数）
const track = mp4boxFile.addTrack("video/h264", {
  width: canvas.width,
  height: canvas.height,
  timescale: 1000,
  bitrate: 2_000_000
});

// 在 handleChunk 中注入帧数据
function handleChunk(encodedFrame, metadata) {
  if (metadata.decoderConfig) {
    // 注入 SPS/PPS（仅首次）
    const sps = new Uint8Array(metadata.decoderConfig.description);
    mp4boxFile.setVideoTrackMetadata(track.id, sps, null);
  }

  // 添加帧（自动处理关键帧标记、时间戳）
  const sample = {
    data: encodedFrame,
    pts: encodedFrame.timestamp, // μs
    cts: 0,
    dts: encodedFrame.timestamp,
    is_sync: metadata.keyFrame || false,
    duration: 1000 / 30 * 1000 // 30fps → 33333 μs/frame
  };
  mp4boxFile.addSample(track.id, sample);
}

// 结束后导出 Blob
function exportMP4() {
  const buffer = mp4boxFile.flush();
  const blob = new Blob([buffer], { type: "video/mp4" });
  const url = URL.createObjectURL(blob);
  // 下载或播放...
}

? 关键注意事项

• 内存管理：每次 VideoFrame 使用后务必调用 .close()，否则导致内存泄漏；
• 帧率控制：WebGL 渲染帧率可能高于目标视频帧率（如 60fps → 30fps），需主动丢帧（检查 encoder.encodeQueueSize > 2）；
• SPS/PPS 处理：H.264 编码器首帧输出包含 SPS/PPS，必须在 MP4 的 moov 中正确写入，否则无法播放；
• 移动端限制：Android Chrome 对 VideoEncoder 的 bitrate 上限较保守（建议 ≤ 4Mbps），过高会导致编码失败；
• 回退方案：对不支持 WebCodecs 的浏览器（如 Safari

✅ 总结

放弃臃肿的 WASM FFmpeg，拥抱 WebCodecs 是浏览器端视频编码的范式升级。它以原生性能、低延迟、高兼容性，成为 WebGL 录屏、实时可视化导出、Web 游戏录像等场景的首选技术栈。结合 MP4Box.js 这类专业 muxing 库，你能在 200 行核心代码内，构建出媲美桌面软件的 Web 视频生成能力——轻量、可靠、面向未来。