ReactでアニメーションGIFをコマに分けて表示する方法

export type GifFrame = {
  url: string; // コマを PNG にした Blob の URL
  durationMs: number; // このコマを表示する時間
};

export type DecodedGif = {
  width: number;
  height: number;
  repetitionCount: number; // くり返す回数。ずっとくり返すなら Infinity
  frames: GifFrame[];
};

export async function decodeGifFrames(file: Blob, signal: AbortSignal): Promise<DecodedGif> {
  if (typeof ImageDecoder === 'undefined') throw new Error('このブラウザは ImageDecoder に対応していません');
  if (!(await ImageDecoder.isTypeSupported('image/gif'))) throw new Error('GIF を読めません');

  const decoder = new ImageDecoder({ data: file.stream(), type: 'image/gif' });
  const urls: string[] = [];
  try {
    // データを最後まで読み終えてから、コマの数を見る
    // （壊れたデータでは tracks.ready が先に失敗するので、両方を待つ）
    await Promise.all([decoder.tracks.ready, decoder.completed]).catch((e: unknown) => {
      throw new Error('GIF として読めませんでした', { cause: e });
    });
    const track = decoder.tracks.selectedTrack;
    if (!track) throw new Error('画像を読めませんでした');

    const frames: GifFrame[] = [];
    let canvas: OffscreenCanvas | null = null;
    for (let i = 0; i < track.frameCount; i++) {
      const { image } = await decoder.decode({ frameIndex: i });
      let durationMs: number;
      try {
        canvas ??= new OffscreenCanvas(image.displayWidth, image.displayHeight);
        const ctx = canvas.getContext('2d')!;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(image, 0, 0);
        durationMs = (image.duration ?? 0) / 1000; // duration はマイクロ秒
      } finally {
        image.close(); // VideoFrame はすぐに閉じる
      }
      const blob = await canvas.convertToBlob({ type: 'image/png' });
      signal.throwIfAborted();
      const url = URL.createObjectURL(blob);
      urls.push(url);
      frames.push({ url, durationMs });
    }
    return { width: canvas?.width ?? 0, height: canvas?.height ?? 0, repetitionCount: track.repetitionCount, frames };
  } catch (e) {
    urls.forEach((u) => URL.revokeObjectURL(u));
    throw e;
  } finally {
    decoder.close();
  }
}

count.gif tracks.length 1 animated true frameCount 6 repetitionCount Infinity complete true
  コマ1 complete true size 240x160 format BGRX timestamp 0 duration 100000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255
  コマ2 complete true size 240x160 format BGRX timestamp 100000 duration 100000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255
  コマ3 complete true size 240x160 format BGRX timestamp 200000 duration 200000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255
  コマ4 complete true size 240x160 format BGRX timestamp 400000 duration 200000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255
  コマ5 complete true size 240x160 format BGRX timestamp 600000 duration 400000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255
  コマ6 complete true size 240x160 format BGRX timestamp 1000000 duration 800000 左上(5,5) 0,200,232,255 四角(135,140) 216,88,120,255

slow: tracks.ready の直後 frameCount 2 complete false
slow: 途中で見えた frameCount 2 → 6 completed のあと 6 complete true

tracks.ready: InvalidStateError Failed to retrieve track metadata.
completed: AbortError Aborted by close.

count.gif (240, 160) コマ数 6 loop 0
  コマ 1 duration 100 入っている領域(左,上,右,下) (0, 0, 240, 160)
  コマ 2 duration 100 入っている領域(左,上,右,下) (20, 82, 197, 136)
  コマ 3 duration 200 入っている領域(左,上,右,下) (35, 82, 197, 137)

import { useEffect, useState, type ChangeEvent } from 'react';
import { decodeGifFrames, type DecodedGif } from './decodeGif';

export function GifFrames() {
  const [file, setFile] = useState<File | null>(null);
  const [gif, setGif] = useState<DecodedGif | null>(null);
  const [error, setError] = useState('');
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (!file) return;
    const controller = new AbortController();
    let result: DecodedGif | null = null;
    decodeGifFrames(file, controller.signal).then(
      (r) => {
        if (controller.signal.aborted) {
          r.frames.forEach((f) => URL.revokeObjectURL(f.url));
          return;
        }
        result = r;
        setGif(r);
      },
      (e: unknown) => {
        if (!controller.signal.aborted) setError(e instanceof Error ? e.message : String(e));
      },
    );
    return () => {
      controller.abort();
      result?.frames.forEach((f) => URL.revokeObjectURL(f.url));
    };
  }, [file]);

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFile(e.target.files?.[0] ?? null);
    setGif(null);
    setError('');
    setIndex(0);
  };

  const total = gif?.frames.reduce((sum, f) => sum + f.durationMs, 0) ?? 0;
  const frame = gif?.frames[index];

  return (
    <div className="gif-frames">
      <input type="file" accept="image/gif" onChange={onChange} />
      {error && <p role="alert">{error}</p>}
      {file && !gif && !error && <p>読み込み中…</p>}
      {gif && frame && (
        <>
          <p className="summary">
            {gif.width}×{gif.height}・{gif.frames.length}コマ・1周 {total}ms・
            {gif.repetitionCount === Infinity
              ? 'ずっとくり返す'
              : gif.repetitionCount === 0
                ? 'くり返さない'
                : `${gif.repetitionCount}回くり返す`}
          </p>
          <img className="current" src={frame.url} alt={`${index + 1}コマ目`} />
          <div className="controls">
            <button onClick={() => setIndex((i) => i - 1)} disabled={index === 0}>
              前のコマ
            </button>
            <output>
              {index + 1} / {gif.frames.length} コマ目（{frame.durationMs}ms）
            </output>
            <button onClick={() => setIndex((i) => i + 1)} disabled={index === gif.frames.length - 1}>
              次のコマ
            </button>
          </div>
          <ol className="strip">
            {gif.frames.map((f, i) => (
              <li key={f.url}>
                <button onClick={() => setIndex(i)} aria-current={i === index}>
                  <img src={f.url} alt={`${i + 1}コマ目`} />
                  <span>{f.durationMs}ms</span>
                </button>
              </li>
            ))}
          </ol>
        </>
      )}
    </div>
  );
}

once.gif animated true frameCount 3 repetitionCount 0 コマ1 duration 300000
still.gif animated true frameCount 1 repetitionCount Infinity コマ1 duration 0

frameIndex 99: RangeError The frame index provided (99) is outside the range [0, 6).