search
LoginSignup
12

More than 3 years have passed since last update.

posted at

updated at

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

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

デモ

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12