{"id":13435633,"url":"https://github.com/shamadee/web-dsp","last_synced_at":"2025-04-08T12:05:31.925Z","repository":{"id":143927862,"uuid":"84898164","full_name":"shamadee/web-dsp","owner":"shamadee","description":"A client-side signal processing library utilizing the power of WebAssembly (.wasm)","archived":false,"fork":false,"pushed_at":"2017-06-05T05:36:36.000Z","size":914,"stargazers_count":1481,"open_issues_count":7,"forks_count":114,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-04-01T10:08:46.987Z","etag":null,"topics":["dsp","wasm","webassembly"],"latest_commit_sha":null,"homepage":"http://tiny.cc/webdsp","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shamadee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-03-14T02:49:37.000Z","updated_at":"2025-03-30T03:14:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"b383827b-aa16-4e44-b93a-ccd35597af25","html_url":"https://github.com/shamadee/web-dsp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamadee%2Fweb-dsp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamadee%2Fweb-dsp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamadee%2Fweb-dsp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamadee%2Fweb-dsp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shamadee","download_url":"https://codeload.github.com/shamadee/web-dsp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838441,"owners_count":21004580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dsp","wasm","webassembly"],"created_at":"2024-07-31T03:00:37.629Z","updated_at":"2025-04-08T12:05:31.882Z","avatar_url":"https://github.com/shamadee.png","language":"C++","funding_links":[],"categories":["C++","Examples","Intro \u0026 Learning"],"sub_categories":["Kits","CMAF \u0026 fMP4 Packaging"],"readme":"![webDSP Logo](/images/webdsplogo.png)\n\u003cbr\u003e\n## A client-side DSP library utilizing the power of WebAssembly (.wasm)\n\nWebDSP 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, and exposed as simple vanilla Javascript functions developers can run on the client side. \u003cbr\u003e\n\u003cbr\u003e\nWebAssembly is very young, and this is the first .wasm based library designed to be dropped in to existing production level JS code bases.  With that in mind, there was an explicit goal to optimize and simplify how JS developers can load and use .wasm functionality.  Just as important, was our goal to lay the groundwork for future open source WebAssembly module developers. \n\n### Demo \u0026 Starter Kit\n\nCheck out the [demo video editor](http://tiny.cc/webdsp) and [corresponding repo](https://github.com/shamadee/web-dsp-demo).\u003cbr\u003e\n\nTo quickly start working with WebAssembly and to build your own modules, please see our started WebAssembly work environment you can npm install and launch [wasm-init](https://www.npmjs.com/package/wasm-init).\n\n### Install\n\nClone this repo and drop only the 'lib' folder into your project. Simply load our library file 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.\n```html\n\u003cscript src = '/lib/webdsp.js' type = 'text/javascript'\u003e\n```\n\n### Loading the WebAssembly Module\nUse loadWASM() to fetch the WebAssembly module as a promise object.\nUse jsFallback() in the catch block to handle browsers that don't support .wasm\n```javascript\nvar webdsp = {};\nloadWASM().then(module =\u003e {\n  webdsp = module;\n  // things to execute on page load only after module is loaded\n});\n```\nNote WebAssembly modules need to be loaded with an HTTP request (fetch). Chrome does not support local file access via HTTP, so the files must be loaded using a server. In Firefox, it is possible to load the module without a server as a plain HTML file. \n\u003cbr\u003e\nAfter loading, a WebAssembly method can be called with plain JS:\n```javascript\n//get image data from canvas\npixels = context.getImageData(0,0,width,height);\nbutton.addEventListener('click', () =\u003e {\n  pixels.data.set(webdsp.invert(pixels.data));\n});\n```\n\n### Video and Image Filter Methods\nThese modular filters can execute on an array of RGBA pixel data: \u003cbr\u003e\n\u003cbr\u003e\n`webdsp.grayScale(pixelData)` \u003cbr\u003e\n`webdsp.brighten(pixelData)` \u003cbr\u003e\n`webdsp.invert(pixelData)` \u003cbr\u003e\n`webdsp.noise(pixelData)` \u003cbr\u003e\n`webdsp.sobelFilter(pixelData, width, height, invert=false)` \u003cbr\u003e\n`webdsp.convFilter(pixelData, width, height, kernel, divisor, bias=0, count=1)` \u003cbr\u003e\n`webdsp.multiFilter(pixelData, width, filterType, mag, multiplier, adjacent)` \u003cbr\u003e\n\nFilter templates: \u003cbr\u003e\n\n`webdsp.sunset(pixelData, width)` \u003cbr\u003e\n`webdsp.analogTV(pixelData, width)` \u003cbr\u003e\n`webdsp.emboss(pixelData, width)` \u003cbr\u003e\n`webdsp.blur(pixelData, width, height)` \u003cbr\u003e\n`webdsp.sharpen(pixelData, width, height))` \u003cbr\u003e\n`webdsp.strongSharpen(pixelData, width, height)` \u003cbr\u003e\n`webdsp.clarity(pixelData, width, height)` \u003cbr\u003e\n`webdsp.goodMorning(pixelData, width, height)` \u003cbr\u003e\n`webdsp.acid(pixelData, width, height)` \u003cbr\u003e\n`webdsp.urple(pixelData, width)` \u003cbr\u003e\n`webdsp.forest(pixelData, width)` \u003cbr\u003e\n`webdsp.romance(pixelData, width)` \u003cbr\u003e\n`webdsp.hippo(pixelData, width)` \u003cbr\u003e\n`webdsp.longhorn(pixelData, width)` \u003cbr\u003e\n`webdsp.underground(pixelData, width)` \u003cbr\u003e\n`webdsp.rooster(pixelData, width)` \u003cbr\u003e\n`webdsp.mist(pixelData, width)` \u003cbr\u003e\n`webdsp.tingle(pixelData, width)` \u003cbr\u003e\n`webdsp.bacteria(pixelData, width)` \u003cbr\u003e\n`webdsp.dewdrops(pixelData, width, height)` \u003cbr\u003e\n`webdsp.destruction(pixelData, width, height)` \u003cbr\u003e\n`webdsp.hulk(pixelData, width)` \u003cbr\u003e\n`webdsp.ghost(pixelData, width)` \u003cbr\u003e\n`webdsp.twisted(pixelData, width)` \u003cbr\u003e\n`webdsp.security(pixelData, width)` \u003cbr\u003e\n\nFor production level environments, it's important to note that all available methods have JavaScript fallback functions that are automatically exported with the module so older browsers can still run your code. However, note that the more intensive convolution and edge detection filters will run very slowly or hang the browser completely without WebAssembly support. \n\n### TODO:\n\nThe following filter fallback implementations need to be properly matched with their C++ counterparts: underground, rooster, mist, kaleidoscope, bacteria, hulk edge, ghost, twisted. \u003cbr\u003e\nCache .wasm module on client\n\n### Collaborators: [Deep Pulusani](https://github.com/sdeep27), [Shahrod Khalkhali](https://github.com/shahrodkh), [Matthias Wagner](https://github.com/matzewagner) \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamadee%2Fweb-dsp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshamadee%2Fweb-dsp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamadee%2Fweb-dsp/lists"}