SQLの窓 イラストAC フリー素材

2012年05月21日

AIR Flex4 で WEB カメラを最も簡単に実装する方法

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

VideoDisplay を使って、ムービを簡単に再生できましたが、ムービーをロードした状態からだと、特に難しい事を意識しなくてもWEB カメラを表示できます。ダミーでお好きな画像が初期表示される mp4 等を用意すれば OK です。







撮影した画像





Panel を画像化しているので全体が画像化されています。撮影ボタンを押すと、ファイルを保存する為のダイアログが表示されるので、このままではつかいにくいので注意して下さい。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData();"

	usePreloader="true"
	showStatusBar="false"

	titleIcon="{imgSmile}"
	title="最も簡単なカメラのキャプチャ"

	skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel {
	backgroundColor:black;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import mx.controls.Alert;
	import mx.logging.targets.*;
	import mx.logging.*;

//	import spark.skins.spark.*;

	[Bindable]
	[Embed("smile.png")]
	private static var imgSmile:Class;
	private var nSize:int = 1;
	private var rootObject:WindowedApplication;
	private	var nativeMenu:ContextMenu;

	private var logger:ILogger = Log.getLogger("MyLogger");

	import flash.media.Camera;
	private var camera:Camera;
	import mx.graphics.codec.PNGEncoder;
	private var fRef:FileReference;

	private var initActive:Boolean = true;

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

//		this.setStyle( "skinClass", SparkChromeWindowedApplicationSkin );

		// メッセージ
		logger.info( "initData() が実行されました" );

		// Mainw.xml の値を変更
//		this.height = 600;

		// ファイルリファレンスの準備
		fRef = new FileReference();
		// ファイル保存用ダイアログを表示して保存する
		fRef.addEventListener(Event.OPEN, function(e:Event):void {} );
		fRef.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
		fRef.addEventListener(Event.COMPLETE, function(e:Event):void {
			logger.info("保存が完了しました" );
		} );
		fRef.addEventListener(Event.CANCEL, function(e:Event):void {} );
		fRef.addEventListener(Event.SELECT, function(e:Event):void {
			logger.info("保存します" );
		} );
		fRef.addEventListener(IOErrorEvent.IO_ERROR, fRefError );

		// *************************************************
		// コンテキストメニュー定義
		// *************************************************
		rootObject = WindowedApplication(mx.core.FlexGlobals.topLevelApplication)
		nativeMenu = new ContextMenu();
		nativeMenu.hideBuiltInItems();

		addContextMenu(
			"x 1",
			function():void {
				changeSize(1);
			}
		);
		addContextMenu(
			"x 2",
			function():void {
				changeSize(2);
			}
		);
		addContextMenu(
			"x 0.5",
			function():void {
				changeSize(3);
			}
		);
		addContextMenu(
			"ベースを最大化",
			function():void {
				myVid.stage.displayState = 'fullScreen';
			}
		);
		addContextMenu(
			"ベースを標準",
			function():void {
				myVid.stage.displayState = 'normal';
			}
		);
		rootObject.contextMenu = nativeMenu;

	}

	// *********************************************************
	// コンテキストメニュー追加
	// *********************************************************
	public function addContextMenu(
		label:String,
		listener:Function
	):void {

		var menuItem:ContextMenuItem;
		menuItem = new ContextMenuItem(label);
		menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,listener);
		nativeMenu.customItems.push(menuItem);

	}

	// *********************************************************
	// サイズ変更
	// *********************************************************
	private function changeSize( nSize:int ):void {

		switch( nSize ) {
			case 1:
				myVid.width = myVid.videoObject.videoWidth;
				myVid.height = myVid.videoObject.videoHeight;
				break;
			case 2:
				myVid.width = myVid.videoObject.videoWidth * 2;
				myVid.height = myVid.videoObject.videoHeight * 2;
				break;
			case 3:
				myVid.width = myVid.videoObject.videoWidth / 2;
				myVid.height = myVid.videoObject.videoHeight / 2;
				break;
		}

	}


	// *********************************************************
	// カメラの初期化
	// *********************************************************
	public function initCamera():void {

		camera = Camera.getCamera();

		camera.addEventListener( flash.events.ActivityEvent.ACTIVITY, 
			function(event:flash.events.ActivityEvent):void {
			if ( event.activating ) {
					if ( initActive ) {
						changeSize(1);
						initActive = false;
					}
			}
		});

		if ( camera ) {
			camera.setMode(600, 400, 10, true);
			myVid.videoObject.attachCamera( camera );
		}

	}

	// *********************************************************
	// 撮影と保存
	// *********************************************************
	public function shot():void {

		var bitmap:Bitmap = new Bitmap();

		// アプリケーションウインドウ全体を画像化
		var bitmapData:BitmapData = new BitmapData(this.width, this.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(this);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		fRef.save( png, "shot.png" );

	}

	// *********************************************************
	// IOエラー
	// *********************************************************
	public function fRefError( e:IOErrorEvent ):void {
		Alert.show(e.text);
	}

]]>
</fx:Script>

<s:Panel
	title="VideoDisplay でカメラ撮影"
	percentHeight="100"
	percentWidth="100"
>
	<s:VGroup width="100%">

		<s:HGroup>
			<s:Button
				label="カメラ初期化"
				click="initCamera();"
				width="120"
			/>
			<s:Button
				label="撮影"
				click="shot();"
				width="120"
			/>
		</s:HGroup>

		<s:VideoDisplay
			id="myVid"
			autoPlay="false"
			source="sample.mp4"
		/>

	</s:VGroup>

</s:Panel>

</s:WindowedApplication>




タグ:AIR flex
【オワコンの最新記事】
posted by at 2012-05-21 20:58 | オワコン | このブログの読者になる | 更新情報をチェックする