We 如何构建浏览器- Native 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曝光两个关键界面:

• 兹克0qZ - 取原始视频帧,输出编码为 H.264(或 VP8/VP9/AV1) 位流块
• 兹克0qZ - 取编码块,输出原始框架(用于重播,而不是导出)

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

1. 在想要的分辨率和比特率下为 H.264 创建一个 VideoEncoder 配置
2. 每个动画框: 抓取画布为 VideoFrame, 输入它 输入编码器
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
});

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

比特率控制质量对文件大小. 5 Mbps为3秒剪辑:5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. 实际规模因内容复杂程度而异—— 静态场景压缩比快速运动更好.

步骤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
}

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

步骤 3: MP4 模拟

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

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

• ftyp 框: 文件类型声明(isom, iso2, mp41)
• moov 框:电影元数据、音轨描述、计时表
• mdat盒:实际编码的视频数据

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

步骤4:下载

完成的MP4编组为Blob,通过URL.createObjectURL()转换为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 粘合, 以及下载 - 发生在浏览器中. 没有服务器 . 无上传. 无第三方处理.

业绩

在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. 中国植物物种信息数据库.
• (原始内容存档于2018-03-21). McIlroy, D. (2021) (中文(中国大陆) ). WebCodes 解释器. W3C WICG (英语). github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md. 互联网档案馆的存檔,存档日期2013-12-02.
• (原始内容存档于2019-10-03). Richardson, I.E.G. (2010年). * H.264先进视频压缩标准* (第2版). 维利.
• (原始内容存档于2018-10-03). Vani, A. mp4- muxer - (英语) 用于WebCodecs的JavaScript MP4 muxer. github.com/nicerobot/nierobot.github.io. (原始内容存档于2017-03-09).
• W3C (2021) (英语). WebCodecs API 规格. w3c.github.io/webcodecs/. 互联网档案馆的存檔,存档日期2013-03-02.

---

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