// ワーカーで`webm-wasm.js`ファイルをロードする
const worker = new Worker("../dist/webm-worker.umd.js");
// `.wasm`ファイルのパスをワーカーに送る
worker.postMessage("../dist/webm-wasm.wasm");
// ワーカーの準備が出来るまで待つ
await nextEvent(worker, "message");

worker.postMessage({ timebaseDen: framerate, width, height, bitrate });

    const gradient = ctx.createLinearGradient(
      (1 / 4) * width,
      0,
      (3 / 4) * width,
      0
    );
    gradient.addColorStop(0, "#000");
    gradient.addColorStop(1, "#fff");
    const maxFrames = 2 * framerate;
    for (let i = 0; i < maxFrames; i++) {
      ctx.fillStyle = `hsl(${(i * 360) / maxFrames}, 100%, 50%)`;
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = gradient;
      ctx.fillRect((1 / 4) * width, (1 / 4) * height, width / 2, height / 2);
      const imageData = ctx.getImageData(0, 0, width, height);
      // 生の画像データをワーカーに送信
      worker.postMessage(imageData.data.buffer, [imageData.data.buffer]);
    }
    // 全ての画像データを送信したらnullを送信
    worker.postMessage(null);

const webm = (await nextEvent(worker, "message")).data;

    const blob = new Blob([webm], { type: "video/webm" });
    const url = URL.createObjectURL(blob);
    const video = document.createElement("video");
    video.src = url;
    document.body.append(video);
    video.play();