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

简介:

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

 


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


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/4151463.html,如需转载请自行联系原作者

相关文章
|
4月前
|
Web App开发 网络协议 Android开发
### 惊天对决!Android平台一对一音视频通话方案大比拼:WebRTC VS RTMP VS RTSP,谁才是王者?
【8月更文挑战第14天】随着移动互联网的发展,实时音视频通信已成为移动应用的关键部分。本文对比分析了Android平台上WebRTC、RTMP与RTSP三种主流技术方案。WebRTC提供端到端加密与直接数据传输,适于高质量低延迟通信;RTMP适用于直播场景,但需服务器中转;RTSP支持实时流播放,但在复杂网络下稳定性不及WebRTC。三种方案各有优劣,WebRTC功能强大但集成复杂,RTMP和RTSP实现较简单但需额外编码支持。本文还提供了示例代码以帮助开发者更好地理解和应用这些技术。
157 0
|
6月前
|
Web App开发 移动开发 编解码
FFmpeg开发笔记(三十二)利用RTMP协议构建电脑与手机的直播Demo
本文讨论了实时数据传输在互联网中的重要性,如即时通讯和在线直播。一对一通信通常使用WebRTC技术,但一对多直播需要流媒体服务器和特定协议,如RTSP、RTMP、SRT或RIST。RTMP由于其稳定性和早期普及,成为国内直播的主流。文章通过实例演示了如何使用OBS Studio和RTMP Streamer进行RTMP推流,并对比了不同流媒体传输协议的优缺点。推荐了两本关于FFmpeg和Android开发的书籍以供深入学习。
104 0
FFmpeg开发笔记(三十二)利用RTMP协议构建电脑与手机的直播Demo
|
7月前
|
Web App开发 安全 API
想开发一款带有视频通话/共享屏幕功能的产品?那WebRTC是你必须要知道的!
一名技术爱好者在研究如何为开源项目集成视频通话功能时,深入学习了WebRTC技术。WebRTC是一个API,允许浏览器和应用实现实时音视频通信,简化了之前复杂的技术挑战,如音视频处理和网络传输。该技术可用于视频通话、桌面共享、视频会议等多种场景。在WebRTC中,通过信令交换、STUN/TURN服务器和ICE框架处理网络连接和通信路径,实现点对点连接。与WebSocket不同,WebRTC专注于高质量实时通信,使用UDP协议以降低延迟。接下来的文章将分享如何实现WebRTC的视频通话功能。
|
存储 网络协议 流计算
|
Web App开发 网络虚拟化
使用 WebRTC 构建简单的视频聊天室(1)
使用 WebRTC 构建简单的视频聊天室(1)
432 0
|
编解码 移动开发 视频直播
直播平台源代码开发,支持全终端观看及提高开屏流畅度很重要
相信大家对直播软件已经是很熟悉了,毕竟直播软件已成为当下人们重要的娱乐渠道
直播平台源代码开发,支持全终端观看及提高开屏流畅度很重要
|
Web App开发 负载均衡 视频直播
开发网络视频直播系统需要注意的地方
对于网络视频直播系统来讲,用户体验是一件非常重要的事情。提高和优化用户体验是每个直播平台都非常注重的一部分,所以在开发过程中也有很多需要注意的地方。本文主要分享一下关于直播中负载均衡的相关内容。
|
开发工具
告诉你制作直播平台都需要什么硬件和软件的干货文
告诉你制作直播平台都需要什么硬件和软件的干货文