A dependency-free motion detection library for the browser
MIT License
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. This is the cleaned up version of that code. Hat tip to Soundstep for the technique used in this library.
Basically, 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 */ }
. A Web Worker is used to speed up image processing. A simple visual debugger can be optionally turned on as you experiment with values.
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 */ }
});
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.This project uses Node.js v6.9.1
, Babel v6.18.0
and Webpack v1.13.2
.
After cloning the repo, install the dev dependencies from the project root via npm install
.
At this point, you should be able to run npm start
to start the development server at http://localhost:3000
.
npm start
will watch source files in src
for changes, recompiles the changes files and serves them from the memory. In order to produce build artifacts, run npm run build
. This will output the build files and source maps in dist/
and demo/dist
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:4000
As of right now, test coverage is [covers face] embarrassingly low but you can run them via npm test
from the project root. New releases will include better test coverage.
Contributions / comments much welcome! Open a Pull Request and lets work together?
Please report issues here.
MIT. See LICENSE