Webcam motion detection coolness
Published by Ronny on January 18th, 2009 in Actionscript, Open-source, download. 6 CommentsA 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:
- WebcamRelief – (781 views)
- Visualizr source – (1460 views)
- Bezier animation fun revisited – (1017 views)
- World360: Unbugged and kicking! – (763 views)
- Dooodls for everyone! – (9804 views)
Freedom of speech!
Whatever it is you feel: Tell me! It's for free!



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
Ronny @ 21:25 - January 22nd, 2009
I used it in http://www.nocreativity.com/stuff/pih/designprinciples/transformers/
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/