崖っぷちWEBデザイナーブログ

大阪てら子 22 「webカメラで遊ぼう！」に参加してきました。
毎度ながら、スイマセン！的な発表なんですが、今回もスイマセンです。

今回やっておきたかったことは以下の２点。

Webカメラで撮った画像を保存。
シンプルな動体検知

こんなものを発表しました動画

Webカメラで撮った画像を保存

Flashのみで画像保存はFlash Player9の段階では不可能？みたいなので、サーバー側(php)で保存します。
※Flash Player10からはローカルファイルアクセス機能が出来るようになったので画像保存できるかもしれない。

１、BitmapDataをエンコードしてサーバーへ送信
２、サーバー側で画像保存
※サーバーはローカルにMAMPをインストールした環境を使用しました。（mac 0SX）

Flash→PHPの連携はパラメーターの引き渡しが簡単に出来るAMFPHPを使ってみました。エンコードに関しては、as3corelibよりPNGEncoderを使用しています。

主要部分のASスクリプト

package
{
	import com.adobe.images.PNGEncoder;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.net.NetConnection;
	import flash.net.Responder;
	import flash.utils.ByteArray;
	
	public class Test_amfphp extends Sprite
	{
		public function Test_amfphp()
		{
			//BitmapDataをエンコード
			var bmd:BitmapData = new BitmapData(100,100,false,0x0)
			var byteArray:ByteArray = PNGEncoder.encode(bmd);
			
			//AMFPHPのgateway.phpがある場所
			var gateway:String = "http://localhost/amfphp/gateway.php";
			
			//AMFPHPが返す値の受け皿を設定
			var responder:Responder = new Responder(_onResult,_onStatus);
			
			//つなげる。
			var connection:NetConnection = new NetConnection();
			connection.connect(gateway);
			
			//呼ぶ
			connection.call("PHPクラス名.メソッド名",responder,byteArray,"その他引数１","その他引数２");
		}
		
		private function _onResult($result:Object):void {
			trace("結果_" + $result);
		}
		
		private function _onStatus($status:Object):void {
			trace("ステータス_" + $status);
		}

	}
}

画像保存のphpスクリプト

class PngSave
{
    public function download($image,$dir)
    {
        $fileName = $dir."hae.png"; // ファイル名
        
        //方法1
        $fp = fopen($fileName, 'wb');
        fwrite($fp, $image->data);
        fclose($fp);
        
        //方法2 ブラウザからじゃないと上手くいかない？
        //$im = imagecreatefromstring ($image->data);
        //header('Content-Type: image/png');
        //header("Content-Disposition: attachment; filename=".$fileName);
        //imagepng($im);
        
        return $fileName;
    }
}

ActionScript側からAMFPHPにByteArrayを飛ばした時、$image->dataにデータが入ってます。※$imageと指定してハマりました。
参考：AMFPHP1.9b2でByteArrayをもらう、返す　

シンプルな動体検知

動体検知ですが、検知する場所を決めて、その場所のピクセルの色が一つ前の色と最新の色とで、どれだけ変化しているか？で判断しています。
今回の場合、画面の左、上、右の３カ所に検知するポイントを置いて、そこのピクセルの色が一定以上変化したかどうか？で動体検知を行いました。

動体検知判断のASスクリプト

package
{
	import flash.display.Sprite;
	
	public class Test_ColorDiff extends Sprite
	{
		public function Test_ColorDiff()
		{
			//古い色と最新の色
			var color_old:uint = 0xFFFFFF;
			var color_new:uint = 0xFFFF00;
			
			//古い色をR,G,Bに分ける
			var color_old_arr:Array = [ 
				color_old >> 16 , 
				color_old >> 8 & 0xFF ,
				color_old & 0xFF ,
				];
			trace("old-R_" + color_old_arr[0]); //255
			trace("old-G_" + color_old_arr[1]); //255
			trace("old-B_" + color_old_arr[2]); //255
			
			//新しいい色をR,G,Bに分ける
			var color_new_arr:Array = [ 
				color_new >> 16 , 
				color_new >> 8 & 0xFF ,
				color_new & 0xFF ,
				];
			trace("new-R_" + color_new_arr[0]); //255
			trace("new-G_" + color_new_arr[1]); //255
			trace("new-B_" + color_new_arr[2]); //0
			
			//R,G,Bそれぞれ古い色と新しい色を比較し、threshold_valueの値以上に差が出たら「動いた」と見なす。
			var threshold_value:Number = 20;
			for(var i:Number = 0;i <= 2;i++ ){
				if(Math.abs(color_old_arr[i] - color_new_arr[i]) > threshold_value ) {
					trace("動いた！");
				}
			}
			
		}
	}
}

てな感じです。