Reactで、アップロード前に動画のサムネイル画像を作る方法

export type Thumbnail = { time: number; blob: Blob; width: number; height: number };

// video で type のイベントが起きるまで待つ。読み込めない動画なら error で失敗にする
function waitFor(video: HTMLVideoElement, type: 'loadedmetadata' | 'seeked') {
  return new Promise<void>((resolve, reject) => {
    const done = () => { cleanup(); resolve(); };
    const fail = () => { cleanup(); reject(new Error(`動画を読み込めません（${video.error?.message || 'error'}）`)); };
    const cleanup = () => {
      video.removeEventListener(type, done);
      video.removeEventListener('error', fail);
    };
    video.addEventListener(type, done);
    video.addEventListener('error', fail);
  });
}

function toBlob(canvas: HTMLCanvasElement) {
  return new Promise<Blob>((resolve, reject) => {
    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('画像にできませんでした'))), 'image/jpeg', 0.8);
  });
}

// 動画ファイルの、長さに対する割合（0〜1）の位置の場面を、横幅 maxWidth 以下の JPEG にする
export async function createThumbnails(file: File, ratios: number[], maxWidth = 320): Promise<Thumbnail[]> {
  const src = URL.createObjectURL(file);
  const video = document.createElement('video');
  video.muted = true;
  video.preload = 'auto';
  try {
    const loaded = waitFor(video, 'loadedmetadata');
    video.src = src;
    await loaded;
    if (!video.videoWidth) throw new Error('映像が入っていないか、このブラウザでは映像を表示できません');

    const scale = Math.min(1, maxWidth / video.videoWidth);
    const canvas = document.createElement('canvas');
    canvas.width = Math.round(video.videoWidth * scale);
    canvas.height = Math.round(video.videoHeight * scale);
    const ctx = canvas.getContext('2d')!;

    const thumbs: Thumbnail[] = [];
    // 1つの video で順に移動するので、1枚ずつ待つ（同時に currentTime を変えない）
    for (const ratio of ratios) {
      const time = video.duration * ratio;
      const seeked = waitFor(video, 'seeked');
      video.currentTime = time;
      await seeked; // 移動が終わってから描く
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      thumbs.push({ time, blob: await toBlob(canvas), width: canvas.width, height: canvas.height });
    }
    return thumbs;
  } finally {
    video.removeAttribute('src');
    video.load();
    URL.revokeObjectURL(src);
  }
}

import { useEffect, useRef, useState } from 'react';
import type { ChangeEvent, FormEvent } from 'react';
import { createThumbnails } from './videoThumbnail';
import type { Thumbnail } from './videoThumbnail';

const RATIOS = [0.1, 0.5, 0.9]; // 動画の 10%・50%・90% の位置

export function VideoThumbnailPicker() {
  const [file, setFile] = useState<File | null>(null);
  const [thumbs, setThumbs] = useState<(Thumbnail & { url: string })[]>([]);
  const [selected, setSelected] = useState(0);
  const [status, setStatus] = useState('');
  const latestFile = useRef<File | null>(null);

  // URL はファイルを選んだときに作り、片付け（cleanup）で解放する
  useEffect(() => () => thumbs.forEach((t) => URL.revokeObjectURL(t.url)), [thumbs]);

  async function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const f = e.target.files?.[0] ?? null;
    latestFile.current = f;
    setFile(f);
    setThumbs([]);
    setSelected(0);
    if (!f) return setStatus('');
    setStatus('サムネイルを作っています…');
    try {
      const result = await createThumbnails(f, RATIOS);
      if (latestFile.current !== f) return; // 途中で別のファイルが選ばれた
      setThumbs(result.map((t) => ({ ...t, url: URL.createObjectURL(t.blob) })));
      setStatus('');
    } catch (err) {
      if (latestFile.current !== f) return;
      setStatus(err instanceof Error ? err.message : String(err));
    }
  }

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const thumb = thumbs[selected];
    if (!file || !thumb) return;
    const body = new FormData();
    body.append('video', file);
    body.append('thumbnail', thumb.blob, 'thumbnail.jpg');
    setStatus('送信しています…');
    const res = await fetch('/upload', { method: 'POST', body });
    setStatus(res.ok ? `送信しました：${await res.text()}` : `送信に失敗しました（${res.status}）`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        動画を選ぶ <input type="file" accept="video/*" onChange={handleChange} />
      </label>
      {thumbs.length > 0 && (
        <div className="thumbs" role="group" aria-label="サムネイルの候補">
          {thumbs.map((t, i) => (
            <button
              key={t.time}
              type="button"
              aria-pressed={i === selected}
              onClick={() => setSelected(i)}
            >
              <img src={t.url} width={t.width} height={t.height} alt={`${t.time.toFixed(1)}秒の場面`} />
              <span>{t.time.toFixed(1)}秒</span>
            </button>
          ))}
        </div>
      )}
      <p role="status">{status}</p>
      <button type="submit" disabled={!thumbs.length}>この画像で送信</button>
    </form>
  );
}

送信しました：video=sample.mp4（video/mp4、218587バイト） / thumbnail=thumbnail.jpg（image/jpeg、4310バイト）

動画を読み込めません（PipelineStatus::DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams）