使用Flex来控制摄像头拍照的例子

先看一个网上flex摄像头拍照上传到数据库的例子：

后台Java版本：

http://blog.youkuaiyun.com/novelly/archive/2009/07/29/4389379.aspx#

后台C#版本：

http://www.why100000.com/Htmls/tabActionscript29.htm

 

这里将演示一个配合FMS3传输协议实现Flex与Flash通讯的例子：

通过这个协议能实现实时视频聊天，详细请参考本文底部资料。

1.关于Flash Media Server3服务器：

资料：http://www.cnblogs.com/beniao/archive/2009/02/17/1355911.html

 

2.关于RTMP（Real-Time Messaging Protocol）协议：

资料：

http://en.wikipedia.org/wiki/Real_Time_Messaging_Protocol

http://d1.it168.com/show/22258.html

 

方法如下：

a.安装FMS3服务器：

下载地址：http://www.adobe.com/products/flashmediaserver

 

b.启动服务器：

可通过开始菜单里面的Adobe ---> Flash Media Server 3 ---> Start Server 启动

 

c.设置摄像头(驱动)，麦克风，声卡等。

 

d.Flex代码：

创建发布视频的Flex应用程序，代码如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF" width="230" height="240" fontSize="12" creationComplete="init();"> <mx:Script> <!--[CDATA[ import flash.events.MouseEvent; import flash.events.NetStatusEvent; import flash.net.NetConnection; import flash.net.NetStream; import flash.media.Camera; import mx.controls.ToolTip; import mx.managers.ToolTipManager; private var my_nc:NetConnection; private var my_Cam:Camera; private var out_ns:NetStream; private var myTip:ToolTip private function init():void { //初始化 //使用下面的这两行语句用于本地察看视频数据 my_Cam = Camera.getCamera(); live_video.attachCamera(my_Cam); //创建一个NetConnection实例，并定义状态事件 //并连接到服务器上的通讯应用程序 my_nc = new NetConnection(); my_nc.addEventListener("netStatus",onNetStatus); my_nc.connect("rtmp://myHost/live_publish_video/"); } //响应连接状态事件处理函数 private function onNetStatus(evt:NetStatusEvent):void { var info:Object = evt.info; //根据返回的状态代码改变连接状态标示，同时改变按钮状态 if (info.code == "NetConnection.Connect.Closed") { displayTip("error"); start_btn.enabled = false; } else if (info.code == "NetConnection.Connect.Success"){ displayTip(null); start_btn.enabled = true; } }; //定义一个函数用于显示连接状态 private function displayTip(conn:String):void { if(myTip!=null){ //删除ToolTip ToolTipManager.destroyToolTip(myTip); } //创建ToolTip以显示连接是否成功 if(conn==null){ myTip = ToolTipManager.createToolTip("连接成功",120,15); (myTip as ToolTip).setStyle("backgroundColor",0x00FF00); }else{ myTip = ToolTipManager.createToolTip("连接失败", 120 , 15, "errorTipRight"); } //为ToolTip定义样式 (myTip as ToolTip).setStyle("fontSize","12"); (myTip as ToolTip).setStyle("fontWeight","Normal"); (myTip as ToolTip).setStyle("paddingTop",1); //为ToolTip定义宽度和高度 (myTip as ToolTip).width = 80; (myTip as ToolTip).height = 26; } //下面的代码分别响应按钮事件 private function onStop(evt:MouseEvent):void { //停止发布 out_ns.publish(null); //关闭流 out_ns.close(); //通知Flash Player停止捕捉视频 out_ns.attachCamera(null); }; private function onStart(evt:MouseEvent):void { //1、创建一个NetStream实例用于发布视频流 //该实例使用创建的NetConnection连接my_nc out_ns = new NetStream(my_nc); //2、将捕捉到照相机视频赋给NetStream实例 out_ns.attachCamera(my_Cam); //3、开始发布视频流 out_ns.publish("myTestStream"); //这个事件函数可以用来检测NetStream状态 out_ns.addEventListener("netStatus",onNetStatus); }; ]]--> </mx:Script> <mx:Panel title="实时发布视频" layout="absolute" x="15" y="10" width="200" height="220"> <mx:VideoDisplay id="live_video" x="10" y="10" width="160" height="120"/> <mx:Button id="start_btn" x="10" y="145" label="开始发布" click="onStart(event);"/> <mx:Button id="stop_btn" x="92" y="145" label="停止发布" click="onStop(event);"/> </mx:Panel> </mx:Application>

创建订阅视频的Flex应用程序，代码如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF" width="230" height="240" fontSize="12" creationComplete="init();"> <mx:Script> <!--[CDATA[ import flash.events.MouseEvent; import flash.events.NetStatusEvent; import flash.net.NetConnection; import flash.net.NetStream; import mx.controls.ToolTip; import mx.managers.ToolTipManager; import mx.core.UIComponent; private var my_nc:NetConnection; private var in_ns:NetStream; private var vid:Video; private var myTip:ToolTip private function init():void { //初始化 //创建一个NetConnection实例，并定义状态事件 //并连接到服务器上的通讯应用程序 my_nc = new NetConnection(); my_nc.addEventListener("netStatus",onNetStatus); my_nc.connect("rtmp://myHost/live_publish_video/"); } //响应连接状态事件处理函数 private function onNetStatus(evt:NetStatusEvent):void { var info:Object = evt.info; //根据返回的状态代码改变连接状态标示，同时改变按钮状态 if (info.code == "NetConnection.Connect.Closed") { displayTip("error"); start_btn.enabled = false; } else if (info.code == "NetConnection.Connect.Success"){ displayTip(null); start_btn.enabled = true; } }; //定义一个函数用于显示连接状态 private function displayTip(conn:String):void { if(myTip!=null){ //删除ToolTip ToolTipManager.destroyToolTip(myTip); } //创建ToolTip if(conn==null){ myTip = ToolTipManager.createToolTip("连接成功",120,15); (myTip as ToolTip).setStyle("backgroundColor",0x00FF00); }else{ myTip = ToolTipManager.createToolTip("连接失败", 120 , 15, "errorTipRight"); } //为ToolTip定义样式 (myTip as ToolTip).setStyle("fontSize","12"); (myTip as ToolTip).setStyle("fontWeight","Normal"); (myTip as ToolTip).setStyle("paddingTop",1); //为ToolTip定义宽度和高度 (myTip as ToolTip).width = 80; (myTip as ToolTip).height = 26; } //下面的代码分别响应按钮事件 private function onStop(evt:MouseEvent):void { //关闭流 in_ns.close(); //清除video实例显示的图像 vid.clear(); }; private function onStart(evt:MouseEvent):void { //1、创建一个NetStream实例用于订阅发布的视频流 //该实例使用创建的NetConnection连接 in_ns = new NetStream(my_nc); //2、将订阅的视频流赋给舞台上的video实例 //VideoDisplay组件不能使用attachNetStream()方法 //所以，动态添加了一个Video对象 vid = new Video(); vid.width = 160; vid.height = 120; vid.x = 35; vid.y = 50; vid.attachNetStream(in_ns); //添加到显示列表 var ui:UIComponent=new UIComponent(); ui.addChild(vid); this.addChild(ui); //3、开始播放订阅的视频流 in_ns.play("myTestStream"); //这个事件函数可以用来检测NetStream状态 in_ns.addEventListener("netStatus",onNetStatus); }; ]]--> </mx:Script> <mx:Panel title="浏览实时视频" layout="absolute" x="15" y="10" width="200" height="220"> <mx:Button id="start_btn" x="10" y="145" label="开始订阅" click="onStart(event);"/> <mx:Button id="stop_btn" x="92" y="145" label="停止订阅" click="onStop(event);"/> </mx:Panel> </mx:Application>

其他代码（综合）：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF" width="230" height="240" fontSize="12" creationComplete="init();"> <mx:Script> <!--[CDATA[ import flash.events.MouseEvent; import flash.events.NetStatusEvent; import flash.net.NetConnection; import flash.net.NetStream; import flash.media.Camera; import flash.media.Microphone; import mx.controls.ToolTip; import mx.managers.ToolTipManager; import mx.core.UIComponent; private var my_nc:NetConnection; private var out_ns:NetStream; private var in_ns:NetStream; private var vid:Video; private var myTip:ToolTip private function init():void { //初始化 //创建一个NetConnection实例，并定义状态事件 //并连接到服务器上的通讯应用程序 my_nc = new NetConnection(); my_nc.addEventListener("netStatus",onNetStatus); my_nc.connect("rtmp://myHost/live_publish_video/"); } //响应连接状态事件处理函数 private function onNetStatus(evt:NetStatusEvent):void { var info:Object = evt.info; //根据返回的状态代码改变连接状态标示，同时改变按钮状态 if (info.code == "NetConnection.Connect.Closed") { displayTip("error"); start_btn.enabled = false; } else if (info.code == "NetConnection.Connect.Success"){ displayTip(null); start_btn.enabled = true; } }; //定义一个函数用于显示连接状态 private function displayTip(conn:String):void { if(myTip!=null){ //删除ToolTip ToolTipManager.destroyToolTip(myTip); } //创建ToolTip以显示连接是否成功 if(conn==null){ myTip = ToolTipManager.createToolTip("连接成功",120,15); (myTip as ToolTip).setStyle("backgroundColor",0x00FF00); }else{ myTip = ToolTipManager.createToolTip("连接失败", 120 , 15, "errorTipRight"); } //为ToolTip定义样式 (myTip as ToolTip).setStyle("fontSize","12"); (myTip as ToolTip).setStyle("fontWeight","Normal"); (myTip as ToolTip).setStyle("paddingTop",1); //为ToolTip定义宽度和高度 (myTip as ToolTip).width = 80; (myTip as ToolTip).height = 26; } //下面的代码分别响应按钮事件 private function onStop(evt:MouseEvent):void { //关闭流 in_ns.close(); //清除video实例显示的图像 vid.clear(); //=============================================== //停止发布 out_ns.publish(null); //关闭流 out_ns.close(); //通知Flash Player停止捕捉视频、音频 out_ns.attachCamera(null); out_ns.attachAudio(null); }; private function onStart(evt:MouseEvent):void { //1、创建一个NetStream实例用于发布视频流 //该实例使用创建的NetConnection连接my_nc out_ns = new NetStream(my_nc); //2、将捕捉到照相机视频、麦克风音频都赋给NetStream实例 out_ns.attachAudio(Microphone.getMicrophone()); out_ns.attachCamera(Camera.getCamera()); //3、开始发布视频流 out_ns.publish("myTestStream"); //这个事件函数可以用来检测NetStream状态 out_ns.addEventListener("netStatus",onNetStatus); //=============================================== //1、创建一个NetStream实例用于订阅发布的视频流 //该实例使用创建的NetConnection连接 in_ns = new NetStream(my_nc); //2、将订阅的视频流赋给舞台上的video实例 //VideoDisplay组件不能使用attachNetStream()方法 //所以，动态添加了一个Video对象 vid = new Video(); vid.width = 160; vid.height = 120; vid.x = 35; vid.y = 50; vid.attachNetStream(in_ns); //添加到显示列表 var ui:UIComponent=new UIComponent(); ui.addChild(vid); this.addChild(ui); //3、开始播放订阅的视频流 in_ns.play("myTestStream"); //这个事件函数可以用来检测NetStream状态 in_ns.addEventListener("netStatus",onNetStatus); }; ]]--> </mx:Script> <mx:Panel title="实时发布视频" layout="absolute" x="15" y="10" width="200" height="220"> <mx:VideoDisplay id="live_video" x="10" y="10" width="160" height="120"/> <mx:Button id="start_btn" x="10" y="145" label="开始发布" click="onStart(event);"/> <mx:Button id="stop_btn" x="92" y="145" label="停止发布" click="onStop(event);"/> </mx:Panel> </mx:Application>

 

其他参考资料：

http://www.docin.com/p-33146326.html

http://tech.ddvip.com/2009-03/1236772256111097.html

http://www.chinaz.com/Design/Video/042a41162009.html

http://www.west263.com/info/html/wangyezhizuo/Flash/20090513/121488_4.html

http://www.chinaz.com/Design/Video/0505J6022009_3.html