
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
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.
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.
// 1. Load the `webm-wasm.js` file in a worker
const worker = new Worker("webm-worker.js");
// 2. Send the path to the `.wasm` file
worker.postMessage("./webm-wasm.wasm");
// 3. Wait for the worker to be ready
await nextMessage(worker);
// 4. Send the parameters for the constructor
worker.postMessage({
width: 512,
height: 512
// ... more constructor options below
});
// 5. Start sending frames!
while (hasNextFrame()) {
// ArrayBuffer containing RGBA24 data
const buffer = getFrame();
worker.postMessage(buffer, [buffer]);
}
// 6. Signal end-of-stream
worker.postMessage(null);
// 7. Get the webm file as an ArrayBuffer
const webm = await nextMessage(worker);
// 8. Cleanup
worker.terminate();
(You can find an implementation of nextMessage()
in src/worker/webm-worker.js
)
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 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.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 fetch(
"https://unpkg.com/webm-wasm@<version>/dist/webm-worker.js"
).then(r => r.arrayBuffer());
const worker = new Worker(
URL.createObjectURL(new Blob([buffer], { type: "text/javascript" }))
);
worker.postMessage("https://unpkg.com/webm-wasm@<version>/dist/webm-wasm.wasm");
// Continue as normal
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:
// Same options as above. `cb` is a callback function that takes an ArrayBuffer.
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();
// ...
}
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.
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
Because the build process is completely Dockerized, Docker is required for building webm-wasm.
$ npm install
$ npx napa
$ npm run build
Apache 2.0
FAQs
webm-wasm lets you create webm videos in JavaScript via WebAssembly.
The npm package webm-wasm receives a total of 657 weekly downloads. As such, webm-wasm popularity was classified as not popular.
We found that webm-wasm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fixâa new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.