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-javascript-play-drums-with-webcam/

Installing

Clone this repository to your local computer

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 - JQuery
• magic-xylophone - A javascript motion detection experiment.

Support me