Fms3和Flex打造在线多人视频会议和视频聊天(附原代码)

Flex,Fms3系列文章导航

1. Flex,Fms3相关文章索引

 

本篇是视频聊天,会议开发实例系列文章的第3篇,该系列所有文章链接如下： 
http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp

 

1.工作原理
NetStream.publish方法的应用
publish () 方法:将音频流、视频流和文本消息流从客户端发送到 Flash Media Server，并可选择在传输期间录制该流。 此方法仅供指定的流的发布者使用。
第1个参数：标识该流的字符串。
第2个参数：指定如何发布该流的字符串。 有效值为“record”、“append”和“live”。 默认值为“live”。 （这3个参数区别如下：）
如果传递“record”，Flash Player 将发布并录制实时数据，同时将录制的数据保存到名称与传递给 name 参数的值相匹配的新文件中。 该文件保存在服务器上服务器应用程序所在目录的子目录中。 如果该文件存在，则覆盖该文件。
如果传递“append”，Flash Player 将发布并录制实时数据，同时将录制的数据附加到名称与传递给 name 参数的值相匹配的文件中，该文件存储在服务器上包含服务器应用程序的目录的子目录中。如果未找到与 name 参数相匹配的文件，则创建一个文件。 
如果省略此参数或传递“live”，则 Flash Player 将发布实时数据而不进行录制。 如果存在名称与传递给 name 参数的值相匹配的文件，则删除它。

关于NetStream.publish方法还可以看我上篇文章
http://www.cnblogs.com/aierong/archive/2009/01/10/flex_fms_video_start.html

要实现视频会议就是使用的“live”这一类型

来看一下原理图，参加会议的用户将自己本地摄像头捕捉到的画面publish到fms，存放在fms端userList这个集合对象中，集合中存放的是每个用户名也就是他们发布视频的名字。每当用新用户加入或者退出会议的时候，fms就把这个userList广播给每个还在线的用户。用户取得userList只需播放其他几个用户的视频即可。怎么样原理很简单吧！ 

 

2.准备工作
在fms安装目录下的application中，新建一个文件夹test_video2，然后启动fms服务器

 

3.开始代码
这次代码分2部分：服务器端的asc文件和客户端

asc文件中有2个重要的类：
Application类：Application类包含有关一个Flash Media Server应用程序实例的信息，它会一直维持这些信息直到这个应用程序实例被卸载。
Client类：Client类让你处理连接到一个Flash Media Server应用程序实例的每一个用户或说client。

Application类有几个重要事件如下：
Application.onAppStart 当这个应用程序被服务器装载时调用。
Application.onAppStop 当这个应用程序被服务器卸载时调用。
Application.onConnect 当一个客户机连接到这个应用程序时调用。
Application.onDisconnect 当一个客户机从这个应用程序断开连接时调用。

Application类有几个重要方法如下：
Application.acceptConnection() 接受一个来自客户机的至一个应用程序的连接。
Application.broadcastMsg() 向所有连接的客户机广播一条消息。
Application.disconnect() 从服务器断开一个客户机的连接。
Application.rejectConnection() 拒绝至一个应用程序的连接。

Client类有1重要方法如下：
Client.call() 在Flash客户机上异步的执行一个方法，并把值从Flash客户机返回到服务器。

 

4.先编写asc文件，打开写字板，键入下面代码，并保存为test_video2.asc，然后copy此文件到test_video2文件夹(asc文件要求和文件夹同名或者叫main.asc)
userList=[];

application.onAppStart=function()
{
 trace("fms服务器启动......");
}

application.onConnect = function(currentClient)
{
 application.acceptConnection(currentClient);
 if (userList.length>=3)
 {
  currentClient.call("showServerMsg",null,"已经达到最大用户数");
  application.rejectConnection(currentClient);
 }
 else
 {                 
  currentClient.communicateServer= function(value)
  {
   currentClient.username=value;
   trace(currentClient.username+"加入聊天室");
   userList.push(value);
   trace("当前用户列表"+userList);
   application.broadcastMsg("playOtherVideo",userList);
  }
 }
}

application.onDisconnect=function(currentClient)
{
 trace("用户"+currentClient.username+"离开聊天室");
 
 for(j=0;j<userList.length;j++)
 {
  if ( userList[j]==currentClient.username )
  {
   userList.splice(j,1);
  }
 }
 trace("当前用户列表"+userList);
 application.broadcastMsg("playOtherVideo",userList);
}

代码说明：
(1)application.broadcastMsg ("客户端方法名",参数..);是asc中一个比较重要的方法，他的作用是向所有连接着的客户端进行广播，调用客户端的函数。这个方法相当于循环遍历Application.clients数组并在每一个独立的客户机上调用Client.call()，但这个方法的效率更高（尤其是当连接的客户机数量很大时）。唯一的不同是当你调用broadcastMsg()时你不能指定一个响应对象，除此以外，两种语法是一样的。
(2)userList.splice（a,b）这个函数，它的作用是从a位置开始移除数组中的b个元素(asc用的是as1语法)
(3)代码中做了限制，只允许最多3人连接fms

5.打开Fb3,创建一个项目

 

6.在主mxml中拖动控件，界面如下：

具体代码如下：
<mx:Label x="10" y="10" text="你的画面"/>
<mx:VideoDisplay x="10" y="38" width="120" height="90" id="vd_myVideo"/>
<mx:TextInput x="152" y="38" text="输入你的名字" id="txt_username" width="116" focusIn="txt_username.text=''"/>
<mx:Button x="288" y="38" label="进入聊天室" id="btn_start"/>
<mx:VBox x="10" y="161" width="120" id="vb_otherVideo">
</mx:VBox>

 

7.导入包和定义变量如下：
import mx.controls.Label;
 
import mx.controls.Alert;
 
private var netConnection:NetConnection;
private var outNetStream:NetStream;
private var camera:Camera;
private var microphone:Microphone;
private var responder:Responder;
private var appServer:String="rtmp://192.168.0.249/test_video2";
private var username:String="";

代码说明：
outNetStream就是你要发布给fms的视频流，通俗的说就是你的画面 
responder 如果client端调用server端as1代码中的某个方法需要有回调函数的话就要定义这个responder，后面会有具体说明 
username 每个用户的用户名，也就是发布时候给视频取得名字

 

8.creationComplete="init()"，页面初始化代码
private function init():void
{
 netConnection = new NetConnection();
 netConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
 netConnection.connect(appServer);
 netConnection.client=this;
 initMedia();
}
  
private function initMedia():void
{
 camera = Camera.getCamera();
 camera.setMode(120,90,15);
 camera.setQuality(0,90);
 vd_myVideo.attachCamera(camera);
 microphone=Microphone.getMicrophone();
}

private function netStatusHandler(evt:NetStatusEvent):void
{
 trace(evt.info.code);
   
 if ( evt.info.code=="NetConnection.Connect.Success" )
 {
  btn_start.addEventListener(MouseEvent.CLICK,startCommunicate);
 }
 else
 {
  Alert.show("fms连接失败"+evt.info.code);
 }
}
代码比较简单，不明白可以看我上篇
http://www.cnblogs.com/aierong/archive/2009/01/10/flex_fms_video_start.html

 

9.实现按钮事件
private function startCommunicate(evt:MouseEvent):void
{
 username=txt_username.text;
 responder=new Responder(communicateStataHandler);
 netConnection.call("communicateServer",responder,username);
}

private function communicateStataHandler(str:String):void
{
 outMyVideo();
 btn_start.enabled=false;
}

private function outMyVideo():void
{
 /* 发布视频 */
 outNetStream = new NetStream(netConnection);
 outNetStream.attachCamera(camera);
 outNetStream.attachAudio(microphone);
 outNetStream.publish(username,"live");
}
代码说明：
Responder 类提供了一个对象，该对象在 NetConnection.call() 中使用以处理来自与特定操作成功或失败相关的服务器的返回值。 
netConnection.call调用asc文件中的communicateServer，调用成功后，回调communicateStataHandler方法

 

10.showServerMsg方法实现
public function showServerMsg(msg:String):void
{
 Alert.show(msg);
}
代码说明：
供asc文件中调用

 

11.playOtherVideo方法实现：
public function playOtherVideo(newUserList:Array):void
{
 vb_otherVideo.removeAllChildren();
  
 for(var i:int=0;i<newUserList.length;i++)
 {
  if ( newUserList[i]!=username )
  {
   var vd:VideoDisplay = new VideoDisplay();
   var video:Video = new Video();
   video.width=120;
   video.height=90;
   var inNetStream:NetStream= new NetStream(netConnection);
   video.attachNetStream(inNetStream);
   inNetStream.play(newUserList[i]);
   var label:Label= new Label();
   label.text=newUserList[i]+"的画面";
     
   vd.addChild(video);
   vd.width=120;
   vd.height=90;
   vb_otherVideo.addChild(label);
   vb_otherVideo.addChild(vd);       
  }
 }
}
代码说明：
asc文件中application.broadcastMsg方法调用，向所有连接的客户机广播

 

12.运行程序,图片如下，其中有一人没视频摄像头

 

13.代码下载
http://files.cnblogs.com/aierong/Video2.rar
您收到代码后，请回到文章下面留言告之一下!要是没收到，我可以再发!

提供代码是为了互相学习，一起探讨！请大家多交流!
1.要是对代码有什么疑问，可以在文章的评论区留言，我会尽我所能答复您!
2.要是您在运行代码的过程中发现bug,或者是您有什么好的建议和意见,也可以在文章的评论区留言给我，我会及时更正！

 

评论区使用提示：
评论区留言(使用高级评论)是可以贴图片的,要是有难以描述的问题，可以贴图片和文字一起说明
谢谢！