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,或者是您有什么好的建议和意见,也可以在文章的评论区留言给我,我会及时更正!

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

时间: 2024-11-05 16:42:12

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

Fms3和Flex打造在线视频录制和回放

本博推荐文章快速导航: Sql Server2005 Transact-SQL 新兵器学习MCAD学习 代码阅读总结 ASP.NET状态管理 DB(数据库)WAPWinFormFlex,Fms aierong原创技术随笔 .net,Flex,Fms,视频会议,视频聊天相关开发技术大本营 博客园 首页 博问 闪存 新随笔 联系 订阅 管理 随笔-122  文章-0  评论-3956 Fms3和Flex打造在线视频录制和回放 Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频

3分钟实现网页版多人文本、视频聊天室 (含完整源码)

基于SimpleWebRTC快速实现网页版的多人文本.视频聊天室. 1 实现方法 复制下面的代码,保存为一个html文件 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://simplewebrtc.com/latest.js"

视频会议、视频聊天、手机视频、跨平台视频如何开发之流程篇

视频呼叫业务逻辑主要实现两个终端PC.手机.Pad等之间的通话请求流程控制包括请求Request.回复Reply.开始Start以及结束Finish等过程可以形象理解为打电话的流程拨号.等待.通话.挂断. 以下以AnyChat视频呼叫业务逻辑为例说明 1.业务逻辑流程图 请参考http://bbs.anychat.cn/forum.php?mod=viewthread&tid=150&extra=page%3D1 2.API接口及常量定义 客户端相关API接口及事件回调 //视频通话消息通

5分钟快速打造WebRTC视频聊天&lt;转&gt;

原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了.于是自己动手. 想在公网上实现视频通信,需要下面3个核心元素: 一个是NAT穿透服务器(ICE Server),实现内网穿透,具体的作用可以自行百度. 基于WebSocket的信令服务器(Signaling Server),用于建立点对点的通道. Web客户端.通过H5

免费美女视频聊天,多人视频会议功能加强版本(Fms3和Flex开发(附源码))

Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第4篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp 本软件只是一个简单的应用,主要是为了总结一下学习思路和开发方向,和大家交流.本软件实现的功能也比较简单,主要是视频,在线聊天,用户列表等等.代码可能写得比较乱,功能还不完善计划下步做以下事情的开发:一对一聊天,包括私聊聊天记录的保存和查询

在线教学、视频会议软件 Webus Fox(2) 服务端开发手册

上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1配置 1.1 IIS配置 Fox支持最基本的.net Framework4.0和IIS6/IIS7. 在IIS7中,对应应用程序池,需要配置为经典模式,支持.net4.0 1.2 web.config配置 Fox服务器端是暂时是host在IIS上,将来将Host在Windows Service上.对于IIS的配置,web.config是

Webus Fox(1)免安装的在线教学、视频会议软件

Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能.   1. 登录 访问 http://flash.webus.cn/#,用自己的名字登录: 可以同时登录二个不同的帐号体验后面的功能   登录后,点击允许语音.视频:     2. 文件共享.电子白板 2.1 上传PDF文件 点击"上传"按钮,上传一个PDF文件(目前文件的名必须是英文的),上传完后,会出现在"文件分享"列表里   2.2

在线教学、视频会议 Webus Fox(3) 客户端开发手册

本文主要介绍webus fox 客户端的配置及接口说明. 1. 文件列表和配置 1.1 文件列表 1.2 common.xml 配置 根据服务器端的部署, 替换[ServerUrl] , [RtmpPort], [GatewayPort] [GatewayPort]: 指的是iis 里的site的port 2. 相关接口说明 2.1. 消息 2.1.1 MessageClient/MsgClient.as API名称 start 应用场景 启动message消息, 连接服务并登陆 异常   AP

Django+xadmin打造在线教育平台(三)

Django+xadmin打造在线教育平台(三)   代码 github下载 五.用户注册 主要实现功能 用户输入邮箱.密码和验证码,点注册按钮 如果输入的不正确,提示错误信息 如果正确,发送激活邮件,用户通过邮件激活后才能登陆 即使注册功能,没有激活的用户也不能登陆 5.1.初步视图 users/views.py class RegisterView(View): '''用户注册''' def get(self,request): return render(request,'register