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

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();