ブラウザネイティブ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]に委任します.

長い長さを選ぶ. 棒は1つのスケールを共有します、従って内部に置かれるエンコーダー棒 クリップバー is クレーム — 3つの作品の切り替えは、成長する作品を示しています フレームに比例して、単一の列が表示できない部分です.

ブラウザのサポート

ブラウザ	ウェブコーデック	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). ウィリー.
• バニ, 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を開き、それを試してください.