ffmpeg.wasmでブラウザだけで動画変換する

npm install @ffmpeg/ffmpeg @ffmpeg/util

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";

const ffmpeg = new FFmpeg();

async function convertVideo(inputFile: File): Promise<Blob> {
  // WASMファイルをロード（初回のみ）
  if (!ffmpeg.loaded) {
    const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd";
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
      wasmURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.wasm`,
        "application/wasm"
      ),
    });
  }

  // 入力ファイルをffmpeg.wasmの仮想ファイルシステムに書き込む
  await ffmpeg.writeFile("input.mp4", await fetchFile(inputFile));

  // FFmpegコマンドを実行（MP4 → WebM変換の例）
  await ffmpeg.exec(["-i", "input.mp4", "-c:v", "libvpx-vp9", "output.webm"]);

  // 出力ファイルを読み取る
  const data = await ffmpeg.readFile("output.webm");

  // Uint8Array → Blob に変換して返す
  return new Blob([data], { type: "video/webm" });
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        // ffmpeg.wasmを使うページのみに適用する場合はパスを絞る
        // 全ページに適用するなら "/(.*)" のまま
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

await ffmpeg.exec([
  "-i",
  "input.mp4",
  "-c:v",
  "libvpx-vp9",
  "-crf",
  "33", // 品質設定（低いほど高品質、高いほど小さいファイル）
  "-b:v",
  "0", // VBRモード（-crfと組み合わせて使う）
  "-c:a",
  "libopus",
  "output.webm",
]);

await ffmpeg.exec([
  "-i",
  "input.mp4",
  "-t",
  "5", // 5秒まで
  "-vf",
  "fps=15,scale=480:-1:flags=lanczos", // フレームレートとサイズ調整
  "-loop",
  "0",
  "output.gif",
]);

await ffmpeg.exec([
  "-i",
  "input.mp4",
  "-vn", // 映像を除外
  "-c:a",
  "libmp3lame",
  "-q:a",
  "2", // 品質設定（0-9、低いほど高品質）
  "output.mp3",
]);

ffmpeg.on("progress", ({ progress, time }) => {
  // progress: 0.0 〜 1.0
  // time: 現在処理中の動画の時間位置（マイクロ秒）
  console.log(`進捗: ${Math.round(progress * 100)}%`);
});

"use client";

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";
import { useRef, useState } from "react";

const CORE_BASE_URL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd";

export function VideoConverter() {
  const ffmpegRef = useRef<FFmpeg>(new FFmpeg());
  const [loaded, setLoaded] = useState(false);
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState<number | null>(null);
  const [outputUrl, setOutputUrl] = useState<string | null>(null);

  async function loadFFmpeg() {
    if (loaded) return;
    setLoading(true);
    const ffmpeg = ffmpegRef.current;

    await ffmpeg.load({
      coreURL: await toBlobURL(
        `${CORE_BASE_URL}/ffmpeg-core.js`,
        "text/javascript"
      ),
      wasmURL: await toBlobURL(
        `${CORE_BASE_URL}/ffmpeg-core.wasm`,
        "application/wasm"
      ),
    });

    ffmpeg.on("progress", ({ progress }) => {
      setProgress(Math.round(progress * 100));
    });

    setLoaded(true);
    setLoading(false);
  }

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    await loadFFmpeg();

    const ffmpeg = ffmpegRef.current;
    setProgress(0);
    setOutputUrl(null);

    // 入力ファイルを書き込む
    await ffmpeg.writeFile("input.mp4", await fetchFile(file));

    // 変換実行
    await ffmpeg.exec(["-i", "input.mp4", "-c:v", "libvpx-vp9", "-crf", "33", "-b:v", "0", "output.webm"]);

    // 出力を読み取ってBlobURLを生成
    const data = await ffmpeg.readFile("output.webm");
    const blob = new Blob([data as Uint8Array], { type: "video/webm" });
    const url = URL.createObjectURL(blob);
    setOutputUrl(url);
    setProgress(null);
  }

  return (
    <div className="space-y-4 p-6 border rounded-lg">
      <h2 className="text-xl font-bold">動画変換（MP4 → WebM）</h2>

      <input
        type="file"
        accept="video/mp4"
        onChange={handleFileChange}
        disabled={loading || progress !== null}
        className="block"
      />

      {loading && <p className="text-sm text-muted-foreground">FFmpegを読み込み中...</p>}

      {progress !== null && (
        <div>
          <div className="h-2 bg-muted rounded-full overflow-hidden">
            <div
              className="h-full bg-primary transition-all"
              style={{ width: `${progress}%` }}
            />
          </div>
          <p className="text-sm mt-1">{progress}%</p>
        </div>
      )}

      {outputUrl && (
        <div className="space-y-2">
          <video src={outputUrl} controls className="w-full max-w-lg" />
          <a
            href={outputUrl}
            download="output.webm"
            className="inline-block px-4 py-2 bg-primary text-primary-foreground rounded"
          >
            ダウンロード
          </a>
        </div>
      )}
    </div>
  );
}