A client-side DSP library utilizing the power of WebAssembly (.wasm)

Find the demo at http://tiny.cc/webdsp. This is the demo repo, to find the library itself please visit https://github.com/shamadee/web-dsp or on NPM https://www.npmjs.com/package/web-dsp. For a WebAssembly starter pack to build your own module check out https://www.npmjs.com/package/wasm-init

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 across 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.

Install

Drop the 'lib' folder into your project and load the JS library in a script tag

<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