{"id":13558353,"url":"https://github.com/mtharrison/wasmbooth","last_synced_at":"2025-04-23T13:41:41.485Z","repository":{"id":70324230,"uuid":"131169063","full_name":"mtharrison/wasmbooth","owner":"mtharrison","description":"Wasm video filter booth app written in Rust","archived":false,"fork":false,"pushed_at":"2019-12-31T18:17:12.000Z","size":196,"stargazers_count":84,"open_issues_count":0,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T13:41:34.830Z","etag":null,"topics":["image-processing","javascript","rust","webassembly"],"latest_commit_sha":null,"homepage":"https://mtharrison.github.io/wasmbooth/","language":"Rust","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/mtharrison.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}},"created_at":"2018-04-26T14:38:06.000Z","updated_at":"2024-12-28T17:05:30.000Z","dependencies_parsed_at":"2023-03-03T11:00:29.821Z","dependency_job_id":null,"html_url":"https://github.com/mtharrison/wasmbooth","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/mtharrison%2Fwasmbooth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtharrison%2Fwasmbooth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtharrison%2Fwasmbooth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtharrison%2Fwasmbooth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtharrison","download_url":"https://codeload.github.com/mtharrison/wasmbooth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250440728,"owners_count":21431045,"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":["image-processing","javascript","rust","webassembly"],"created_at":"2024-08-01T12:04:54.378Z","updated_at":"2025-04-23T13:41:41.467Z","avatar_url":"https://github.com/mtharrison.png","language":"Rust","funding_links":[],"categories":["Rust","Applications","javascript","Intro \u0026 Learning"],"sub_categories":["Visualization","Hardware Players"],"readme":"![WASMBOOTH](https://raw.githubusercontent.com/mtharrison/wasmbooth/master/public/logo.png)\n\n## Video effect booth written in Rust and WebAssembly\n\nPlay with it here: https://mtharrison.github.io/wasmbooth/\n\n### Aim\n\nI wrote this purely to teach myself more about both Rust and WebAssembly and how to use the two together. The aim of this is definitely _not_ to show off the performance of wasm. I haven't benchmarked or compared this to a pure JS implementation but I wouldn't be surprised if it were slower because it copies all the ImageData from canvas into the wasm linear memory on every frame. Additionally it uses convolutional image processing for a few of the effects, which aren't the most efficient algorithms but are elegant and easy to write/understand.\n\n### How it works\n\nThe front end is usual HTML, CSS, JS. It streams your webcam into an offscreen video element, which is then written to a hidden canvas. On each frame we grab the image data from the canvas and write it into WebAssembly's linear memory at a pre-determined offset. We then call a WebAssembly function that will process those pixels with our chosen filters. Finally, we construct a new ImageData object and put it on a visible canvas.\n\nTo capture a still, we write the visible canvas data into a premade template.\n\nThe wasm module exposes 2 functions to JavaScript. One tells the module to allocate enough space to hold all our pixel data and returns a pointer, which is a simple integer offset in the wasm linear memory. The other function takes that pointer and the dimensions of the image, along with our chosen filters.\n\n- `lib` - Contains the frontend JS which will be bundled into public/bundle.js by webpack\n- `public` - Everything that will be served up to the browser including compiled wasm module\n- `src` - The Rust source code which will be compiled to wasm\n\n### Usage\n\nTo simply use the app, run the following:\n\n- `npm install --production` to install hapi (to serve the site)\n- `npm start` to start a server\n\nThen browse to `http://localhost:4000`\n\nIf you want to change JS inside lib, you should run:\n\n- `npm install` to webpack\n- `npm run build-js` after to bundle the JS again\n\nIf you want to change Rust, you should run:\n\n- `npm run build-wasm` to recompile the .wasm module. You will need nighty Rust and the wasm target installed for this. There's a [good explanation here](https://rust-lang-nursery.github.io/rust-wasm/setup.html)\n\nThere are some Rust tests, to run them run:\n\n- `npm test` or `cargo test`\n\n#### Using Docker\n\nBuild the image:\n\n- `docker build -t mtharrison/wasmbooth .`\n\nRun the image (on port 4000):\n\n- `docker run -p 4000:4000 mtharrison/wasmbooth`\n\n#### Using Docker with docker-compose\n\n```\ndocker-compose up --build\n```\n\n### Contributing\n\nPRs welcome to improve the code or approach or to add more effects, this is all about learning! I'm a newbie to both Rust and wasm so please open an issue if you think there's something I missed or could have done better.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtharrison%2Fwasmbooth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtharrison%2Fwasmbooth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtharrison%2Fwasmbooth/lists"}