Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

生の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();
relu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした