react-motion-detect

A simple react component to detect motion from a camera and callback when detected.

Usage

import Motion from 'react-detect-motion';

const MyComponent = () => {
    const onMotion = () => {
        console.log('I get called when motion is detected')
    }

    return <Motion onMotion={onMotion} />
}

There many parameters to the component to configure the sensitivity and behavior.

| Parameter | Type | Description | | ----------- | ----------- | ----------- | | onMotion | Function | Required: function called when motion is detected | | detectInterval | Number | (optional) number of milliseconds between polling the video images for changes/movement - default: 100 | | width | Number | (optional) pixel width of the video used to analyze movement (and optionally display) - default: 64 | | height | Number | (optional) pixel height of the video used to analyze movement (and optionally display) - default: 48 | | motionThreashold | Number | (optional) total distance of all pixel shifts between analyzed frames to trigger motion detected - default: 50000 | | minTimeBetween | Number | (optional) minimum time between onMotion function calls in milliseconds - default: 3000 | | showElements | Boolean | (optional) when enabled, the video and camera elements will be visibly rendered - this is required for Safari - default: false |

Disclaimer

This has only been tested in the Chrome (Windows & MacOS) and on Safari (MacOS) -- your mileage may vary.