A client-side DSP library utilizing the power of WebAssembly (.wasm)
webDSP is a collection of highly performant algorithms, which are designed to be building blocks for web applications that aim to operate on media data. The methods are written in C++ and compiled to WASM using Emscripten.
Proper loading of the module accross different browsers is ensured by inserting a custom event listener into the WASM module (something that is currently lacking in WebAssembly).
All available methods have JavaScript
fallback functions, which are automatically exported with the module for environments that do not support WebAssembly.
Demo & Starter Kit
See a demo video editor built using the web-dsp library here: tiny.cc/webdsp. The repo for the demo library is here github.com/shamadee/we….
For a starter WebAssembly work environment to start building your own WebAssembly modules, please see our npm package www.npmjs.com/package/was…
Install
Clone this repo and drop the 'lib' folder into your project and load the JS library in a script tag. You can also get the module via npm install web-dsp, which comes with a built-in npm executable (get-dsp),
which will copy the lib folder into your project directory.
<script src = '/lib/webdsp.js' type = 'text/javascript'>Loading the WebAssembly Module
Use loadWASM() to fetch the WebAssembly module as a promise object. Use jsFallback() in the catch block to handle browsers that don't support .wasm
var webdsp = {};
loadWASM().then(module => {
webdsp = module;
// things to execute on page load only after module is loaded
});Note that since the WebAssembly module needs to be loaded with an http request (fetch) under the hood, for Google Chrome the files need to come from a server, as Chrome does not support local file access via http from the client
side. In Firefox, it is possible to load the module without a server.
After loading, a WebAssembly method can be called with plain JS:
pixels = context.getImageData(0,0,width,height);
button.addEventListener('click', () => {
webdsp.invert(pixels);
});Video and Image Filter Methods
These modular filters can execute on an array of RGBA pixel data:
webdsp.grayScale(pixelData)
webdsp.brighten(pixelData)
webdsp.invert(pixelData)
webdsp.noise(pixelData)
webdsp.sobelFilter(pixelData, width, height, invert=false)
webdsp.convFilter(pixelData, width, height, kernel, divisor, bias=0, count=1)
webdsp.multiFilter(pixelData, width, filterType, mag, multiplier, adjacentgit )
Filter templates:
webdsp.sunset(pixelData, width)
webdsp.analogTV(pixelData, width)
webdsp.emboss(pixelData, width)
webdsp.blur(pixelData, width, height)
webdsp.sharpen(pixelData, width, height))
webdsp.strongSharpen(pixelData, width, height)
webdsp.clarity(pixelData, width, height)
webdsp.goodMorning(pixelData, width, height)
webdsp.acid(pixelData, width, height)
webdsp.urple(pixelData, width)
webdsp.forest(pixelData, width)
webdsp.romance(pixelData, width)
webdsp.hippo(pixelData, width)
webdsp.longhorn(pixelData, width)
webdsp.underground(pixelData, width)
webdsp.rooster(pixelData, width)
webdsp.mist(pixelData, width)
webdsp.tingle(pixelData, width)
webdsp.bacteria(pixelData, width)
webdsp.dewdrops(pixelData, width, height)
webdsp.destruction(pixelData, width, height)
webdsp.hulk(pixelData, width)
webdsp.ghost(pixelData, width)
webdsp.twisted(pixelData, width)
webdsp.security(pixelData, width)
TODO:
The following filter fallback implementations need to be properly matched with their C++ counterparts:
underground, rooster, mist, kaleidoscope, bacteria, hulk edge, ghost, twisted
