Webカメラからの入力動画に対してActionScriptで色彩変換を行う

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。

KBMJの佐藤です。

今回はActionScript3.0を使って、

Webカメラからの入力動画に対して色彩変換を行ってみます。

ソースコード

package{
    import flash.display.*;
    import flash.events.*;
    import flash.media.*;
    import flash.system.*;
    import flash.text.*;
    import flash.geom.*;
    import flash.filters.*;

    [SWF(width="640", height="480")]

    public class Threshold extends Sprite {
	private var video:Video;
	private var camera:Camera;
	private var msg:String;
	public var txtArea:TextField = new TextField();
	public var bdTmp:BitmapData;
	public var bmp:Bitmap;

	public function Threshold()
	{
	    stage.scaleMode = StageScaleMode.NO_SCALE;
	    stage.align = StageAlign.TOP_LEFT;

	    // (1)
	    camera = Camera.getCamera();

	    if(camera != null){
		camera.addEventListener(StatusEvent.STATUS, statusHandler);
		camera.setMode(640, 480, 15);
		camera.setMotionLevel(10);
		camera.setQuality(0, 50);

		// (2)
		video = new Video(camera.width, camera.height);
		video.attachCamera(camera);

		addEventListener(Event.ENTER_FRAME, tick);
	    }else{
		msg = "使用可能なカメラがありません。";
		txtArea.text = msg;
	    }

	    txtArea.autoSize = TextFieldAutoSize.LEFT;
	    txtArea.text = "Threshold";
	    txtArea.textColor = 0xffffff;
	    txtArea.x = 2;
	    txtArea.y = this.height - txtArea.textHeight - 10;
	    this.addChild(txtArea);

	    // (3)
	    bdTmp = new BitmapData(video.width, video.height, false, 0xffffff);
	    bmp = new Bitmap(bdTmp);
	    this.addChild(bmp);
	}

	private function statusHandler(evt:StatusEvent):void{
	    if(camera.muted){
		msg = "カメラへのアクセスが拒否されました。";
		msg += "カメラの映像を表示するにはアクセスを許可してください。";
		txtArea.text = msg;
		Security.showSettings(SecurityPanel.PRIVACY);
	    }else{
		msg = "使用中のカメラ : " + camera.name + "\n";
		msg += "幅x高さ : " + camera.width + "x" + camera.width;
		txtArea.text = msg;
	    }
	}

	private function tick(event:Event):void{
	    if(video == null || camera == null){
		return;
	    }
	    if(camera.muted == true){
		return;
	    }

	    // (4)
	    bdTmp.draw(video);

	    // (5)
	    var rect:Rectangle = new Rectangle(bmp.width/2, 0, 
					       bmp.width/2, bmp.height);
	    var target:Point = new Point(bmp.width/2, 0);

	    // (6)
	    var filter:ColorMatrixFilter = new ColorMatrixFilter();
	    filter.matrix = new Array(1, 0, 0, 0);

	    // (7)
	    bdTmp.applyFilter(bdTmp, rect, target, filter);
	}
    }
}

コード解説(1)

camera = Camera.getCamera();

Webカメラに対して各種操作の行えるCameraオブジェクトを取得します。

コード解説(2)

video = new Video(camera.width, camera.height);
video.attachCamera(camera);

Webカメラからの入力映像をVideoオブジェクトに流し込みます。

コード解説(3)

bdTmp = new BitmapData(video.width, video.height, false, 0xffffff);
bmp = new Bitmap(bdTmp);
this.addChild(bmp);

画像操作用のバッファとしてBitmapDataオブジェクトを作成し、

Bitmapオブジェクトにひも付け、画面に表示します。

コード解説(4)

bdTmp.draw(video);

Videoオブジェクトの内容をBitmapDataオブジェクトにコピーします。

コード解説(5)

var rect:Rectangle = new Rectangle(bmp.width/2, 0, 
                                   bmp.width/2, bmp.height);
var target:Point = new Point(bmp.width/2, 0);

フィルタを適用するための矩形と座標を決定します。

コード解説(6)

var filter:ColorMatrixFilter = new ColorMatrixFilter();
filter.matrix = new Array(1, 0, 0, 0);

画素に対して変換を施すためのフィルタを作成し、

そのフィルタで用いる変換用の行列を設定します。

これは各ピクセルのRGBAカラー値に対して適用するための4×5行列であり、

これによって新しいRGBAカラー値を得ることができます。

コード解説(7)

bdTmp.applyFilter(bdTmp, rect, target, filter);

BitmapDataオブジェクトに対してフィルタを適用します。

この際、矩形と座標も同時に指定します。

さいごに

ColorMatrixFilterを使えば、

彩度変更、色相回転、輝度アルファ変換など、各種効果を汎用的に施すことができます。

皆さんも是非試してみて下さい。

個人ブログ 拡張現実ライフ