Frame Differencing

  1. [SWF(width = 800, height= 600)]
  2. var sw:Number = 800;
  3. var sh:Number = 600;
  4. var pixelNum:int = sw * sh;
  5. var blurAmount:Number = 10;
  6. var pnt:Point = new Point(0,0);
  7. var rect:Rectangle = new Rectangle(0,0,sw,sh);
  9. var canvas:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  10. var buffer:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  11. var feed  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  12. var prev  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  14. var frame:Bitmap = new Bitmap(canvas, "auto", true);
  15. addChild(frame);
  17. var cam:Camera =  Camera.getCamera();
  18. cam.setMode(sw,sh,12);
  19. var video:Video = new Video(sw, sh);
  20. video.attachCamera(cam);
  22. cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  24. function onActivityStart(evt:ActivityEvent):void {
  25.     addEventListener(Event.ENTER_FRAME, onRun);
  26.     cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  27. }
  29. function onRun(evt:Event):void{
  30.     buffer.draw(video);
  31.     feed.copyPixels(buffer, rect, pnt);
  32.     buffer.draw(prev, null, null, BlendMode.DIFFERENCE);
  33.     prev.draw(video);
  34.     canvas.copyPixels(buffer, rect, pnt);
  35. }

This snippet shows a simple method to do frame differencing with a web cam. This is useful for detecting which areas of the screen have change from frame to frame. This post assumes you pretty much know what frame differencing is.

You can view an swf file here:

This is one of those things I do a good deal but never wrapped up into a library... it's easy (for me at least) to forget exactly how to set it up from scratch.

I added an extra buffer because it's pretty common that you'll want to other things aside from just frame differencing alone, so it's nice to have it all wrapped up in a buffer BitmapData that you can use elsewhere. If speed is a real concern, you can do away with the buffer and just use the canvas instead - depending on what kind of analysis your doing on the frame differenced image it may be trickier without the buffer.

This entry was posted in BitmapData, Video, graphics algorithms, pixel manipulation and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Posted March 15, 2010 at 7:32 am | Permalink

    Nice one Zevan! I’ve used similar technique on but used method instead.

    Now, just add threshold to make all the pixels same color, then perform blob detection and here you go:

    I put this on Wonderfla as well :)

  2. Posted March 15, 2010 at 9:53 am | Permalink

    That is very cool…. nice work Og2t

  3. Posted September 1, 2010 at 1:38 am | Permalink

    Thanks for posting.

    I noticed you have this bit of code that throws an error and appears to not be used:
    var brush:MovieClip = new Brush();

    I’m trying to create a script to isolate just new objects that appear on the video after it start playing, and make everything else black. So that when the webcam first starts, it records the image when there is no one in the frame, then compares that first frame to the new feed coming in, so that essentially only the person in the frame ends of being visible, and everything else is black. Any idea how I could do that?

2 Trackbacks

  1. [...] Frame Differencing [...]

  2. [...] reminded me of a great bit of Code Zevan posted over at ActionSnippet – AS3 Frame Differencing. Which then in turn reminded me of a couple of BitmapData experiments I never put up on here. So [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *