Flex手机项目 - 调用摄像头拍照，并显示

2015-01-06 发布：hangge 阅读：785

as3中，使用flash.media.CameraUI类，可以使用设备摄像头将图像加载到应用程序中，下面两个是该类重要的API功能：

1，CameraUI.isSupported：用于确定是否可以启用原生摄像头

2，CameraUI.launch()：用于启动摄像头应用程序

下面是一个简单的demo，效果图如下：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		creationComplete="onCreationComplete()"
		title="摄像头">
	<fx:Script>
		<![CDATA[
			import flash.media.CameraUI; 
			
			private var cameraUI:CameraUI;
			private var mediaLoader:Loader;
			
			/**
			 * 页面初始化
			 */
			private function onCreationComplete():void
			{
				//判断是否支持摄像头
				if (CameraUI.isSupported)
				{
					cameraUI = new CameraUI();
					cameraUI.addEventListener(MediaEvent.COMPLETE, onComplete);
				}
			}
			
			/**
			 * 打开摄像头
			 */
			private function launchCamera():void
			{
				if (CameraUI.isSupported)
				{
					cameraUI.launch(MediaType.IMAGE);
				}
			}
			
			/**
			 * 拍照完毕响应函数
			 */
			private function onComplete(e:MediaEvent):void
			{   
				var promiseObj:MediaPromise = e.data as MediaPromise;
				//capturedImage.source = promiseObj.file.url;
				//为什么不用, e.data.file得到一个File对象呢,因为只能在Android系统下工作,
				//在IOS系统不工作,所以我们用MediaPromise,loadFilePromise得到图片.
				mediaLoader = new Loader();
				mediaLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mediaPromisLoadHandler);
				//加载照片
				mediaLoader.loadFilePromise(promiseObj);
			} 
			
			/**
			 * 照片加载完毕响应函数
			 */
			private function mediaPromisLoadHandler(e:Event):void{
				mediaLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, mediaPromisLoadHandler);
				var mediaLoaderInfo:LoaderInfo = e.target as LoaderInfo;
				capturedImage.source = mediaLoaderInfo.loader;
				capturedImage.width = this.width - 10;   
				capturedImage.height = this.height/2 - 10; 
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20"/>
	</s:layout>
	
	<s:VGroup horizontalAlign="center" width="100%">
		
		<s:Label id="description" text="拍照并在下方显示...." width="100%" height="25"/>
		
		<s:Image id="capturedImage" backgroundColor="#000000"/>
		
		<s:Button label="打开摄像头" click="launchCamera()"  width="100%" height="75"/>
		
	</s:VGroup>
</s:View>