FMS案例开发.doc

目 录FMS案例开发-视频聊天室（一）2一、概述2二、技术方案2三、功能需求分析2FMS3系列(二)：创建可交互的FMS连接3FMS3系列(三)：基于FMS的流媒体播放程序9FMS3系列(四)：在线视频录制、视频回放15FMS3系列(五)：通过FMS实现实时视频聊天20FMS3系列(六)：使用远程共享对象实现多人实时在线聊天24FMS案例开发-视频聊天室（一）一、概述互联网的不断发展，各种新技术的兴起，原本做管理软件的我也逐渐转向从事着互联网相关的运营产品的开发。尤其是目前抄得最火热的RIA领域技术，Adobe的Flash/Flex，微软银光，Sun的JavaFx，在这三者之间我选择了学习Adobe的产品。在我学习RIA技术的这段时间里前后写了ActionScript 3.0 Step By Step系列文章、Flex与.NET互操作系列文章、FMS3系列文章等文章，发现有不少朋友对这个领域技术都非常的喜欢，尤其是Flex。同时和我讨论了许多关于Flex/Flash相关问题，其中大部门问题都偏向于视频聊天、视频会议、视频直播、视频监控等方面的需求。这里我以视频聊天室为案例项目，通过几篇博客文章的形式和大家交流，希望对喜欢这方面的朋友有所帮助。同时欢迎各大高手参与讨论，相互交流、学习。二、技术方案媒体服务器：Flash Media Server 3技术选择：ActionScript3、Flex3、ASP.NET（C#）、WebService、FluorineFx数据库：Microsoft SQL Server 2005三、功能需求分析实现文字聊天（大厅聊天、私聊）、视频聊天、语音聊天、聊天表情。用户注册、用户登陆、用户退出。视频、语音聊天只能一对多（多个人可以同时和你建立视频连接），文字聊天则是多对多的设计，整个聊天大厅全部都可以看到。四、在线用户设计在线用户将通过FMS的共享对象（SharedObject）来实现。每当用户登陆成功后就用户信息添加到在线用户的共享对象保存，离开的时候则从共享对象里清除。五、文字聊天设计文字聊天将通过FMS的共享对象（SharedObject）来实现，详细请点击FMS3系列(六)：使用远程共享对象实现多人实时在线聊天查看。六、视频/语音聊天设计视频、语音的及时传输，FMS为我们提供了非常完善的解决方案。详细请点击FMS3系列(五)：通过FMS实现实时视频聊天查看七、聊天室功能扩展在实现基本的文字、语音和视频聊天的同时，为聊天室增加聊天表情、小游戏等。本文就先写到这里，下一篇FMS案例开发-视频聊天室（二）介绍数据库的设计和相关服务接口的开发。FMS3系列(二)：创建可交互的FMS连接在做FMS开发中，flash客户端与FMS服务器通信交互数据等是常见的，比如flash客户端需要一播放一个视频，需要获得FMS发向flash端的一条消息等。那么我们要怎么才能实现flash客户端与FMS服务器建立可交互的连接、通信呢?本文将以flash客户端于FMS服务器通信为核心,以经典的Hello World示例详细介绍flash客户端于FMS服务器通信的实现。要实现两端通信，在客户端和服务器端都需要编码，一边发起通信请求和接收通信响应信息(flash客户端),一端则提供接收请求进行业务处理等(FMS服务器端)。首先从flash客户端入手，本文的实例非常简单，要实现的功能就是flash客户端向FMS服务器端发起请求，调用FMS服务器上的一个方法，然后将FMS服务器上的方法返回值输出到控制台。flash端的开发可以有两种方式实现：Flash和Flex。本文会将这两种方式的实现都给出实例。首先看看Flash里的实现。启动Flash CS开发环境,新建立ActionScript 3.0的Flash文件，如下图：然后在上面新建立的ActionScript 3.0的Flash文件上，按F9进入动作面板(输入程序代码的地方,当然也可以将代码封装到单独的类文件里)，如下图：上图中已经将通过Flash开发连接到FMS服务器的代码全部贴出，代码很简单。NetConnection这个类在 Flash Player 和 Flash Media Server 应用程序之间或者 Flash Player 和运行 Flash Remoting 的应用程序服务器之间创建双向连接。通过NetConnection建立于FMS服务器的连接，然后使用NetConnection类的公共方法connect()通过RTMP协议连接到指定的FMS服务器上指定的应用，如上图示为连接的FMS服务器上名为的“HelloWorld”的这个应用。如果对NetConnection还不熟悉的朋友请先阅读下我的这系列文章的第一篇：FMS3系列(一)：FMS程序连接到FMS服务器，随后通过调用call()方法调用FMS服务器上的方法，这里通过调用服务器上提供的sayHelloWorld()方法。Responder 类提供了一个对象，该对象在 NetConnection.call() 中使用以处理来自与特定操作成功或失败相关的服务器的返回值。详细见构造Responder对象的时候构造方法的参数，一个方法处理操作成功的逻辑，一个方法处理操作失败的逻辑。OK，完成了上面的flash客户端的开发现在就只差FMS服务器端的开发了，FMS服务器理需要有一个通信文件来负责于flash客户端的连接交互，通常情况下就是建立一个main.asc的通信文件。本文中的通信文件的程序代码非常简单，就是接受客户端的连接，然后提供一个客户端调用的方法。完整代码入下：以下为引用的内容：1application.onConnect=function(client)23client.sayHelloWorld=function(str)45returnIcansay:Hello+str;67this.acceptConnection(client);8通过上面的客户端和FMS服务器的开发，现在这样可以按Ctrl+Enter测试了，看看我们的flash小程序是否能够成功的连接到FMS服务器上指定的HelloWorld，并成功调用服务器端指定的方法呢?打开FMS管理控制台可以看到如下截图效果。OK，我们的小程序已经成功的连接到了FMS服务器上指定的应用(HelloWorld)：下面是测试输出结果截图：上面的实现是直接将代码写在Flash中，我们也可以将代码提取出来形成ActionScript文件(类),只要该类文件继承于显示对象，通过Flash CS3的新特性设置舞台文档类就可以调用了，下面是提取为ActionScript类的编程实现：以下为引用的内容：1.*;4importflash.events.*;5importflash.display.*;67publicclassClientCallServerextendsSprite89privatevarnc:NetConnection;10privatevarrs:Responder;11publicfunctionClientCallServer():void1213nc=newNetConnection();14rs=newResponder(onSuccess,onFailed);15nc.connect(rtmp:/localhost/HelloWorld);16nc.client=this;17nc.call(sayHelloWorld,rs,World);181920privatefunctiononSuccess(rs:Object):void2122trace(rs.toString();232425privatefunctiononFailed(rs:Object):void2627trace(rs.description();282930或许有的朋友已经习惯了使用Flex开发，喜欢用拖拽控件的方式来完成一些常用的功能，其实在Flex下开发和Flash差别不是很大，其实在编码层次上是没什么区别的，不同的只是界面的呈现方式不一样。以下为引用的内容：1privatevarnc:NetConnection;2privatevarfmsServer:String=rtmp:/localhost/HelloWorld;3privatevarrs:Responder;45privatefunctioninitApp():void67nc=newNetConnection();8nc.connect(fmsServer);9nc.client=this;10在Flex下开发，建立好mxml后可以直接在其内部的组件里编写ActionScript代码，如上定义了连接FMS服务器的NetConnection类的实例等。还定义了一个在Flex应用初始化的使用调用的方法initApp()，用来 完成flash客户端与FMS服务器的连接。以下为引用的内容：1privatefunctiononClick():void23rs=newResponder(onSuccess,onFailed);4nc.call(sayHelloWorld,rs,World);5nc.addEventListener(NetStatusEvent.NET_STATUS,onStatus);6nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR,onAsyncHandler);7同Flash中开发一样，给Responder指定了成功和失败后的处理函数，详细如下：如上就完成了Flex中调用FMS服务器并调用FMS上所提供的方法，服务器端的程序和前面 Flash中的一样。到此我们只需要调用onClick()方法就可以测试了，通过一个按钮组件来调用，如下：以下为引用的内容：/*通信成功并返回结果时被调度*/privatefunctiononSuccess(result:Object):voidAlert.show(result.toString(),调用结果);/*通信失败并返回结果时被调度*/privatefunctiononFailed(result:Object):voidAlert.show(result.description);Alert.show(result.code);如上就完成了Flex中调用FMS服务器并调用FMS上所提供的方法，服务器端的程序和前面 Flash中的一样。到此我们只需要调用onClick()方法就可以测试了，通过一个按钮组件来调用，如下：以下为引用的内容：124556575859在平时的开发当中，要与FMS服务器创建可交互的连接有很多种方式，本文只是简单的介绍了最基本的一种调用，希望本文对想学FMS开发的朋友有所帮助。FMS3系列(三)：基于FMS的流媒体播放程序本文主要介绍怎么去创建基于FMS的流媒体播放程序，Flash客户端通过网络加载FMS服务器上的视频流文件(.flv,.mp4等)，实现视频流的播放。要实现媒体流文件的播放是非常简单的，只要在FMS服务器上提供好流媒体文件，Flash客户端通过NetConnection连接到FMS服务器，然后通过NetStream加载就OK。关于怎么连接FMS在本系列的前两篇已有详细介绍，首先得在fms上建立好服务器应用并部署好媒体文件，如下图示：下面是在Flash中开发的流媒体文件播放示例程序：以下为引用的内容：1importflash.display.*;2importflash.events.*;3.*;45varnc:NetConnection=newNetConnection();6varns:NetStream;7varvideo:Video;89nc.connect(rtmp:/localhost/PlayStreams);10nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);1112functiononStatusHandler(evt:NetStatusEvent):void1314trace(.code);15if(.code=NetConnection.Connect.Success)1617ns=newNetStream(nc);18ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);19ns.client=newCustomClient();20video=newVideo();21video.attachNetStream(ns);22ns.play(2009031301,0);23addChild(video);2425看看上面的程序代码是不是非常简单，现在我对上面的代码进行详细的分析。程序从上到下思路很清晰，首先将程序中需要的相关包导入，然后定义了连接对象(NetConnection)，流对象(NetStream)和视频对象(Video)。通过NetConnection的connect方法连接到fms服务器(rtmp:/localhost/PlayStreams)，并添加网络连接的事件处理函数，在此函数内判断网络连接状态，如果连接成功(连接状态：NetConnection.Connect.Success)则通过NetStream建立视频流，调用NetStream的play方法播放指定的流媒体文件，然后将流附加到视频对象并显示在flash界面上。如下图示：OK，我们已经实现了流媒体文件的播放，下面我们来扩展程序的功能，为前面的视频播放程序加上播放、暂停、停止以及重新播放等功能。这时可以在界面上放置几个按扭来驱动这些功能，添加按扭代码如下(当然也可以直接拖拽Botton组件)：以下为引用的内容：1varbtnPlay:Button=newButton();2btnPlay.x=10;3btnPlay.y=250;4btnPlay.width=50;5btnPlay.label=播放;6btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);7addChild(btnPlay);89varbtnPause:Button=newButton();10btnPause.x=80;11btnPause.y=250;12btnPause.width=50;13btnPause.label=暂停;14btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);15addChild(btnPause);1617varbtnStop:Button=newButton();18btnStop.x=150;19btnStop.y=250;20btnStop.width=50;21btnStop.label=停止;22btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);23addChild(btnStop);2425varbtnReplay:Button=newButton();26btnReplay.x=220;27btnReplay.y=250;28btnReplay.width=80;29btnReplay.label=重新播放;30btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);31addChild(btnReplay);3233functiononPlayHandler(evt:MouseEvent):void343536functiononPauseHandler(evt:MouseEvent):void373839functiononStopHandler(evt:MouseEvent):void404142functiononReplayHandler(evt:MouseEvent):void43这里我们需要对上面的代码进行一下重构，将流和控制视频播放的代码重构为方法，以便在重新播放的时候直接调用:以下为引用的内容：1functionplayStream():void23ns=newNetStream(nc);4ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);5ns.client=newCustomClient();6video=newVideo();7video.attachNetStream(ns);8ns.play(2009031302,0);9addChild(video);10上面我们已经将控制视频播放、暂停、停止和重新播放的按扭构造在了flash界面上，现在只需要完成这些按扭的功能就是，要实现视频的播放、暂停、停止和重新播放同样是非常简单的，NetStream为我们提供了可直接调用的API。详细如下：以下为引用的内容：1functiononPlayHandler(evt:MouseEvent):void23ns.resume();456functiononPauseHandler(evt:MouseEvent):void78ns.pause();91011functiononStopHandler(evt:MouseEvent):void1213ns.close();141516functiononReplayHandler(evt:MouseEvent):void1718ns.close();19playStream();20一切搞定 ，可以按下Ctrl+Enter测试了，看到了flash已经成功的加载到了fms上的视频文件(.flv)。打开FMS管理控制台就会看到，在应用PlayStreams下有一个NetStream的连接，代表当前应用有一个网络流正在传输，如下图：完整代码：以下为引用的内容：1importflash.display.*;2importflash.events.*;3.*;4importfl.controls.*;56varnc:NetConnection=newNetConnection();7varns:NetStream;8varvideo:Video;910varbtnPlay:Button=newButton();11btnPlay.x=10;12btnPlay.y=250;13btnPlay.width=50;14btnPlay.label=播放;15btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);16addChild(btnPlay);1718varbtnPause:Button=newButton();19btnPause.x=80;20btnPause.y=250;21btnPause.width=50;22btnPause.label=暂停;23btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);24addChild(btnPause);2526varbtnStop:Button=newButton();27btnStop.x=150;28btnStop.y=250;29btnStop.width=50;30btnStop.label=停止;31btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);32addChild(btnStop);3334varbtnReplay:Button=newButton();35btnReplay.x=220;36btnReplay.y=250;37btnReplay.width=80;38btnReplay.label=重新播放;39btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);40addChild(btnReplay);4142nc.connect(rtmp:/03/PlayStreams);43nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);4445functiononStatusHandler(evt:NetStatusEvent):void46 47trace(.code);48if(.code=NetConnection.Connect.Success)4950playStream();51525354functionplayStream():void5556ns=newNetStream(nc);57ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);58ns.client=newCustomClient();59video=newVideo();60video.attachNetStream(ns);61ns.play(2009031302,0);62addChild(video);636465functiononPlayHandler(evt:MouseEvent):void6667ns.resume();686970functiononPauseHandler(evt:MouseEvent):void7172ns.pause();737475functiononStopHandler(evt:MouseEvent):void7677ns.close();787980functiononReplayHandler(evt:MouseEvent):void8182ns.close();83playStream();848586如果在Flex环境下开发，更方便实现，详细本文就不做介绍了，核心代码和Flash里开发是一样的。FMS3系列(四)：在线视频录制、视频回放使用Flash/Flex+FMS实现在线视频录制、视频回放的很简单的。通过阅读API文档后基本都可以实现这个功能，本文也意在抛砖引玉，希望对刚入手这块的朋友有所帮助。首先建立好Flash(ActionScript 3.0)文件，从组件(可使用Ctrl+F7打开)库中拖拽相应的组件到Flash舞台上，如下图：界面布局好后我们通过程序设置组见的显示文本以及为按扭添加事件监听，新建一个ActionScript类文件，编写代码如下：以下为引用的内容：1publicfunctionPublishPlay():void23lbName.text=请输入视频文件名:;4btnPublish.label=开始录制;5btnPublish.addEventListener(MouseEvent.CLICK,onPublishClick);6btnStop.label=停止录制;7btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);8btnPlay.label=视频回放;9btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);1011video=newVideo();12cam=Camera.getCamera();13mic=Microphone.getMicrophone();14if(cam=null)1516trace(没检测到视频摄像头);1718else1920video.attachCamera(cam);2122addChild(video); 23以上代码同时实现了将视频显示到flash界面上，通过Camera的静态方法getCamrea()方法可以直接获取到视频摄像头的数据。其中用到的video,cam和mic变量为预先定义好的，如下：以下为引用的内容：1privatevarnc:NetConnection;2privatevarns:NetStream;3privatevarvideo:Video;4privatevarcam:Camera;5privatevarmic:Microphone;接下来就需要连接到FMS服务器实现视频录制功能了，通过NetConnection类实现与FMS服务器的连接，并通过流将视频数据发布到FMS服务器。 以下为引用的内容：1privatefunctiononPublishClick(evt:MouseEvent):void23nc=newNetConnection();4nc.addEventListener(NetStatusEvent.NET_STATUS,onPublishStatusHandler);5nc.connect(rtmp:/localhost/PulishedStreams);678privatefunctiononPublishStatusHandler(evt:NetStatusEvent):void910if(.code=NetConnection.Connect.Success)1112ns=newNetStream(nc);13ns.addEventListener(NetStatusEvent.NET_STATUS,onPublishStatusHandler);14ns.client=newCustomClient();15ns.attachCamera(cam);16ns.attachAudio(mic);17ns.publish(tbName.text,record);1819在录制视频的时候视频命名是取的文本输入框的值作为视频名，OK，现在测试Flash(Ctrl+Enter)，通过点击 按扭开始录制视频。通过查看FMS服务器的文件目录可以看到，刚刚测试录制的视频存放于FMS服务器应用下的streams/_definst_目录下。详见下图所示：录制功能完成了，通过测试也可以成功的录制视频。最后我们通过程序来播放刚刚录制是视频。关于播放视频在上一篇文章FMS3系列(三)：基于FMS的流媒体播放程序中已介绍怎么实现，这里就直接帖出代码不做解释。以下为引用的内容：1privatefunctiononPlayHandler(evt:MouseEvent):void23nc=newNetConnection();4nc.addEventListener(NetStatusEvent.NET_STATUS,onPlayStatusHandler);5nc.connect(rtmp:/localhost/PulishedStreams);678privatefunctiononPlayStatusHandler(evt:NetStatusEvent):void910if(.code=NetConnection.Connect.Success)1112ns=newNetStream(nc);13ns.addEventListener(NetStatusEvent.NET_STATUS,onPlayStatusHandler);14ns.client=newCustomClient();1516video=newVideo();17video.attachNetStream(ns);18ns.play(tbName.text,0);19addChild(video);2021通过本文的基础上可以很方便的扩展出在线拍照等多种应用，有兴趣的朋友可以去试验下。下面是本文完整的示例代码。以下为引用的内容：1.*;4importflash.events.*;5importflash.media.*;6importflash.display.*;7importfl.controls.*;89publicclassPublishPlayextendsSprite1011privatevarnc:NetConnection;12privatevarns:NetStream;13privatevarvideo:Video;14privatevarcam:Camera;15privatevarmic:Microphone;1617publicfunctionPublishPlay():void1819lbName.text=请输入视频文件名:;20btnPublish.label=开始录制;21btnPublish.addEventListener(MouseEvent.CLICK,onPublishClick);22btnStop.label=停止录制;23btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);24btnPlay.label=视频回放;25btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);2627video=newVideo();28cam=Camera.getCamera();29mic=Microphone.getMicrophone();30if(cam=null)3132trace(没检测到视频摄像头);3334else3536video.attachCamera(cam);3738addChild(video);