我們如何构建瀏覽器- Native MP4 匯出 - 不需要伺服器

問題

傳統的網路動畫工具匯出影片, 將框架送至伺服器, 用ffmpeg 編碼, 並傳回結果 。 這有三項成本:上傳帶宽( 送出大字節框架資料)、 伺服器計算( CPU/ GPU 編碼時間) 、 隱私( 您的創意工作傳輸第三方的基礎) .

PinePaper 不做這些。 MP4 文件完全在您的瀏覽器中建立 。 沒有框架留下你的裝置。 編碼會發生在你機器的硬件影像編碼器上 這篇文章解釋了.

WebCodecs:瀏覽器中的硬件影像編碼

WebCodecs API[W3C,2021]提供低水平存取瀏覽器內置的影像編碼器和解碼器. 由Chrome 94(2021年9月)運出, Safari和Firefox有部分或實驗支持[Can I Use,2026].

WebCodecs 揭發兩個關鍵介面:

• QQ0Q — 取原始影像框架, 輸出編碼為 H.264( 或 VP8/ VP9/ AV1) 位流區塊
• QQ0Q – 取編碼的區塊, 輸出原始框架( 用于播放而非匯出)

MP4 匯出時, 我們使用 VideoEncoder 。 工作流程 :

1. 在想要的解析度和位元速率下建立為 H.264 配置的% 0Q
2. 對每個動畫框: 抓取畫布為% 0Q, 給它參考 到編碼器
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
});

解碼器字串 QQ0Q 指定 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
}

關鍵細節:在推動動動畫及渲染畫布後, 這可确保 GPU 已完成混凝土像素 。 沒有此同步, 您可以抓取一個 stale 缓冲器, 並產生空白或複製的框架 .

第3步: MP4 Muxing

VideoEncoder 輸出原始 H.264 區塊( NAL 單位) 。 這些檔案不是可播放的檔案, 而是需要用 MP4 容器包裝, 以儲存時間、 中繼資料與編碼設定 .

PinePaper 此步使用 mp4- muxer 文庫 [Vani, mp4- muxer] 。 muxer接收有時戳的編碼區塊,並產生有效的 MP4 檔案,其內容有:

• QQ0Q 框: 檔案類型宣告 (isom, iso2, mp41)
• QQ 盒: 電影中繼資料、 音軌描述、 時間表
• QQ 盒: 已編碼的影像資料

結果是一個符合標準的MP4.

第4步: 下載

完成的 MP4 以 QQ 組成, 透過 QQ 1Q 轉換成 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)上

期限	框架	編碼時間	文件大小
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 編碼	狀態
94 色度+	是	是	全力支持
邊緣 94+	是	是	全力支持(铬)
歌劇80+	是	是	全力支持(铬)
Safari 16.4+	部分	只解碼	編碼不可用
火狐	旗下	不	實驗

對沒有WebCodecs的瀏覽器, PinePaper 返回到 GIF 匯出, 它使用純 JavaScript 編碼器( gif.js) , 到處工作 .

參考

• 我可以用(2026年). WebCodecs API 瀏覽器支援表. caniuse.com/webcodecs. 中国植物物种信息数据库.
• McIlroy, D. (2021). W3C WICG. github.com/nicerobot/nierobot. github.io/blob/master/nierobot-explain-webcodecs.md.
• Richardson, I.E.G. (2010). 第2版。 威利.
• Vani, A. mp4- muxer — JavaScript MP4 muxer for WebCodecs. github.com/nicerobot/nierobot. github.io.
• W3C(2021). WebCodecs API 规格. w3c.github.io/webcodecs/.

---

匯出 MP4 影片為免費 —— 沒有伺服器, 沒有登記, 沒有水印 。 打開 [pinepaper. studio/editor] (/editor) 試試看.