19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WebAssemblyAdvent Calendar 2018

Day 10

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

Last updated at Posted at 2019-01-01

生の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();
19
12
0

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
  3. You can use dark theme
What you can do with signing up
19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?