Wasm video filter booth app written in Rust

Overview

WASMBOOTH

Video effect booth written in Rust and WebAssembly

Play with it here: https://mtharrison.github.io/wasmbooth/

Aim

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

How it works

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

To capture a still, we write the visible canvas data into a premade template.

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

  • lib - Contains the frontend JS which will be bundled into public/bundle.js by webpack
  • public - Everything that will be served up to the browser including compiled wasm module
  • src - The Rust source code which will be compiled to wasm

Usage

To simply use the app, run the following:

  • npm install --production to install hapi (to serve the site)
  • npm start to start a server

Then browse to http://localhost:4000

If you want to change JS inside lib, you should run:

  • npm install to webpack
  • npm run build-js after to bundle the JS again

If you want to change Rust, you should run:

  • 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

There are some Rust tests, to run them run:

  • npm test or cargo test

Using Docker

Build the image:

  • docker build -t mtharrison/wasmbooth .

Run the image (on port 4000):

  • docker run -p 4000:4000 mtharrison/wasmbooth

Using Docker with docker-compose

docker-compose up --build

Contributing

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

You might also like...
simple operating system written in Rust with wasi support.

Agave OS Agave OS is a simple operating system written in Rust with wasi support. It is designed to be lightweight and easy to use. It is also designe

Sealed boxes implementation for Rust/WebAssembly.

Sealed boxes for Rust/WebAssembly This Rust crate provides libsodium sealed boxes for WebAssembly. Usage: // Recipient: create a new key pair let reci

WebAssembly on Rust is a bright future in making application runs at the Edge or on the Serverless technologies.
WebAssembly on Rust is a bright future in making application runs at the Edge or on the Serverless technologies.

WebAssembly Tour WebAssembly on Rust is a bright future in making application runs at the Edge or on the Serverless technologies. We spend a lot of ti

MORUS cipher for Rust.

MORUS for Rust This is a Rust implementation of MORUS (MORUS-1280-128), ported from the Zig implementation. MORUS is a fast authenticated cipher for p

A Rust ESP stack trace decoder that can also runs in your browser thanks to WebAssembly
A Rust ESP stack trace decoder that can also runs in your browser thanks to WebAssembly

ESP Stack Trace Decoder A Rust ESP stack trace decoder that can also runs in your browser thanks to WebAssembly. It is composed of a ⌨️ Rust library,

Simple file sharing with client-side encryption, powered by Rust and WebAssembly
Simple file sharing with client-side encryption, powered by Rust and WebAssembly

Hako Simple file sharing with client-side encryption, powered by Rust and WebAssembly Not feature-packed, but basic functionalities are just working.

bn.js bindings for Rust & WebAssembly with primitive-types support

bn.rs bn.js bindings for Rust & WebAssembly with primitive-types support Write Rust code that uses BN use std::str::FromStr; use primitive_types::{H1

A handy calculator, based on Rust and WebAssembly.
A handy calculator, based on Rust and WebAssembly.

qubit 💥 Visit Website To Use Calculator Example 💥 Visit Website To Use Calculator 2 + 2

A simple compile-to-WebAssembly language rewritten in Rust

chasm A very simple compile-to-WebAssembly language You can play with chasm online. This is a rewrite in Rust of the compiler for the language chasm.

Comments
  • [Docker] Add Docker support

    [Docker] Add Docker support

    Hello !

    First, I wanted to thank you for this project, it's really awesome ! I am working on learning RUST and apply it to WASM and this project is awesome I I would be happy to start to contribute to it in the next future :)

    My first humble contribution if you are okay with it will be to add Docker support to easily be able to deploy it (I am using Kubernetes).

    I will push a PR to add this support, please let me know what you think ! :)

    Cheers !

    enhancement 
    opened by benjaminch 2
Dister builds and bundles your wasm web app.

dister Dister builds and bundles your wasm web app. Installation cargo install dister Requirements wasm32-unknown-unknown target: rustup target add wa

Mohammed Alyousef 1 Apr 9, 2022
TodoMVC in Rust from Scratch (YouTube video tutorial)

TodoMVC in Rust from Scratch (YouTube video tutorial)

null 36 Dec 28, 2022
Wasm runtime written in Rust

Wasm runtime written in Rust

Teppei Fukuda 1 Oct 29, 2021
Autogenerated async RPC bindings that instantly connect a JS frontend to a Rust backend service via WebSockets and WASM.

Turbocharger Autogenerated async RPC bindings that instantly connect a JS frontend to a Rust backend service via WebSockets and WASM. See https://gith

null 28 Jan 2, 2023
A template for kick starting a Rust and WebAssembly project using wasm-pack.

A template for kick starting a Rust and WebAssembly project using wasm-pack.

Haoxi Tan 1 Feb 14, 2022
{Wasm+Rust} Build and animate Conway's Game of Life

A self-guided learning project that includes Rust + Wasm together. Who knows, maybe Typescript and React joins too..

M.Yavuz Yagis 1 Feb 14, 2022
The Wasm-Enabled, Elfin Allocator

wee_alloc The Wasm-Enabled, Elfin Allocator API Docs | Contributing | Chat Built with ?? ?? by The Rust and WebAssembly Working Group About wee_alloc:

Rust and WebAssembly 567 Dec 28, 2022
Example app & project structure for Golem Cloud

Synopsis This project serves as an example/template for building an application using WebAssembly Component Model (and in this case, an app for Ziverg

Terry L 5 Aug 4, 2023
A console and web-based Gomoku written in Rust and WebAssembly

?? rust-gomoku A console and web-based Gomoku written in Rust and WebAssembly Getting started with cargo & npm Install required program, run # install

namkyu1999 2 Jan 4, 2022
darkforest is a console and web-based Roguelike written in Rust and WebAssembly.

darkforest darkforest is a console and web-based Roguelike written in Rust and WebAssembly. Key Features TBA Quick Start TBA How To Contribute Contrib

Chris Ohk 5 Oct 5, 2021