呵呵!临近毕业了,本人选择的毕业设计题目是(基于B/S模式的视频监控软件的设计与实现),对于这个题目,我打算用Flex+FMS(FlashMediaServer)进行开发,从今天起,本人会不定期的把一些成果拿出来与大家分享,有什么描述不妥的地方还请大家批评指正。
这次要解决的问题是FMS的视频流共享。问题的大概描述是:我们把被监控的一方叫做Server,对Flex熟悉的同学都知道,Flex中的<mx:VideoDisplay>+AS3.0中的Camera.getCamera()组合可以很容易的捕捉摄像头的视频数据并将其显示在<mx:VideoDisplay>中,但是这里有个问题,这里所谓的显示,只是基于本地机器,而捕捉摄像头的动作也只是捕捉本机的摄像头,我们要设计的视频监控软件是B/S模式,假如我们把编译好的swf文件放到WebAppServer下,用户远程访问,将看不到Server端的实时视频,这样至少从实时监控来说,就完全失去了意义!
解决思路:
创建两个文件,一个文件用来捕捉Server端的视频数据,并将其发布到FMS中,假设这段视频流名为wwww。
另一个文件用来显示给客户,其所起的作用就是播放Server端口发布到FMS的wwww视频流。
实现步骤:
1 在FMS_HOME/applications/下建立一个example文件夹,用来做本例的FMS工程实例。
2 编写<解决思路>中涉及的第一个文件server.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="571">
- <mx:Script>
- <![CDATA[
- import mx.core.UIComponent;
- import flash.media.Microphone ;
- import mx.controls.Alert ;
- import flash.display.Graphics ;
- //测试网络可行性
- private var conne:NetConnection = new NetConnection() ;
- private function xianshi():void {
- //必须 在AS3.0中默认的ObjectEncoding为AMF3,但是FMS不支持AMF3,所以
- //要显示的声明为AMF0
- conne.objectEncoding = ObjectEncoding.AMF0 ;
- //FMS所在机器的IP地址
- conne.connect("rtmp://172.30.209.75/example") ;
- conne.addEventListener(NetStatusEvent.NET_STATUS,chuli) ;
- }
- private var nnnns:NetStream = null ;//专门用来向连接到服务器的客户端提供共享视频流
- private var time:String = null ;//定义时间寄存器
- private function chuli(e:NetStatusEvent):void {
- var result:String = e.info.code ;
- switch(result) {
- case "NetConnection.Connect.Success":
- vd.attachCamera(Camera.getCamera()) ;
- nnnns = new NetStream(conne) ;
- nnnns.attachAudio(Microphone.getMicrophone()) ;
- nnnns.attachCamera(Camera.getCamera()) ;
- //播放server端的视频流
- nnnns.publish("wwww","live") ;
- break;
- case "NetStream.Play.StreamNotFound":
- Alert.show("失败") ;
- break;
- default :
- Alert.show("缺省") ;
- break ;
- }
- }
- //停止播放
- private function tingzhi():void {
- nnnns.close() ;
- conne.close() ;
- }
- ]]>
- </mx:Script>
- <mx:VideoDisplay x="0" y="0" width="264" height="213" id="vd"/>
- <mx:Button label="连接服务器" click="xianshi()" x="10" y="247">
- </mx:Button>
- <mx:Button click="tingzhi()" x="99" y="247" width="125" height="21" label="断开与服务器连接">
- </mx:Button>
- <mx:VideoDisplay x="285" y="11" width="276" height="202" id="vv"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="571"> <mx:Script> <![CDATA[ import mx.core.UIComponent; import flash.media.Microphone ; import mx.controls.Alert ; import flash.display.Graphics ; //测试网络可行性 private var conne:NetConnection = new NetConnection() ; private function xianshi():void { //必须 在AS3.0中默认的ObjectEncoding为AMF3,但是FMS不支持AMF3,所以 //要显示的声明为AMF0 conne.objectEncoding = ObjectEncoding.AMF0 ; //FMS所在机器的IP地址 conne.connect("rtmp://172.30.209.75/example") ; conne.addEventListener(NetStatusEvent.NET_STATUS,chuli) ; } private var nnnns:NetStream = null ;//专门用来向连接到服务器的客户端提供共享视频流 private var time:String = null ;//定义时间寄存器 private function chuli(e:NetStatusEvent):void { var result:String = e.info.code ; switch(result) { case "NetConnection.Connect.Success": vd.attachCamera(Camera.getCamera()) ; nnnns = new NetStream(conne) ; nnnns.attachAudio(Microphone.getMicrophone()) ; nnnns.attachCamera(Camera.getCamera()) ; //播放server端的视频流 nnnns.publish("wwww","live") ; break; case "NetStream.Play.StreamNotFound": Alert.show("失败") ; break; default : Alert.show("缺省") ; break ; } } //停止播放 private function tingzhi():void { nnnns.close() ; conne.close() ; } ]]> </mx:Script> <mx:VideoDisplay x="0" y="0" width="264" height="213" id="vd"/> <mx:Button label="连接服务器" click="xianshi()" x="10" y="247"> </mx:Button> <mx:Button click="tingzhi()" x="99" y="247" width="125" height="21" label="断开与服务器连接"> </mx:Button> <mx:VideoDisplay x="285" y="11" width="276" height="202" id="vv"/> </mx:Application>
3 编写<解决思路>中涉及的第二个文件client.mxml,此文件显示给用户远程观看
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- <mx:Script>
- <![CDATA[
- import mx.core.UIComponent;
- import flash.media.Microphone ;
- import mx.controls.Alert ;
- //测试网络可行性
- private var conne:NetConnection = new NetConnection() ;
- private function xianshi():void {
- conne.objectEncoding = ObjectEncoding.AMF0 ;
- conne.connect("rtmp://172.30.209.75/example") ;
- //网络连接时间处理器
- conne.addEventListener(NetStatusEvent.NET_STATUS,chuli) ;
- }
- private var nnnns:NetStream = null ;
- private function chuli(e:NetStatusEvent):void {
- var result:String = e.info.code ;
- switch(result) {
- case "NetConnection.Connect.Success":
- bofang() ;
- break;
- case "NetStream.Play.StreamNotFound":
- Alert.show("失败") ;
- break;
- default :
- Alert.show("缺省") ;
- break ;
- }
- }
- private function tingzhi():void {
- nnnns.close() ;
- conne.close() ;
- }
- //网络连接成功时 播放server端发布到FMS的wwww视频流
- private function bofang():void {
- nnnns = new NetStream(conne) ;
- var v:Video = new Video() ;
- v.attachNetStream(nnnns) ;
- v.width = 276 ;
- v.height = 202 ;
- vv.addChild(v) ;
- nnnns.play("wwww") ;
- }
- ]]>
- </mx:Script>
- <mx:VideoDisplay x="0" y="0" width="264" height="213" id="vd"/>
- <mx:Button label="连接服务器" click="xianshi()" x="72" y="247">
- </mx:Button>
- <mx:Button click="tingzhi()" x="190" y="247" width="123" height="21" label="断开与服务器连接">
- </mx:Button>
- <mx:VideoDisplay x="285" y="11" width="276" height="202" id="vv"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.core.UIComponent; import flash.media.Microphone ; import mx.controls.Alert ; //测试网络可行性 private var conne:NetConnection = new NetConnection() ; private function xianshi():void { conne.objectEncoding = ObjectEncoding.AMF0 ; conne.connect("rtmp://172.30.209.75/example") ; //网络连接时间处理器 conne.addEventListener(NetStatusEvent.NET_STATUS,chuli) ; } private var nnnns:NetStream = null ; private function chuli(e:NetStatusEvent):void { var result:String = e.info.code ; switch(result) { case "NetConnection.Connect.Success": bofang() ; break; case "NetStream.Play.StreamNotFound": Alert.show("失败") ; break; default : Alert.show("缺省") ; break ; } } private function tingzhi():void { nnnns.close() ; conne.close() ; } //网络连接成功时 播放server端发布到FMS的wwww视频流 private function bofang():void { nnnns = new NetStream(conne) ; var v:Video = new Video() ; v.attachNetStream(nnnns) ; v.width = 276 ; v.height = 202 ; vv.addChild(v) ; nnnns.play("wwww") ; } ]]> </mx:Script> <mx:VideoDisplay x="0" y="0" width="264" height="213" id="vd"/> <mx:Button label="连接服务器" click="xianshi()" x="72" y="247"> </mx:Button> <mx:Button click="tingzhi()" x="190" y="247" width="123" height="21" label="断开与服务器连接"> </mx:Button> <mx:VideoDisplay x="285" y="11" width="276" height="202" id="vv"/> </mx:Application>
4 启动FMS,打开编译好的server.swf,先点击按钮:连接服务器
5 把编译好的client.swf拷贝到任何客户端,然后点击按钮:连接服务器,即可以看到server端传送过来的视频流。
如果想要部署swf文件到WebApplication下,可以把FlexBuilder工程目录下的server.html和client.html拷贝到相应的目录,然后通过URL访问。
好了,关于FMS视频流共享的问题到此为止,各位有何疑问,不妨留言一起探讨!下一次我将解决怎样在不切断server端输出流的情况下进行视频录像。