使用Flex4开启用户的摄像头，并且拍照保存

1.先来做一个最简单的例子，开启摄像头，并且拍照显示在Image组件中

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" height="658">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import flash.net.navigateToURL;
			
			import mx.events.FlexEvent;
			import mx.graphics.codec.JPEGEncoder;
			
			private var cam:Camera;

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				cam = Camera.getCamera();
				var video:Video = new Video();
				video.attachCamera(cam);

				vd.addChild(video);
			}


			protected function button1_clickHandler(event:MouseEvent):void
			{
				var bitmapData:BitmapData = new BitmapData(vd.width,vd.height);
				bitmapData.draw(vd);
				
				var jpeg:JPEGEncoder = new JPEGEncoder(100);
				var byteArray:ByteArray = jpeg.encode(bitmapData);				
				img.source = byteArray;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:VideoDisplay id="vd" x="128" y="6" width="385" height="300"/>
	<s:Button x="33" y="111" label="保存" click="button1_clickHandler(event)"/>
	<mx:Image id="img" x="127" y="320" width="385" height="300"/>
</s:Application>

 

首先开启用户的摄像头，在VideoDisplay组件中显示，然后把VideoDisplay中的图像保存为BitmapData，最后转换为ByteArray类型的数据显示在Image组件中

Flex4开启用户摄像头的代码跟Flex3稍有差别，Flex3可以通过vd.attachCamera(cam);开启摄像头 

 

2.改进这个例子，把拍照的图片保存在服务器中，或者提示用户下载

Flex4代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" height="658">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import flash.net.navigateToURL;
			
			import mx.events.FlexEvent;
			import mx.graphics.codec.JPEGEncoder;
			
			private var cam:Camera;

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				cam = Camera.getCamera();
				var video:Video = new Video();
				video.attachCamera(cam);

				vd.addChild(video);
			}


			protected function button1_clickHandler(event:MouseEvent):void
			{
				var bitmapData:BitmapData = new BitmapData(vd.width,vd.height);
				bitmapData.draw(vd);
				
				var jpeg:JPEGEncoder = new JPEGEncoder(100);
				var byteArray:ByteArray = jpeg.encode(bitmapData);
				
				var urlrequest:URLRequest = new URLRequest("http://localhost:8080/demo/FlexTest1.action");
				urlrequest.contentType = 'applicatoin/octet-stream';
				urlrequest.method = URLRequestMethod.POST;
				urlrequest.data = byteArray;
				navigateToURL(urlrequest);
				
				img.source = byteArray;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:VideoDisplay id="vd" x="128" y="6" width="385" height="300"/>
	<s:Button x="33" y="111" label="保存" click="button1_clickHandler(event)"/>
	<mx:Image id="img" x="127" y="320" width="385" height="300"/>
</s:Application>

 

Java代码（struts2框架）：

package com.ruiri.setup.web.action;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.InputStream;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class FlexTest1Action extends ActionSupport {
	
	private InputStream inputStream;
	private String contentType;
	private String filename;
	
	@Override
	public String execute() throws Exception {
		filename = "pic.jpg";
		contentType = "application/octet-stream";
		HttpServletRequest request =  ServletActionContext.getRequest();
		inputStream = request.getInputStream();
		
		// 保存图片
		BufferedImage bufferedImage = ImageIO.read(request.getInputStream());
		ImageIO.write(bufferedImage, "jpeg", new File("d:\\pic.jpg"));
		
		return "file";
	}

	public InputStream getInputStream() {
		return inputStream;
	}

	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}

	public String getContentType() {
		return contentType;
	}

	public void setContentType(String contentType) {
		this.contentType = contentType;
	}

	public String getFilename() {
		return filename;
	}
}

Java中配置文件struts.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="default" namespace="/" extends="struts-default">
		<global-results>			
			<result name="file" type="stream">
				<param name="contentType">
					${contentType}
				</param>
				<param name="inputName">inputStream</param>
				<param name="contentDisposition">
					attachment;filename="${filename}"
				</param>
				<param name="bufferSize">1024</param>
			</result>
		</global-results>
		
	</package>
</struts>

Flex中ByteArray数据传到Java中，真是颇费周折，网上查了很多方法，自己也尝试多种方法，说的最多的是在Java中通过byte[]可以获取到，我没有试成功。

最后通过urlrequest.data = byteArray;直接把byteArray传递过去，在java里面通过request.getInputStream();得到数据

不过保存的图片还有些瑕疵，图片会多出来一片空白，不过总算是保存成功了，先庆祝一下吧，以后再慢慢研究：）