We 如何构建浏览器- Nature MP4 导出 - 不需要服务器

问题

传统的基于网络的动画工具通过向服务器发送帧,用ffmpeg编码来导出视频,并返回结果. 这有三个成本:上传带宽(发送千兆字节的框架数据),服务器计算(CPU/GPU编码时间),隐私(你的创意工作通过第三方的基础设施).

PinePaper没有做这些。 MP4 文件完全在您的浏览器中创建 。 没有框架离开你的设备。 编码发生在你机器的硬件视频编码器上. 这篇文章解释如何.

WebCodecs:浏览器中的硬件视频编码

WebCodecs API[W3C,2021]提供低水平访问浏览器内置视频编码器和解码器. 它在Chrome 94(2021年9月)发运,现可到Chrome,Edge和Opera使用. Safari和Firefox有部分或实验支持[Can I Use,2026].

WebCodecs曝光两个关键界面:

• 0Q – 取原始视频帧,输出编码为H.264(或VP8/VP9/AV1)位流块
• QQ0Q – 取编码块, 输出原始框架( 用于重播而非导出)

对于MP4导出,我们使用QQ0Q. 工作流程:

1. 在想要的分辨率和比特率下为 H.264 创建配置的 QQ0Q
2. 对于每个动画框:将画布捕获为QQ0Q,请输入 输入编码器
3. 收集编码块( raw H.264 NAL 单位)
4. 将块装入 MP4 容器
5. 提供 MP4 文件供下载

步骤1:编码器配置

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // chunk.data contains encoded H.264 bytes
    // metadata.decoderConfig contains SPS/PPS on first chunk
    muxer.addVideoChunk(chunk, metadata);
  },
  error: (e) => console.error('Encoder error:', e)
});

encoder.configure({
  codec: 'avc1.42E01E',  // H.264 Baseline Profile Level 3.0
  width: 1080,
  height: 1080,
  bitrate: 5_000_000,    // 5 Mbps
  framerate: 30
});

编码字符串 QQ 指定 H.264 基线配置 。 这是最广泛兼容的H.264简介——它在每个手机,浏览器,社交媒体平台播放. 更高的剖面(Main,High)提供更好的压缩但较少兼容性[Richardson,2010].

比特率控制质量对文件大小. 5Mbps为3秒片段:QQ0Q. 实际体积因内容复杂而异——静态场景压缩优于快速运动.

步骤2:框架抓取和编码

对于动画时长中的每个帧:

for (let frameNum = 0; frameNum < totalFrames; frameNum++) {
  const frameTime = frameNum / fps;

  // Advance animation to this time
  app.setPlaybackTime(frameTime);
  paper.view.draw();  // Full render (not view.update!)
  await new Promise(r => requestAnimationFrame(r));  // Wait for paint

  // Create VideoFrame from canvas
  const frame = new VideoFrame(canvas, {
    timestamp: frameNum * (1_000_000 / fps)  // microseconds
  });

  // Encode (keyframe every 2 seconds)
  encoder.encode(frame, {
    keyFrame: frameNum % (fps * 2) === 0
  });
  frame.close();  // Release GPU memory
}

批判细节:在推进动画和渲染画布后,必须等待QQ0Q才能捕捉. 这确保了GPU完成了堆肥像素. 没有这种同步,您会捕捉一个 stale 缓冲器并生成空白或重复的帧 .

步骤 3: MP4 模拟

VideoEncoder 输出原始的 H.264块(NAL 单元). 这些不是可播放文件——它们需要被包裹在一个MP4容器中,存储定时,元数据,以及代码配置.

PinePaper为此步骤使用mp4-muxer库[Vani,mp4-muxer]. muxer接收有时间戳的编码块,并生成一个有效的MP4文件,文件有:

• &\0Q 框: 文件类型声明 (isom, iso2, mp41)
• QQ0Q框:电影元数据,音轨描述,计时表
• QQ: 实际编码的视频数据

结果是一个符合标准的MP4,在每个视频播放器,浏览器,以及社交媒体平台中播放.

步骤4:下载

完成的MP4被组装为QQ0Q,通过QQ1Q转换为URL,并触发为下载:

await encoder.flush();  // Wait for all frames to encode
const mp4Blob = muxer.finalize();
const url = URL.createObjectURL(new Blob([mp4Blob], { type: 'video/mp4' }));

const a = document.createElement('a');
a.href = url;
a.download = 'animation.mp4';
a.click();
URL.revokeObjectURL(url);

整个管道——帧捕捉,H.264编码,MP4 muxing,以及下载——发生在浏览器中. 没有服务器 。 无上传. 无第三方处理.

业绩

在2023年的MacBook Pro(M2)上,将1080×1080动画编码为30 FPS:

会期	框架	编码时间	文件大小
3 秒钟	90	~2秒钟	~1.8 MB
10秒钟	300	~6 秒钟	~5 MB 键
30 秒钟	900	~18秒钟	~14 MB 键

编码速度比实时快,因为硬件H.264编码器(Intel Quick Sync,Apple VideoToollbox,NVIDIA NVENC)处理重计算. 浏览器的WebCodecs API代表对这些硬件加速器透明[McIlroy,2021].

浏览器支持

浏览器	网络代码	H.264 编码	状态
Chrome 94+ (英语)	对	对	全力支持
边缘 94+	对	对	全力支持(铬)
歌剧院80+	对	对	全力支持(铬)
萨法里16.4+	部分	仅解码	编码不可用
火花	国旗后面	没有	实验

对于没有WebCodecs的浏览器,PinePaper返回GIF导出,它使用纯JavaScript编码器(gif.js),并在各地工作.

参考资料

• 我能用吗(2026年). WebCodecs API浏览器支持表. caniuse.com/webcodecs. 中国植物物种信息数据库.
• McIlroy, D. (2021) (英语). WebCodecs 解释器. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• (原始内容存档于2018-10-03). Richardson, I.E.G. (2010). * H.264先进视频压缩标准* (第2版). 维利.
• Vani, A. mp4-muxer – JavaScript MP4 muxer for WebCodecs. github.com/nicerobot/nicerobot.github.io. 维基百科中的相关条目: 维基百科中的相关条目: 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语 - 谚语.
• W3C(2021). WebCodecs API规格. w3c.github.io/webcodecs/. 互联网档案馆的存檔,存档日期2013-03-02.

---

免费导出 MP4 视频——没有服务器,没有注册,没有水印. 打开pinepaper.studio/editor并试.