# Motion Detection - Virtual Drums Playground
 Detect motions from webcam, play the virtual drums by waving your hands in the air.
 
 ## Live Demo
**[https://bensonruan.com/motion-detection-play-drums-with-webcam/](https://bensonruan.com/motion-detection-play-drums-with-webcam/)**

![motion-detection](https://bensonruan.com/wp-content/uploads/2019/10/motion-detection-play-virtual-drums.jpg)


## Installing
Clone this repository to your local computer
``` bash
git https://github.com/bensonruan/Motion-Detection-Virtual-Drums.git
```
Point your localhost to the cloned root directory

Browse to http://localhost/index.html 


## Start Playing
* Turn on the Webcam switch and allowing the browser to access your webcam 
* Wave you hands in the air to overlay the drums area in the webcam
* When it detects movements in the drums and cymbals area, it will triggered the sound and effect of playing the gear

## Notes
Please note that on iOS Safari, cameras can only be accessed via the https protocol 

## Regerence
* [jquery](https://code.jquery.com/jquery-3.3.1.min.js) - JQuery
* [magic-xylophone](https://github.com/soundstep/magic-xylophone) - A javascript motion detection experiment.

