WebAssemblyでカメラをリアルタイムにWebM動画に変換する

生のRGBAバッファをWebMに変換してくれるwebm-wasmを使いました。

デモ

Goボタンをクリック時に、カメラをリアルタイムにWebM動画に変換して、そのWebM動画をvideo要素で表示しています。
chrome://flags/から Experimental Web Platform features を有効にしないと動きません。Chrome Canaryを使ってください。
デモ
ソースコード

1. ワーカーの準備をする

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

2. フレームレートや画質などの情報を送る

    worker.postMessage({
      timebaseDen: framerate,
      width: value.width,
      height: value.height,
      bitrate,
      // リアルタイムの場合はtrue
      realtime: true
    });

3. ストリームからRGBAバッファをWebMチャンクに変換する関数を定義する

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

4. ストリームに3.を設定

    const webmStream = stream
      .pipeThrough(map(imageData => imageData.data.buffer))
      .pipeThrough(webmTransform);

5. 動画を表示

    const webmMediaStream = mediaSourceStream(webmStream, {
      mimeType: `video/webm; codecs="vp8"`
    });
    const video = document.createElement("video");
    video.src = webmMediaStream;
    document.body.append(video);
    video.play();