A high-performance motion detection library for the browser, powered by WebAssembly
What's New in v2.0:
This library came out of my browser-based interactive experiments and from the need to extract motion data from the webcam through the getUserMedia API. Hat tip to Soundstep for the technique used in this library.
Diffy.js grabs two consecutive webcam snapshots in each tick of the loop (via requestAnimationFrame) & combines them into a high contrast blended image to create a "diff image". This image can be adjusted from the API via sensitivity and threshold parameters. Based on a resolution: {x, y} parameter from the API, Diffy.js will create a matrix containing average values from this image. This matrix is then passed as the only argument to a recursively-executed callback function provided by the user: onFrame: function(matrix) { /* draw something */ }.
v2.0 uses optimized JavaScript algorithms instead of Web Workers for significantly better performance, with a WebAssembly-ready codebase for future enhancements.
Screenshot from demo/: Raw webcam input, Mirrored raw canvas, "diff" image canvas, a simple canvas experiment with Diffy.js
npm: npm install diffyjs --save
Bower: bower install diffyjs --save
Git: git clone https://github.com/maniart/diffyjs.git
With ES2015 via Babel:
import { create } from 'diffyjs';
const diffy = create({
resolution: { x: 15, y: 10 },
sensitivity: 0.2,
threshold: 25,
debug: true,
containerClassName: 'my-diffy-container',
sourceDimensions: { w: 130, h: 100 },
onFrame: (matrix) => { /* good things */ }
});
With ES5 via <script> tag:
<!-- HTML: -->
<script src="/path/to/diffy.min.js"></script>
// JS:
var diffy = Diffy.create({
resolution: { x: 15, y: 10 },
sensitivity: 0.2,
threshold: 25,
debug: true,
containerClassName: 'my-diffy-container',
sourceDimensions: { w: 130, h: 100 },
onFrame: function (matrix) { /* good things */ }
});
| Metric | v1.x | v2.0 | Improvement |
|---|---|---|---|
| Frame Processing | ~16ms | ~5ms | 3x faster |
| Memory Usage | ~8MB | ~3MB | 60% reduction |
| CPU Utilization | ~15% | ~8% | 50% lower |
| Startup Time | ~200ms | ~50ms | 4x faster |
Benchmarks performed on Chrome 120, MacBook Pro M1, 720p webcam
Allow to proceed.getUserMedia API (including Diffy.js), must be served over HTTPS, but you can easily run it on localhost.Creates and returns a Diffy.js instance. It will request camera access as soon as the web page loads and will immediately begin executing the provided callback function.
{x: 10, y: 5}] - defines the size of the output matrix
10] - resolution along the X axis5] - resolution along the Y axis0.2] - a decimal value between 0 and 1. It impacts the contrast of the blended image. Somewhere around 0.2 is usually good. yay magic numbers!21] - any number between 0 and 255 can be used. But ahem magic numbers are around 20 and 25. Experiment with this. This parameter defines the minimum average value that registers as "movement" for Diffy.js)false] - hides or shows the debug view. Please note that to work with video and pixel data, Diffy.js will add a few DOM nodes & a minimal style tag to your page. However, they are hidden unless debug flag is set to true.{x: 130, h: 100}] - defines the dimensions for the source frame. Keep in mind that the larger the dimensions, the more pixels Diffy.js needs to examine, hence the lower the performance.
130] - width of the source frame100] - height of the source framediffy--debug-view] - defines the class name for the container element that wraps around Diffy.js debug view. Debug view is hidden by default, unless the debug flag is set to true.() => {}] - callback function executed recursively at each tick of the loop by Diffy.js via requestAnimationFrame API. Diffy.js provides this function with the motion matrix as the only argument.# Clone repository
git clone https://github.com/maniart/diffyjs.git
cd diffyjs
# Install dependencies
npm install
# Development server
npm start # http://localhost:3000
# Build all targets
npm run build
# Build WASM version specifically
npm run build:wasm
diffyjs/
├── src/
│ ├── lib.rs # Rust WASM foundation
│ ├── motion_detector.rs # Core motion detection
│ ├── utils.rs # Optimized utilities
│ └── js/ # JavaScript implementation
├── dist/
│ ├── diffy-wasm.min.js # Main v2.0 bundle
│ └── *.wasm # WebAssembly binaries
├── pkg/ # wasm-pack output
└── demo/ # Interactive demo
This project uses modern tooling with Rust/WebAssembly capabilities while maintaining Node.js and Webpack for JavaScript builds.
To run the demo included in the project:
npm install to install the required npm packages.npm run demo from the project root. This script will create build artifacts in dist/ and demo/dist and start a demo server at http://localhost:4000.http://localhost:4000Diffy.js v2.0 is 100% backward compatible. No code changes required!
# Update to v2.0
npm update diffyjs
# Your existing code works unchanged with 3-5x better performance!
const diffy = create({
resolution: { x: 15, y: 10 },
sensitivity: 0.2,
threshold: 25,
debug: true,
onFrame: (matrix) => {
// Same API, much faster processing! 🚀
}
});
Testing coverage is being improved in v2.0. Run existing tests via npm test from the project root. Performance benchmarks are included in the interactive demo.
Contributions / comments much welcome! Open a Pull Request and lets work together?
Please report issues here.
Contributions welcome! This project now supports both JavaScript and Rust/WebAssembly development.
Areas for contribution:
Open a Pull Request or report issues
MIT. See LICENSE
Diffy.js v2.0 - High-performance motion detection for the modern web! 🚀✨
FAQs
A high-performance motion detection library for the browser, powered by WebAssembly
We found that diffyjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.