webm-wasm
webm-wasm lets you create webm videos in JavaScript via WebAssembly. The library consumes raw RGBA buffers (like ImageData
from a <canvas>
, for example) and turns them into a webm video with the given framerate and quality. With realtime mode you can also use webm-wasm for streaming webm videos.
The wasm module was created by emscriptenâing libvpx, libwebm and libyuv.
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
const worker = new Worker("webm-worker.js");
worker.postMessage("./webm-wasm.wasm");
await nextMessage(worker);
worker.postMessage({
width: 512,
height: 512
});
while(hasNextFrame()) {
const buffer = getFrame();
worker.postMessage(buffer, [buffer]);
}
worker.postMessage(null);
const webm = await nextMessage(worker);
worker.terminate();
Constructor options
width
(default: 300
): Width of the video
height
(default: 150
): Height of the video
timebaseNum
(default: 1
): Numerator of the fraction for the length of a frame
timebaseDen
(default: 30
): Denominator of the fraction for the length of a frame
bitrate
(default: 200
): Bitrate in kbps
realtime
(default: false
): Prioritize encoding speed over compression ratio and quality. With realtime mode turned off the worker will send a single ArrayBuffer
containing the entire webm video file once input stream has ended. With realtime mode turned on the worker will send an ArrayBuffer
in regular intervals.
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:
class WebmEncoder {
public:
WebmEncoder(int timebase_num, int timebase_den, unsigned int width, unsigned int height, unsigned int bitrate, bool realtime, val cb);
bool addRGBAFrame(std::string rgba);
bool finalize();
std::string lastError();
}
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.
Building
Because the build process is completely Dockerized, Docker is required for building webm-wasm.
$ npm install
$ npm run build
Apache 2.0