JavaScript
WebAssembly
WebM

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