Sunday 18 January, 2009

Webcam motion detection coolness


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 ;)


Related Posts


Bezier animation fun!
Actionscript, Experiments
Visualizr source
Actionscript, Flash
The ‘this-is-so-cool-that-I-just-had-to-share-this-with-you’-post
Actionscript, Everything else

6 Comments


Trackbacks and Pingbacks

Leave a Comment


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">