[AS3] [FP10] Farberkennung / Verfolgung in Bildern

[_geo_]

Der ColorBlobDetector ermöglicht es in einem Bild Bereiche ähnlicher oder identer Farbe zu erkennen und liefert als Ergebnis Rectangle-Objekte zurück welche diese Bereiche umschließen.

Es gibt einige Konfigurationsparameter, aber die hier zu erklären wäre zu langwierig, dafür gibt`s ja die online Demo.

anschaun
saugen

Habs hier im FF als .zip.fla angehängt (wegen der Dateigrößenbeschränkung). Einfach .fla löschen und entpacken. Die .zip beinhaltet 3 Beispiele:

- Die Demo die online zu sehen ist.
- Eine MiniDemo als FlashDevelop Projekt.
- Eine MiniDemo als Flash CS4 Projekt.

Code-Beispiel:

package 
{
    import at.geoathome.cv.blob.ColorBlobDetector;
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
 
    
    /**
     * @author Georg Kamptner
     * 
     * License: Do as you wish, but don`t be evil ;)
     */
    public class Main extends Sprite 
    {
        // image
        [Embed(source="image.png", mimeType="image/png")]
        protected var Img:Class;
        protected var _img:Bitmap;
        protected var _imgContainer:Sprite;
        protected var _graphicsContainer:Sprite;
        
        // color blob detector
        protected var _colorBlobDetector:ColorBlobDetector;
        private var _roi:Rectangle;
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        protected function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            
            // create image
            _img = new Img() as Bitmap;
            
            // Since Bitmap is not interactive we need a Sprite
            // to handle mouse events.
            _imgContainer = new Sprite();
            _imgContainer.addChild(_img);
            addChild(_imgContainer);
            
            // draw the found regions into this sprite
            _graphicsContainer = new Sprite();
            addChild(_graphicsContainer);
            
            // add mouse events
            _imgContainer.addEventListener(MouseEvent.CLICK, detectColorUnterMouse);
            
            // detector (this is it) - debug version needs a sprite to draw into
            _colorBlobDetector = new ColorBlobDetector( 2, 2000, 2, 2000);
            _colorBlobDetector.setConfig(2.0, 6.0, 9.0);
            _colorBlobDetector.setThresholds(8.0, 0.20, 0.0, 0.0);
            _roi = new Rectangle(0, 0, _img.width, _img.height);
        }
        
        protected function detectColorUnterMouse(e:MouseEvent):void 
        {
            // get color unter mousecursor
            var rgb:uint = _img.bitmapData.getPixel(_img.mouseX, _img.mouseY);
            var r:uint = rgb >> 16;
            var g:uint = rgb >> 8 & 0xff;
            var b:uint = rgb & 0xff;
            
            // detect blobs
            _colorBlobDetector.detectRGB(_img.bitmapData, r, g, b, _roi);
            
            // draw regions
            _graphicsContainer.graphics.clear();
            for (var i:uint = 0; i < _colorBlobDetector.numOfBlobs; ++i)
            {
                _graphicsContainer.graphics.lineStyle(2, 0xff0000);
                _graphicsContainer.graphics.drawRect(_colorBlobDetector.blobs[i].x,
                                                _colorBlobDetector.blobs[i].y,
                                                _colorBlobDetector.blobs[i].width,
                                                _colorBlobDetector.blobs[i].height);
            }
            
            // debug trace
            trace(  "Blobs found: " + _colorBlobDetector.numOfBlobs +
                    ", Duration in MS: " + _colorBlobDetector.detectionDuration +
                    " in FPS: " + int(1000 / _colorBlobDetector.detectionDuration));
        }
 
    }
    
} 

Ist jetzt nicht etwas das absolute Neulinge sofort verwenden können, aber ich hoff mal es kann jemand gebrauchen.

lg

[marc]

Sehr cool. Vielen Dank dir. Finde das ist was für den Newsletter.

[_geo_]

Freut mich dass es gefällt

Steht im übrigen in direktem Zusammenhang zu dem Eintrag: http://www.flashforum.de/forum/check...ml#post1951638 Wenn ich mir den Verweis erlauben darf (hab dort nämlich noch kein neues Feedback bekommen)

[headkit]

goil!

[DennisG]

Hey echt cool
Hab mal eine Frage, kann man beim [Embed(source="image.png", mimeType="image/png")]

auch eine Webcam einbinden?
Also so das er das die ganze zeit macht?

Also eine Webcam aufzurufen ist ja kein Problem undzwar:

PHP-Code:

var camera:Camera = Camera.getCamera();
var video:Video = new Video(); 
video.attachCamera(camera);
addChild(video); 


Nun gibt es haufenweise Codes womit man daraus ein Bild speichert, aber das wollen wir ja nicht... gibt es da vielleicht schon lösungen?

[_geo_]

Der Detector benötigt ein BitmapData Objekt als Eingabe: Also reicht es wenn du dein Video in eine Bitmapdata zeichnest (bitmapDataFromVideo.draw(video)) und diese dann an den Detector übergibst.

// bitmapdata in der größe des videeos erstellen
var bitmapDataFromVideo:BitmapData = new BitmapData(video.width, video.height);
bitmapDataFromVideo.draw(video);
 
// detect color in bitmap
_colorBlobDetector.detectRGB(bitmapDataFromVideo, r, g, b, _roi); 

Wenn noch was unklar ist einfach nachfragen

lg

[DennisG]

Joa hört sich gut an
habs auch probiert einzubauen aber klappt leider nicht...
wie/ wo müsste ich das einbauen?

also das hier

PHP-Code:

var camera:Camera = Camera.getCamera();
var video:Video = new Video(); 
video.attachCamera(camera);
addChild(video); 

// bitmapdata in der größe des videeos erstellen
var bitmapDataFromVideo:BitmapData = new BitmapData(video.width, video.height);
bitmapDataFromVideo.draw(video);
// detect color in bitmap
_colorBlobDetector.detectRGB(bitmapDataFromVideo, r, g, b, _roi); 


Würde ich dort hinein machen wo

PHP-Code:

70. #
            // detect blobs
71. #
            _colorBlobDetector.detectRGB(_img.bitmapData, r, g, b, _roi); 


steht aber es sieht nich so aus als ob es etwas bringt...

wäre echt dankbar für weitere hilfe

[_geo_]

_img musst du durch bitmapDataFromVideo ersetzen.

Hab mal das Beispiel um ein Video erweitert:

/*
mit USE_WEBCAM kann man auswählen ob man nun
das Bild oder die Webcam nutzen möchte. Achtung falls
du mehrere Webcams installiert hast musst du get
getCamera() deine zu nutzende Webcam angeben ;)
*/
 
package 
{
    import at.geoathome.cv.blob.ColorBlobDetector;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.events.TimerEvent;
    import flash.geom.Rectangle;
    import flash.media.Camera;
    import flash.media.Video;
    import flash.utils.Timer;
 
    
    /**
     * @author Georg Kamptner
     * 
     * License: Do as you wish, but don`t be evil ;)
     */
    public class Main extends Sprite 
    {
        // image
        [Embed(source="image.png", mimeType="image/png")]
        protected var Img:Class;
        protected var _img:Bitmap;
        protected var _imgContainer:Sprite;
        protected var _graphicsContainer:Sprite;
        
        // video / webcam
        protected var _webcam:Camera;
        protected var _video:Video;
        protected var _bitmapDataFromVideo:BitmapData;
        protected var _trackTimer:Timer;
        protected var _colorFromVideoStorage:Object;
        
        public static var USE_WEBCAM:Boolean = false;
        
        // color blob detector
        protected var _colorBlobDetector:ColorBlobDetector;
        private var _roi:Rectangle;
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        protected function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            
            if (!USE_WEBCAM)
            { // image //
                // create image
                _img = new Img() as Bitmap;
                
                // Since Bitmap is not interactive we need a Sprite
                // to handle mouse events.
                _imgContainer = new Sprite();
                _imgContainer.addChild(_img);
                addChild(_imgContainer);
                
                // add mouse events
                _imgContainer.addEventListener(MouseEvent.CLICK, detectColorFromImageUnderMouse);
            }
            else
            { // webcam //
                _webcam = Camera.getCamera();
                _webcam.setMode(320, 240, 20, false);
                _video = new Video(); 
                _video.attachCamera(_webcam);
                
                // Since Video is not interactive we need a Sprite
                // to handle mouse events.
                _imgContainer = new Sprite();
                _imgContainer.addChild(_video);
                addChild(_imgContainer);
                
                // add mouse events to select a color
                _colorFromVideoStorage = { r:255, g:255, b:255 };
                _imgContainer.addEventListener(MouseEvent.CLICK, getColorFromVideo);
                
                _bitmapDataFromVideo = new BitmapData(_video.width, _video.height);
                
                _trackTimer = new Timer(1000 / 20);
                _trackTimer.addEventListener(TimerEvent.TIMER, detectColorInVideo);
                _trackTimer.start();
            }
            
            // draw the found regions into this sprite
            _graphicsContainer = new Sprite();
            addChild(_graphicsContainer);
            
            // detector (this is it) - debug version needs a sprite to draw into
            _colorBlobDetector = new ColorBlobDetector( 2, 2000, 2, 2000);
            _colorBlobDetector.setConfig(2.0, 6.0, 9.0);
            _colorBlobDetector.setThresholds(8.0, 0.20, 0.0, 0.0);
            
            if (!USE_WEBCAM)
            {
                _roi = new Rectangle(0, 0, _img.width, _img.height);
            }
            else
            {
                _roi = new Rectangle(0, 0, _bitmapDataFromVideo.width, _bitmapDataFromVideo.height);
            }
        }
        
        private function getColorFromVideo(e:MouseEvent):void 
        {
            // get color unter mousecursor
            var rgb:uint = _bitmapDataFromVideo.getPixel(_video.mouseX, _video.mouseY);
            _colorFromVideoStorage['r'] = rgb >> 16 & 0xff;
            _colorFromVideoStorage['g'] = rgb >> 8 & 0xff;
            _colorFromVideoStorage['b'] = rgb & 0xff;
        }
        
        private function detectColorInVideo(e:TimerEvent):void 
        {
            // draw video into bitmapdata
            _bitmapDataFromVideo.draw(_video);
            
            // detect blobs
            _colorBlobDetector.detectRGB(_bitmapDataFromVideo,  _colorFromVideoStorage['r'],
                                                                _colorFromVideoStorage['g'],
                                                                _colorFromVideoStorage['b'], _roi);
            
            // draw regions
            _graphicsContainer.graphics.clear();
            for (var i:uint = 0; i < _colorBlobDetector.numOfBlobs; ++i)
            {
                _graphicsContainer.graphics.lineStyle(2, 0xff0000);
                _graphicsContainer.graphics.drawRect(_colorBlobDetector.blobs[i].x,
                                                _colorBlobDetector.blobs[i].y,
                                                _colorBlobDetector.blobs[i].width,
                                                _colorBlobDetector.blobs[i].height);
            }
            
            // debug trace
            trace("Blobs found: " + _colorBlobDetector.numOfBlobs +
            ", Duration in MS: " + _colorBlobDetector.detectionDuration + 
            " in FPS: " + int(1000 / _colorBlobDetector.detectionDuration));
 
        }
        
        protected function detectColorFromImageUnderMouse(e:MouseEvent):void 
        {
            // get color under mousecursor
            var rgb:uint = _img.bitmapData.getPixel(_img.mouseX, _img.mouseY);
            var r:uint = rgb >> 16;
            var g:uint = rgb >> 8 & 0xff;
            var b:uint = rgb & 0xff;
            
            // detect blobs
            _colorBlobDetector.detectRGB(_img.bitmapData, r, g, b, _roi);
            
            // draw regions
            _graphicsContainer.graphics.clear();
            for (var i:uint = 0; i < _colorBlobDetector.numOfBlobs; ++i)
            {
                _graphicsContainer.graphics.lineStyle(2, 0xff0000);
                _graphicsContainer.graphics.drawRect(_colorBlobDetector.blobs[i].x,
                                                _colorBlobDetector.blobs[i].y,
                                                _colorBlobDetector.blobs[i].width,
                                                _colorBlobDetector.blobs[i].height);
            }
            
            // debug trace
            trace("Blobs found: " + _colorBlobDetector.numOfBlobs +
            ", Duration in MS: " + _colorBlobDetector.detectionDuration + 
            " in FPS: " + int(1000 / _colorBlobDetector.detectionDuration));
        }
 
    }
    
}