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

問題

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

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

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

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

WebCodecs 揭發兩個關鍵介面:

• VideoEncoder - 取原始影像框架, 輸出編碼為 H.264( 或 VP8/ VP9/ AV1) 位流區塊
• VideoDecoder - 取編碼區塊, 輸出原始框架( 用于重播, 不匯出)

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].

比特率控制了質量對檔案大小 . 5Mbps拍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
}

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

第3步: MP4 Muxing

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)上

期限	框架	編碼時間	文件大小
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. 中国植物物种信息数据库.
• (原始内容存档于2018-09-21). McIlroy, D. (2021). WebCodes 解釋器 . W3C WICG. github.com/nicerobot/nierobot.github.io/blob/master/nierobot-解釋器-webcodecs.md.
• 理查森,I. E. G. (2010). 第2版. 威利.
• 瓦尼, A. mp4- muxer - 用于 WebCodecs 的 JavaScript MP4 muxer . github.com/ninerobot/ninerobot.github.io. th.
• W3C (2021). WebCodecs API 规格 . w3c.github.io/webcodecs/.

---

免費匯出 MP4 影片.. 沒有伺服器 沒有簽名 沒有水印. 打開 [pinepaper. studio/editor] (/editor) 試試看 .