webm-wasm
webm-wasm lets you create webm videos in JavaScript via WebAssembly. The library consumes raw RGBA32 buffers (4 bytes per pixel) and turns them into a webm video with the given framerate and quality. This makes it compatible out-of-the-box with ImageData
from a <canvas>
. With realtime mode you can also use webm-wasm for streaming webm videos.
Works in all major browsers (although Safari can’t play webm 🐼).
The wasm module was created by emscripten’ing libvpx, libwebm and libyuv.
$ npm install --save webm-wasm
Note: This is a proof-of-concept and not a production-grade library.
Usage
webm-wasm runs in a worker by default. It works on the web and in in Node, although you need Node 11+ with the --experimental-worker
flag.
Quickstart
// 1. Load the `webm-wasm.js` file in a workerconst worker = "webm-worker.js";// 2. Send the path to the `.wasm` fileworker;// 3. Wait for the worker to be readyawait ;// 4. Send the parameters for the constructorworker;// 5. Start sending frames!while // ArrayBuffer containing RGBA24 data const buffer = ; worker;// 6. Signal end-of-streamworker;// 7. Get the webm file as an ArrayBufferconst webm = await ;// 8. Cleanupworker;
(You can find an implementation of nextMessage()
in src/worker/webm-worker.js
)
Constructor options
width
(default:300
): Width of the videoheight
(default:150
): Height of the videotimebaseNum
(default:1
): Numerator of the fraction for the length of a frametimebaseDen
(default:30
): Denominator of the fraction for the length of a framebitrate
(default:200
): Bitrate in kbpsrealtime
(default:false
): Prioritize encoding speed over compression ratio and quality. With realtime mode turned off the worker will send a singleArrayBuffer
containing the entire webm video file once input stream has ended. With realtime mode turned on the worker will send anArrayBuffer
in regular intervals.
From a CDN
Worker code can’t be loaded from another origin directly, even when the source is CORS-enabled. It is, however, still possible to load webm-wasm from a CDN like unpkg.com with a little workaround:
const buffer = await ;const worker = URL;worker;// Continue as normal
WebAssembly
If you just want to use the WebAssembly module directly, you can grab webm-wasm.wasm
as well as the the Emscripten glue code webm-wasm.js
.
The WebAssembly module exposes a C++ class via embind:
Experimental: TransformStreams
Transferable Streams are behind the “Experimental Web Platform Features” flag in Chrome Canary. The alternative webm-transformstreamworker.js
makes use of them to expose the webm encoder. Take a look at the demos to see the usage.
Demos
To run the web demos, start the websever using
$ npm run serve
To run the node demos, run them directly (requires Node 11+):
$ node --experimental-worker ./node-simple.js
Building
Because the build process is completely Dockerized, Docker is required for building webm-wasm.
$ npm install
$ npx napa
$ npm run build
Apache 2.0