使用Cumulus和Flash Player搭建视频会议示例

该篇文档取材于Cumulus官网上的视频会议代码,详见
https://github.com/OpenRTMFP/Cumulus/wiki/Server-Application,-Samples
我根据它的指示来逐步完成了实现细节.

下面是该示例所用到的代码,我已经上传到如下网址:

http://download.csdn.net/detail/tao_627/6900621

作为RTMFP协议的交互实例,总体演示环境上需要:
服务器:CentOS 6.3 64bit上运行Cumulus(安装配置参见前面的博文),运行在192.168.90.26上并监听1935端口.
客户端:2台Windows环境的主机,以我的配置为例,Windows7 64位,安装有FlashBuilder 4.7 64位破解版,同时要求安装有摄像头,便于视频会话.


下面是FlashBuilder 4.7破解版的下载链接,按照自己的操作系统选择安装32位或是64位版本:

http://332374363.blog.51cto.com/5262696/1102036

你需要首先登陆http://www.adobe.com/downloads/，才能下载成功。另外在安装时，选择试用版安装，需要输入你的AdobeID。win 7和win 8.1都可以安装。

我选择的是32位版本FlashBuilder_4_7_LS10.exe，在win 8.1系统上面.安装完成后在安装目录下依次修改下列3个文件：
(1)..\Adobe\AdobeFlashBuilder4.7(64Bit)\eclipse\plugins\com.adobe.flexbuilder.project_4.7.0.349722\META-INF下面的MANIFEST.MF
修改：Bundle-Version: 0.0.0
(2)..\Adobe\AdobeFlashBuilder4.7(64Bit)\eclipse\features\com.adobe.flexide.feature_4.7.0.349722下面的feature.xml
修改：<plugin id="com.adobe.flexbuilder.project" download-size="0" install-size="0" version="0.0.0"/>
(3)..\Adobe\AdobeFlashBuilder4.7(64Bit)\eclipse\plugins\com.adobe.flexbuilder.flex_4.7.0.349722
下面：复制config.xml并重命名为config_builder.xml
注：以上红色文字部分为具体的版本号，请跟据实际版本号进行查找
修改完成之后，再启动AdobeFlashBuilder4.7，恭喜你，你会发现自己彻底拥有了这款RIA工具了。

下面是官网最新版本的flash player调试版链接地址,如果你不使用桌面版本而是默认选择网页内嵌的Flash player,也可以不下载安装:
http://www.adobe.com/support/flashplayer/downloads.html


服务器端配置:
将下面的内容保存为main.lua文件,存放到Cumulus的如下目录下面:
CumulusServer/www/meeting/main.lua
这是一个扩展的服务器应用meeting:

[php]  view plain  copy

1. function onStart(path)  
2.     NOTE("Application '"..path.."' started")  
3. end  
4.   
5. function onStop(path)  
6.     NOTE("Application '"..path.."' stopped")  
7. end  
8.   
9. function onConnection(client, userName, meeting)  
10.       
11.     client.userName = userName;  
12.     client.meeting = meeting;  
13.   
14.     INFO("User connected: ", client.userName , "meeting: ", client.meeting);  
15.       
16.     function client:getParticipants(meeting)  
17.         result = {}  
18.         i = 0;  
19.         for key, cur_client in cumulus.clients:pairs() do  
20.             if (cur_client.meeting == meeting) then  
21.                 i = i+1;  
22.                 participant = {};  
23.                 participant.userName = cur_client.userName;  
24.                 participant.meeting = cur_client.meeting;  
25.                 if cur_client.id then  
26.                     participant.protocol = 'rtmfp';  
27.                 end  
28.                 participant.farID = cur_client.id;            
29.                 result[i] = participant;  
30.             end  
31.         end   
32.         return result;  
33.     end  
34.           
35.     function client:sendMessage(meeting, from, message)  
36.         for key, cur_client in cumulus.clients:pairs() do  
37.             if (cur_client.meeting == meeting) then       
38.                 cur_client.writer:writeAMFMessage("onMessage", from, message);  
39.             end  
40.         end  
41.     end  
42.   
43.     sendParticipantUpdate(client.meeting);  
44. end  
45.   
46. function onDisconnection(client)  
47.     INFO("User disconnecting: "..client.userName);  
48.     sendParticipantUpdate(client.meeting);  
49. end  
50.   
51. function sendParticipantUpdate(meeting)  
52.     for key, cur_client in cumulus.clients:pairs() do  
53.         if (cur_client.meeting == meeting) then       
54.             cur_client.writer:writeAMFMessage("participantChanged");  
55.         end  
56.     end  
57. end  

注意:
先要在www(如果没有可以先创建一个)下面生成一个子目录meeting,这个目录是客户端和服务器共同协商好的,客户端连接时的url中要指明这个path,当然你也可以改为其它
的名字,只要在Client请求url中相应修改path就可以了.然后将上面的main.lua放到meeting中去.


然后,使用下面的命令开启Cumulus服务器:
sudo ./CumulusServer --pidfile=./CumulusServer.pid -l8 --dump=all
下面是相关的服务器端运行界面:




客户端配置:
1.安装好FlexBuilder 4.7后,下面开始搭建VideoMeeting工程,首先从adobe官网下载相应的样例代码
http://www.adobe.com/devnet/flashmediaserver/articles/real-time-collaboration.html
注意:只需要提取出Client使用的内容,参见下面上传的压缩包


2.打开FlexBuilder 4.7,开始创建一个名为VideoMeeting的Flex项目,会默认生成一个VideoMeeting.mxml和其他的一些文件(夹),将相应的源文件
VideoMeeting.mxml (replace existing VideoMeeting.mxml in src folder), 
ConnectionManager.as, 
SessionManager.as, 
LoginWindow.mxml, 
Participant.as, 
ParticipantListRenderer.mxml, 
ParticipantEvent.as, 
MessageEvent.as, 
Settings.as,
Logger.as
到VideoMeeting/src目录下面,我实际上,会将这些文件手动复制到FlexBuilder4.7的相应工程目录下面:
C:\Users\dell\Adobe Flash Builder 4.7\VideoMeeting\src下面
注意不要添加main.asc,它是给FMS服务器端使用的脚本,我们这里使用的是Cumulus,因而用不上.


3.在VideoMeeting.mxml中指定相关参数,主要是如下配置:
// this is the name of the FMS application in [fms install folder/applications]
private const Application:String = "meeting";
该参数指明Cumulus等服务器上对应应用程序的名称,比如,按照当前的配置,在Cumulus上对应的应用路径为CumulusServer/www/meeting/,这里
CumulusServer是服务器程序所在的目录.

private const ServiceDefault:String = "192.168.90.26:1935";
private const UserDefault:String = "taoyx";
private const MeetingDefault:String = "meeting";
上面的参数依次指定了Cumulus服务器侦听的ip和port,默认注册的用户名,和当前用户界面上显示的应用程序的名称.


4.将上述文件修改并保存后,勾选工具栏上的"项目(p)"中的"自动构建(M)"选项,每次文件修改后,会像Eclipse那样,自动编译并生成可执行程序.
在编译过程中,发现编译时显示了几处错误,我觉得是程序源码和FlexBuilder类库有个别不兼容的问题,就相应的注释了这几处地方.然后,顺利通过
编译.
现在在工程的bin-debug目录中,双击对应的VideoMeeting.html,就会看到类似如下的画面:


当两个客户端都配置好了后,我们可以看到两个人的视频画面,同时从下面的画面中可以看到数据发送,接收的速率,丢包率等等.同时从服务器端可以

看到数据交互日志,便于理解Cumulus源码的处理逻辑和RTMFP协议的细节.