Webcam motion detection coolness

Published by Ronny on January 18th, 2009 in Actionscript, Open-source, download. 6 Comments

Webcam motion detection: step by step development

A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript… So I started experimenting around…

When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.
I went on a Google trip which led me to Koen’s post about motion detection. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.

In his post Koen mentioned an article, written by Guy Watson, concerning an other way to get motion detection going. To make things simple: Guy just takes 2 pictures – one of the previous frame, one of the current – puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The ‘unchanged’ pixels are blacked out. The remaining pixels are the difference in the picture… which reflects movement.

So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.

That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn’t find anything intresting. Later on, I talked to Peter Elst and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()

There we go: that’s a solution right there! And it worked out just fine!
You can test it for yourself in this little test application – requires a webcam (duh!)

Download

Flex Project source: source.zip
Webcam motion detector class (Actionscript 3): MotionDetector.zip

I was planning on adding a ’sensitivity’ property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch :) )
Feel free to suggest better ways of doing this. I’m still pretty sure I’m creating a bit too much overhead to make this work ;)


Posts that somehow relate to this one:

popular opinion

6 others felt like sharing their feelings about this. Feel free to do so as well.

Kjelle Vergauwe @ 21:20 - January 22nd, 2009

Nice, kzou wel eens het eind resultaat willen zien dan :)

Cillian @ 23:06 - February 16th, 2009

Does this only work on windows? I have a mac and it won’t make the connection with the web cam…

Ronny @ 23:17 - February 16th, 2009

No, it works on every pc having a Webcam attached to it. Just make sure your Webcam is setup up correctly ( http://shots.nocreativity.com/7e543f8e7fc8a6834f851b0f23f9b6c7.jpg )

I have noticed some irregularities on Macbooks using Firefox 3 though. Works okay in Safari.
(I’m a Mac user as well ;) )

Tina @ 11:34 - October 21st, 2009

I am working on a motion detection app that will work a bit like doodl except that it will be projected so the drawings will be big.
my blog also includes examples of loads of different apps out there.
all the best
Tina
http://tinaburton.blogspot.com/

elfkid @ 9:56 - March 11th, 2010

I suggest that you use open cv better recognition rate
it’s very good code
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/

Freedom of speech!

Whatever it is you feel: Tell me! It's for free!