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


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

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 ๐Ÿ˜‰


view all posts

Ronny is a freelance frontend developer with a wild passion for creativity and a relentless hate against flat design. Ronny spent years as a Flash developer before moving to HTML5 and rediscovering fun and happiness.

9 Comments Join the Conversation →

  1. Kjelle Vergauwe

    Nice, kzou wel eens het eind resultaat willen zien dan ๐Ÿ™‚

  2. Cillian

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

  3. Ronny

    No, it works on every pc having a Webcam attached to it. Just make sure your Webcam is setup up correctly ( )

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

  4. Tina

    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

  5. elfkid

    I suggest that you use open cv better recognition rate
    it’s very good code

  6. vamapaull

    Fantastic code! It’s working perfectly. I just have one question: Is there a way to implement a sensibility value for the motion detection?

    • Ronny

      It’s not currently implemented (I think). It’s been several years since I wrote this so don’t shoot me if I get this wrong :p I think you might adapt the code on 2 spots: The first would be the threshold of the filtering mechanism. If you raise that, I think a lot of noise will be removed and the changes will have to be more drastic. But I’m not sure about the accuracy of this approach. The other idea I have about this is calculating the bounding box space. The width and height of the bounding box are given. Therefor you could calculate the surface and depending on a minimum surface, you could choose to ignore certain calls ๐Ÿ˜‰ It would require some rewriting of the code but nothing too spectacular ๐Ÿ˜‰ Good luck!

      Reply (in reply to vamapaull)
      • vamapaull

        I thought of going with the bounding box area, but that will sill be a problem on cameras with a lot of noise. The solution I implemented in the end was to lower the diffData alpha after diffData.draw(display);.
        It seems to be working fine but I’m not sure if that’s the best way to do something like this.

        Reply (in reply to Ronny)

Leave a Reply

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