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

WebAssemblyでCanvasをWebM動画に変換する

More than 1 year has passed since last update.

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

デモ

Goボタンをクリック時に、Canvasを動的に作成して、WebAssemblyでWebMに変換して、WebM動画をvideoタグで表示しています。
デモ
ソースコード

See the Pen Simple webm wasm demo by John Doe (@04) on CodePen.


1. ワーカーの準備をする

// ワーカーで`webm-wasm.js`ファイルをロードする
const worker = new Worker("../dist/webm-worker.umd.js");
// `.wasm`ファイルのパスをワーカーに送る
worker.postMessage("../dist/webm-wasm.wasm");
// ワーカーの準備が出来るまで待つ
await nextEvent(worker, "message");

2. フレームレートや画質などの情報を送る

worker.postMessage({ timebaseDen: framerate, width, height, bitrate });

3. Canvasを描画し、フレームデータをワーカーに送信

    const gradient = ctx.createLinearGradient(
      (1 / 4) * width,
      0,
      (3 / 4) * width,
      0
    );
    gradient.addColorStop(0, "#000");
    gradient.addColorStop(1, "#fff");
    const maxFrames = 2 * framerate;
    for (let i = 0; i < maxFrames; i++) {
      ctx.fillStyle = `hsl(${(i * 360) / maxFrames}, 100%, 50%)`;
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = gradient;
      ctx.fillRect((1 / 4) * width, (1 / 4) * height, width / 2, height / 2);
      const imageData = ctx.getImageData(0, 0, width, height);
      // 生の画像データをワーカーに送信
      worker.postMessage(imageData.data.buffer, [imageData.data.buffer]);
    }
    // 全ての画像データを送信したらnullを送信
    worker.postMessage(null);

4. WebMに変換されるまで待機

const webm = (await nextEvent(worker, "message")).data;

5. 作成したWebM動画を再生

    const blob = new Blob([webm], { type: "video/webm" });
    const url = URL.createObjectURL(blob);
    const video = document.createElement("video");
    video.src = url;
    document.body.append(video);
    video.play();

5.1 またはWebM動画をダウンロード

a要素のdownload属性でダウンロード

JavaScriptでファイルダウンロード処理を実現する
https://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813

GUIからダウンロード
スクリーンショット 2019-01-01 23.08.18.png

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