ブラウザネイティブMP4エクスポート - サーバーは必要ありません

問題点

従来のWebベースのアニメーションツールは、フレームをサーバーに送信し、ffmpegでエンコーディングし、結果を返すことによってビデオをエクスポートします。 これには3つの費用があります: アップロード帯域幅(フレームデータの送信メガバイト)、サーバーのコンピュート(エンコーディングのためのCPU / GPU時間)、プライバシー(あなたの創造的な作業は、サードパーティのインフラストラクチャを転送します).

PinePaperはこれのどれもしません。 MP4ファイルはすべてブラウザで作成されます。 フレームはデバイスを離れません。 マシンのハードウェアビデオエンコーダでエンコードが行われます。 この記事ではどのように説明しています.

WebCodecs:ブラウザでハードウェアビデオエンコーディング

WebCodecs API [W3C、2021]は、ブラウザの内蔵ビデオエンコーダとデコーダへのアクセスを低レベルに提供します。 クロム94(2021年9月)に出荷され、Chrome、Edge、Operaで利用可能になりました。 SafariとFirefoxは、部分的または実験的なサポートを持っています [私は使用することができます, 2026].

WebCodecsは、2つのキーインターフェイスを公開します

• VideoEncoder — 生のビデオフレーム、出力エンコードされたH.264 (またはVP8/VP9/AV1)ビットストリームチャンク
• VideoDecoder — 符号化されたチャンクを取り、生のフレームを出力します(再生のために使用されて、輸出しません)

MP4の輸出のために、私達はVideoEncoderを使用します。 ワークフロー:

1. 目的の解像度とビットレートでH.264用に構成されたVideoEncoderを作成する
2. 各アニメーションフレーム:キャンバスをVideoFrameとしてキャプチャし、それをフィード エンコーダへ
3. 符号化されたチャンクを集めて下さい(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プロファイルです。すべての携帯電話、ブラウザ、ソーシャルメディアプラットフォームで再生します。 より高いプロファイル(メイン、ハイ)は、より良い圧縮が少ない互換性を提供します[リチャードソン、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が合成ピクセルを終了していることを確認します。 この同期がなければ、ストールバッファをキャプチャし、空白または重複しているフレームを生成します.

ステップ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)で、1080×1080アニメーションを30 FPSでエンコード:

期間	フレーム	エンコーダタイム	ファイル サイズ
3秒	90	〜2秒	~1.8 MB
10秒	300	〜6秒	〜5メガバイト
30秒	900	～18秒	〜14メガバイト

ハードウェアH.264エンコーダ(Intel Quick Sync、Apple VideoToolbox、NVIDIA NVENC)が重い計算を処理するため、エンコードはリアルタイムよりも高速です。 ブラウザのWebCodecs APIは、これらのハードウェアアクセラレータを透明に[McIlroy、2021]に委任します.

ブラウザのサポート

ブラウザ	ウェブコーデック	H.264エンコード	ステータス
クロム 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.
• リチャードソン、I.E.G. (2010). H.264アドバンストビデオ圧縮標準(2nd ed)。 ウィリー.
• Vani、A. mp4-muxer — WebCodecs用のJavaScript MP4 muxer。 github.com/nicerobot/nicerobot.github.io.
• W3C (2021)。 WebCodecs APIの指定。 w3c.github.io/webcodecs/.

---

無料でMP4ビデオをエクスポート — サーバー、サインアップ、透かしはありません。 pinepaper.studio/editorを開き、それを試してください.