WebCodecs + Web Workers + OPFS：ブラウザで動画処理をする実戦パス

メインスレッド：
  - ファイル入力
  - Worker を立てる
  - UI 更新（進捗、結果）

Worker：
  - OPFS パスからファイルを取得（postMessage 経由じゃない——遅すぎる）
  - WebCodecs VideoDecoder でデコード
  - Canvas レンダリング + toBlob で JPEG 化
  - JPEG を OPFS に書き込む
  - 進捗をメインスレッドに報告

function checkSupport() {
  const issues = []

  if (!('VideoDecoder' in window)) {
    issues.push('WebCodecs VideoDecoder が未サポート。Chrome 94+ または同等のブラウザが必要。')
  }

  if (!window.showOpenFilePicker && !window.FileSystemHandle) {
    issues.push('File System Access API が未サポート。')
  }

  if (!navigator.storage.getDirectory) {
    issues.push('OPFS が未サポート。Chrome 102+ または同等のブラウザが必要。')
  }

  // Worker 自体はほぼ標準だが、Worker 内で同期 OPFS が使えるかをチェック
  // （古い Chrome は Worker をサポートしていても同期 OPFS がない）

  return issues
}

const issues = checkSupport()
if (issues.length > 0) {
  console.warn('機能ギャップ：', issues)
  // FFmpeg WASM にフォールバック
}

async function stageFileToOpfs(file) {
  const root = await navigator.storage.getDirectory()
  const dir = await root.getDirectoryHandle('input', { create: true })
  const fileHandle = await dir.getFileHandle(file.name, { create: true })
  const writable = await fileHandle.createWritable()
  await file.stream().pipeTo(writable)

  return `${file.name}`  // OPFS ルート下の 'input' フォルダ内のパス
}

// worker.js
let decoder = null
let canvas = null
let ctx = null

self.onmessage = async (e) => {
  const { type, data } = e.data

  if (type === 'init') {
    await init(data)
  } else if (type === 'extract') {
    await extractFrames(data)
  }
}

async function init({ codec, canvasWidth, canvasHeight }) {
  // Canvas を用意（Worker 内では OffscreenCanvas）
  canvas = new OffscreenCanvas(canvasWidth, canvasHeight)
  ctx = canvas.getContext('2d')

  // WebCodecs デコーダ
  decoder = new VideoDecoder({
    output: (frame) => handleFrame(frame),
    error: (e) => console.error('デコーダエラー：', e)
  })

  decoder.configure({
    codec,  // 例：'avc1.640028'
    optimizeForLatency: false
  })

  self.postMessage({ type: 'ready' })
}

let frameCount = 0
let lastExtractedSecond = -1

async function handleFrame(frame) {
  const timestampSeconds = frame.timestamp / 1_000_000  // WebCodecs はマイクロ秒

  // 毎秒 1 フレームだけ抽出
  const currentSecond = Math.floor(timestampSeconds)
  if (currentSecond !== lastExtractedSecond) {
    lastExtractedSecond = currentSecond

    ctx.drawImage(frame, 0, 0, canvas.width, canvas.height)
    const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.85 })
    const buffer = await blob.arrayBuffer()

    // OPFS に書き込む
    const root = await navigator.storage.getDirectory()
    const outputDir = await root.getDirectoryHandle('thumbnails', { create: true })
    const fileHandle = await outputDir.getFileHandle(`thumb_${String(currentSecond).padStart(6, '0')}.jpg`, { create: true })
    const syncHandle = await fileHandle.createSyncAccessHandle()
    syncHandle.write(new Uint8Array(buffer))
    syncHandle.close()

    frameCount++
    self.postMessage({ type: 'progress', frameCount, second: currentSecond })
  }

  frame.close()  // 重要：VideoFrame は必ず閉じる。さもないと GPU メモリがリークする
}

async function extractFrames({ chunks }) {
  for (const chunk of chunks) {
    decoder.decode(new EncodedVideoChunk({
      type: chunk.keyframe ? 'key' : 'delta',
      timestamp: chunk.timestamp,
      data: chunk.data
    }))
  }
  await decoder.flush()
  self.postMessage({ type: 'done', frameCount })
}

import mp4box from 'mp4box'

async function getCodecChunks(file) {
  const arrayBuffer = await file.arrayBuffer()
  arrayBuffer.fileStart = 0  // mp4box.js の慣習

  const mp4boxFile = mp4box.createFile()
  mp4boxFile.onReady = (info) => {
    mp4boxFile.setExtractionOptions(info.videoTracks[0].id, null, {
      nbSamples: 100  // バッチサイズ
    })
    mp4boxFile.start()
  }

  const chunks = []
  mp4boxFile.onSamples = (trackId, ref, samples) => {
    for (const sample of samples) {
      chunks.push({
        keyframe: sample.is_sync,
        timestamp: sample.cts * 1_000_000 / sample.timescale,
        data: sample.data
      })
    }
  }

  mp4boxFile.appendBuffer(arrayBuffer)
  mp4boxFile.flush()

  return {
    codec: mp4boxFile.getInfo().videoTracks[0].codec,
    chunks
  }
}

class WorkerPool {
  constructor(workerUrl, size = navigator.hardwareConcurrency || 4) {
    this.workers = Array.from({ length: size }, () => new Worker(workerUrl))
    this.queue = []
    this.busy = new Set()
  }

  async run(task) {
    const worker = await this.getIdle()
    this.busy.add(worker)

    return new Promise((resolve, reject) => {
      worker.onmessage = (e) => {
        this.busy.delete(worker)
        if (e.data.type === 'done') resolve(e.data.result)
        else if (e.data.type === 'error') reject(e.data.error)
      }
      worker.postMessage(task)
    })
  }

  async getIdle() {
    if (this.busy.size < this.workers.length) {
      return this.workers.find(w => !this.busy.has(w))
    }
    // Worker が空くまで待つ
    return new Promise(resolve => {
      this.queue.push(resolve)
    })
  }
}

try {
  // ... frame を使って処理 ...
} finally {
  frame.close()
}