Windowsでカメラからの画像入力を使うには、Flash(Air)やProcessing、Max/MSPを除くとDirectXかVideo for Windowsを使わなければならないんだけど、これらをC#から直接使うのはとてもめんどい。

で、DirectX自体はラッパーを介して使えるので問題ないんだけど、DirectShow（カメラの入力に使う）だけはなぜかC#用のラッパーが無いのでDirectShow.NETの出番になる。このライブラリはs.h.log DirectShow.NETで静止画キャプチャでも使ったんだけど、去年ぐらいからDirectShow.NETがver 2.0になってさらに良くなっていた。

ちょっといじってみたが、C++が苦手な馬鹿には便利すぎて感動したので、

webcam撮影→JPEG画像に保存のサンプルを作って置いておきます

■作ったもの

→ Download (VisualStudio 2008 + C#3.0)

昨日の朝にDirectShow.NET2.0でwebcamキャプチャ、JPEG保存 – 橋本詳解で書いたのとほぼ同じだが、デバイスの選択ができるようになった。

あと、DirectShow.NETを使えば、インストールすると1GBぐらいになるDirectX SDKを入れなくても済むのも嬉しい。

■プログラムの準備

まず準備としてDirectShow.NETのサイトからDirectShowLib-2005.dll本体と、サンプルを手に入れる。

DirectShowLib-2005.dllにパスを通し、sampleに入っているCapture.csもpublic domainなのでコピーしてありがたく使わせていただく。

そして、いくつか使うnamespaceを通す

usingDirectShowLib;

usingSnapShot;

usingSystem.Runtime.InteropServices;

usingSystem.Drawing.Imaging;

■カメラデバイスを取得してプレビュー表示する

なんでもいいが、System.Windows.Forms.Controlを継承しているPanelやPictureBoxやFormなどを、カメラのプレビュー用に用意しなければならない。プレビューを画面に出したくなければVisible = falseしておけばいい。

そのコントロールをCaptureクラスのコンストラクタに渡してやると、cameraのプレビュー表示がリアルタイムに表示されるようになる。

PanelpanelPreview=newPanel();

this.Controls.Add(panelPreview);

Capturecam=newCapture(0,640,480,24,panelPreview);//device,x,y,24FPS,preview

Capture()の第一引数は画像入力デバイスのindexで、0からはじまる。存在しないデバイスindexを選んでしまうとエラーになるので注意。FPSやカメラのXYサイズも指定できる。

■現在のカメラ表示を保存する

別のコントロールを用意して、そっちに保存する。今回のサンプルアプリの場合は、左の動画が右に静止画としてキャプチャされる。

PictureBoxにキャプチャするなら

PictureBoxpicBox=newPictureBox();

this.Controls.Add(picBox);

IntPtrm_ip=cam.Click();

Bitmapb=newBitmap(cam.Width,cam.Height,cam.Stride,PixelFormat.Format24bppRgb,m_ip);

b.RotateFlip(RotateFlipType.RotateNoneFlipY);//上下反転しているので直す

picBox.Image=b;

Image型で静止画をコピーできたので、JpegファイルやPNGファイルなどに書き出すのも簡単。

picBox.Image.Save("captured.jpg",ImageFormat.Jpeg);

もちろんPictureBoxを経由しないで、直接保存もできる

b.Image.Save("captured.jpg",ImageFormat.Png);

カメラを閉じるのを忘れずに。

FormのFormClosedイベント内などでDispose()を呼べば良い

cam.Dispose();

ちなみに、現在接続してあるデバイスの一覧はDsDevice.GetDevicesOfCat(FilterCategory.VideoInputDevice)の中に入っている。

今回のサンプルでコンボボックスの中にデバイス名一覧を突っ込んだのはこんな感じでやった

comboBoxDevices.Items.Clear();

foreach(DsDevicedsinDsDevice.GetDevicesOfCat(FilterCategory.VideoInputDevice))

{

comboBoxDevices.Items.Add(ds.Name);

}

comboBoxDevices.SelectedIndex=0;

ComboBox.SelectedIndexで現在選ばれたデバイス名のindexがわかって、それをCaptureのコンストラクタのデバイスindexとして使えば良い。

AIRを使うと、flash.filesystemやflash.desktopなどのデスクトップアプリ用のクラス群が使えるようになるので、やってみた。

Air beta3で開発する環境を作って、前からやってみたかった

• 半透明で変な形をしたウィンドウ
• USBカメラで撮影してJPEGにエンコードしてファイル出力
を作った。



撮影した写真はプログラムと同じフォルダに保存される。

できたもの => CameraSaveJpeg.air (Adobe AIR beta3)、Archive



なお、半透明ウィンドウにするとスクリーンショットに写らなくなるので、デジカメで撮った。

■開発環境を整える

・Adobe Labs – Downloads: Adobe AIR

AIRの実行環境

・AIR:Flash CS3 Professional Update – Adobe Labs

Japaneseを選んでインストール

・Jinten Blog Blog Archive FlashDevelop Beta5

FlashDevelp3.0 Beta5で、AIRとmx系クラスのコード補完を有効にする方法

[Project]→[Properties]→[Compiler Options]→[Intrinsic Libraries]に



Library\AS3\frameworks\Flex3

Library\AS3\frameworks\AIR

を追加する

で、普通にFlashDevelopでFlash IDE用のプロジェクトを作成。

さらにFlashCS3からもAIRプロジェクトを作成。FlashDevelopと同じフォルダを指定する。

Flex3.0のコンパイラはとりあえず必要ない。

■証明書を作る

・AIR Beta2でWEBCAMの画像をjpgに保存するサンプル – hatayanlog

が詳しい。AIR Beta2から証明書を作らないとならなくなった。



■プログラム書く

普通にAS3書いてflaからリンクさせてコンパイルする。

JPEG圧縮はas3corelib – Google Codeを使った。

・memo 006　Adobe AIR Beta2でデスクトップアプリケーションを作ってみる – やっぱギークでナイト！

FlashCS3上でAIRプロジェクトを作って、新しいNativeWindowを開いたり閉じたりする。

コードだけFlashDevelopで書くには、ドキュメントクラス名を指定してやればいい



・Adobe Edge: 2007年9月 Flash CS3 でゼロからはじめよう AIRアプリケーション作成講座 Vol.1

NativeWindowを変な形のウィンドウにする方法

・AIR Beta2でWEBCAMの画像をjpgに保存するサンプル – hatayanlog

カメラで撮影、MovieClip→BitmapData→JPEGEncoder→ByteArray→FileStreamで保存

あと、beta2から3でまた変わったのか、Fileまわりは

var file:File = new File();

var now:Date = new Date();

file.nativePath = File.applicationDirectory.nativePath + File.separator + now.time + “.jpg”;

これでアプリケーションと同じディレクトリに保存できた。

■ソースコード

CameraSaveJpeg.as




/**

* Capture Image by USB-Camera then Save it as JPEG file.

* 

* @author Sho Hashimoto

* @version 1.1

* http://shokai.org

* FlashCS3 + AIR beta3

* 2008/01/12

*/

package {

    import fl.controls.*;

    import flash.display.*;

    import flash.filesystem.*;

    import flash.media.*;

    import flash.events.*;

    import flash.utils.*;

    import com.adobe.images.JPGEncoder;

    public class CameraSaveJpeg extends MovieClip{

        var cam:Camera;

        var video:Video;

        var _buttonShot:Button;

        var _textAreaLog:TextArea;

        var _buttonClose:Button;

        var _bg:MovieClip;

        

        public function CameraSaveJpeg() {

            

            stage.scaleMode = StageScaleMode.EXACT_FIT; // 伸縮する

            // stage.scaleMode = StageScaleMode.NO_SCALE; // 伸縮しない

            stage.align = StageAlign.TOP_LEFT; // 左上から

            

            link_ide_obj() // IDEが生成したオブジェクトを関連づけ

            

            cam = Camera.getCamera();

            cam.setMode(800,600,24,true);// 24FPS

            cam.setQuality(0, 100);

            video = new Video(cam.width, cam.height);

            video.attachCamera(cam);

            this.addChild(video);

            video.width = 200;

            video.height = 150;

            

            _bg.alpha = 0.5;

            

            _buttonShot.addEventListener(MouseEvent.CLICK, savePicture);

            _buttonClose.addEventListener(MouseEvent.CLICK, window_onClose);

            _bg.addEventListener(MouseEvent.MOUSE_DOWN, window_onMove);

        }

        

        /* IDEが生成したオブジェクトを関連づけ */

        public function link_ide_obj() {

            this._buttonShot = buttonShot;

            this._textAreaLog = textAreaLog;

            this._bg = bg;

            this._buttonClose = buttonClose;

        }

        

        /* 現在の表示をファイルに保存 */

        public function savePicture(e:Event) {

            _buttonShot.enabled = false;

            var bmd:BitmapData = new BitmapData(cam.width, cam.height);

            bmd.draw(video);

            var encoder:JPGEncoder = new JPGEncoder(95);

            try{

                var bytes:ByteArray = encoder.encode(bmd);

                var file:File = new File();

                var now:Date = new Date();

                file.nativePath = File.applicationDirectory.nativePath + File.separator + now.time + ".jpg";

                var fs:FileStream = new FileStream();

                fs.open(file, FileMode.UPDATE);

                fs.writeBytes(bytes, 0, bytes.length);

                fs.close();

                trace("saved! => " + file.nativePath);

            }

            catch (e:Error) {

                trace(e.message);

            }

            _buttonShot.enabled = true;

        }

        

        public function window_onClose(e:Event) {

            stage.nativeWindow.close();

        }

        

        public function window_onMove(e:Event) {

            stage.nativeWindow.startMove();

        }

        

        

        public function trace(message:String) {

            _textAreaLog.text = message + "¥n" + _textAreaLog.text;

        }

    }

}

]]> http://shokai.org/blog/archives/1479/feed 0 http://shokai.org/blog/archives/1416 http://shokai.org/blog/archives/1416#comments Mon, 03 Sep 2007 20:39:47 +0000 moblog http://shlog.sakura.ne.jp/blog/?p=1416

昨日Flash CS3を買ったので、さっそくAS3でやってみた。

自分で1からBitmapDataクラスを使うのは初めてだったけどprocessingやってたお陰ですぐわかった。

一旦カメラの前からどいて、Save Backgroundボタンを押してみてください



うまくいくとこうなってるはず



■SourceCode (Flash CS3 / AS3)



1フレーム目。左の大きなビデオ(camDebug)とは別に、画面に表示していない200×150の小さなVideoオブジェクト(camVideo)がある。そこからBitmapDataを作って、背景差分法で処理する。処理した結果を画面右のBitmapオブジェクトに表示して、ついでにぼかしフィルタ(blur)をかけた。

背景差分法は、単純に1度保存しておいたBitmapData(bgBmd)と現在の表示(nowBmd)を1ピクセルずつ比較して、差がある所だけ黒くしている。大体Processingの時と同じ。

varthreshold:int=30;//影化のしきい値

labelThreshold.text=”threshold:”+threshold.toString();

varcam:Camera=Camera.getCamera();

cam.setMode(640,480,24,true);//24fps

cam.setQuality(0,100);

varcamVideo:Video=newVideo(200,150);//bitmap計算用

camVideo.attachCamera(cam);

camDebug.attachCamera(cam);//デバッグ用の表示

varbgBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

varnowBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

varshadowBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

//結果表示用

varshadowBmp:Bitmap=newBitmap(shadowBmd);//bmdを操作すると逐次bmpに反映される

shadowBmp.x=400;

shadowBmp.width=400;

shadowBmp.height=300;

this.addChild(shadowBmp);

varblur:BlurFilter=newBlurFilter();//ぼかしフィルタ

blur.blurX=5;

blur.blurY=5;

blur.quality=BitmapFilterQuality.MEDIUM;

shadowBmp.filters=[blur];

buttonSaveBg.addEventListener(MouseEvent.CLICK,saveBg);

functionsaveBg(e:Event){

trace(“saveBg()”);

bgBmd.draw(camVideo);//背景再取得

}

functioncomparePixels(a:int,b:int,threshold:int):Boolean{

vara_red:int=a>>16&0xFF;

varb_red:int=b>>16&0xFF;

vara_green:int=a>>8&0xFF;

varb_green:int=b>>8&0xFF;

vara_blue:int=a&0xFF;

varb_blue:int=b&0xFF;

if((a_red>b_red&&a_red-b_red>threshold)||(a_redthreshold)||

(a_green>b_green&&a_green-b_green>threshold)||(a_greenthreshold)||

(a_blue>b_blue&&a_blue-b_blue>threshold)||(a_bluethreshold)

)returntrue;//色に差がある時

elsereturnfalse;//色に差が無い時

}

this.addEventListener(Event.ENTER_FRAME,reload);//毎フレーム実行イベント

functionreload(e:Event){

//背景差分法で変化のあったピクセルを検出、黒く塗りつぶす

nowBmd.draw(camVideo);

shadowBmd.lock();//bitmap操作中は表示に反映させない

for(vary:int=0;y
for(varx:int=0;x
if(comparePixels(bgBmd.getPixel(x,y),nowBmd.getPixel(x,y),threshold)){

shadowBmd.setPixel(x,y,0xFF000000);

}

else{

shadowBmd.setPixel(x,y,0xFFFFFF90);

}

}

}

shadowBmd.unlock();

}

buttonInc.addEventListener(MouseEvent.CLICK,

function(){

if(threshold<128)labelThreshold.text="threshold:"+(++threshold).toString();

});

buttonDec.addEventListener(MouseEvent.CLICK,

function(){

if(threshold>0)labelThreshold.text=”threshold:”+(–threshold).toString();

});

あとMath.abs()の動作がおかしくて、comparePixels()の所で使えなかったので長いif文になってしまった。

■参考

・ActionScript3.0で動体検知 01 (Unknown Quality)

・flashrod – AS3で画像処理入門(1)

・flashrod – 2006-11-17

・s.h.log: Proce55ingで背景差分法

]]> http://shokai.org/blog/archives/1416/feed 0