Flex4 实现视频通话完整实例 一 客户端

原创 2012年03月26日 20:20:53

Flex4 实现视频通话完整实例 一 客户端

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      currentState="loginState"
      pageTitle="欢迎来到登录页面"
      creationComplete="application1_creationCompleteHandler(event)">
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>

 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.collections.ArrayList;
   import mx.controls.Alert;
   import mx.events.CloseEvent;
   import mx.events.FlexEvent;
   
   /**
    * 声明共享对象
    */
   private var listSO:SharedObject;
   
   /**
    * 声明用户数组
    */
   private var userArr:Array;
   
   
   /**
    * 本地登录的用户名
    */
   private var localUserName:String;
   
   /**
    * 声明网络连接对象并实例化
    */
   private var conn:NetConnection=new NetConnection();
   
   /**
    * 声明用户列表的数据源
    */
   [Bindable]
   private var userList:ArrayCollection;
   
   /**
    * 正在进行视频的用户的集合
    */
   private var videoUsers:Array;
   
   /**
    * 声明自己的网络流
    */
   private var selfNS:NetStream;
   
   /**
    * 声明对方的网络流
    */
   private var otherNS:NetStream;
   
   /**
    * 声明自己的视频对象
    */
   private var selfVideo:Video;
   
   /**
    * 声明对方的视频对象
    */
   private var otherOneVideo:Video;
   
   /**
    * 访问的网址
    */
   private var rtmpUrl:String="rtmp://localhost/VideoMeeting_Server";
   
   protected function btnLogin_clickHandler(event:MouseEvent):void
   {
    localUserName=this.txtLoginName.text;
    var pwd:String=this.txtPwd.text;
    
    if(localUserName==""){
     Alert.show("登录名不能为空!");
     return;
    }else{
     conn.client=this;
     //Alert.show("this:"+this);
     conn.addEventListener(NetStatusEvent.NET_STATUS,statusHandler);
     conn.connect(rtmpUrl,this.localUserName);
    }
    
   }
   
   public function statusHandler(e:NetStatusEvent):void{
    Alert.show(e.info.code);
    if(e.info.code=="NetConnection.Connect.Success"){
     this.currentState="chatState";
     this.localUserName=this.txtLoginName.text;
     //修改网页标题
     if(ExternalInterface.available){
      ExternalInterface.call("changeTitle",this.localUserName);
     }
     //设置用户列表对象
     setUserListSo();
     //刷新用户列表对象
     this.refreshUserList(this.localUserName);
     this.txtYouSay.setFocus();
    }
   }
   
   public function result_getOnLoadUser(msg:String):void{
    this.chatMsg.text+="【"+msg+"】"+"加入聊天室!\n";
   }
   
   /**
    * 创建用户列表共享对象
    */
   public function setUserListSo():void{
    this.listSO=SharedObject.getRemote("listSO",conn.uri,false);
    this.listSO.connect(conn);
    
    this.listSO.addEventListener(SyncEvent.SYNC,syncHandler);
   }
   
   
   public function syncHandler(evt:SyncEvent):void{
    showUserList();//重新加载用户列表
   }
   
   /**
    * 显示用户列表对象
    */
   public function showUserList():void{
    this.userList=new ArrayCollection([{label:"All"}]);
    
    this.userArr=new Array();
    for(var tmp:String in this.listSO.data){
     this.userArr.push(this.listSO.data[tmp]);
    }
    
    for(var i:int=0;i<this.userArr.length;i++){
     if(this.userArr[i]==this.localUserName){
      this.userList.addItem({label:"当前用户:"+this.userArr[i]});
      continue;
     }
     
     this.userList.addItem({label:this.userArr[i]});
    }
    
    //将数据绑定到组合框和DataGrid上
    this.combo_userList.selectedIndex=0;
    this.combo_userList.dataProvider=this.userList;
    
    
    this.dg_userList.dataProvider=this.userList;
    
    
   }
   
   /**
    * 刷新用户列表
    */
   private function refreshUserList(message:String):void{
    //Alert.show("message:"+message);
    conn.call("getOnLoadUser",null,message);
   }

   protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    this.txtLoginName.setFocus();
   }
   
   /**
    * 显示指定消息内容
    */
   public function showMessage(message:String):void{
    this.chatMsg.text+=message+"\n";
   }


   protected function txtSend_clickHandler(event:MouseEvent):void
   {
    var youSay:String=this.txtYouSay.text;
    var sayToName:String=this.combo_userList.selectedItem.label;
    
    if(sayToName=="当前用户:"+this.localUserName){
     Alert.show("请不要自言自语!");
     return;
    }
    conn.call("chat",null,sayToName,youSay);
    
    Alert.show("发送成功!");
    
    this.txtYouSay.text="";
    this.txtYouSay.setFocus();
   }


   /**
    * 开始视频邀请
    */
   protected function txtVideo_clickHandler(event:MouseEvent):void
   {
    var otherName:String=this.combo_userList.selectedItem.label;
    conn.call("videoInvite",null,otherName);
    Alert.show("视频邀请已发送出去!");
    this.txtYouSay.setFocus();
   }
   
   /**
    * 视频被邀请方调用的方法
    */
   public function showInviteMessage(message:String):void{
    this.videoUsers=message.split(";");
    Alert.show(this.videoUsers[0]+":"+this.videoUsers[1]);
    Alert.show(this.videoUsers[0]+"正在邀请和你进行视频,是否同意?","提示信息",
    Alert.YES|Alert.NO,this,alertClientHandler);
   }
   
   private function alertClientHandler(evt:CloseEvent):void{
    if(evt.detail==Alert.YES){
     this.publishVideo();
     this.getVideo();
     conn.call("agreeVideoInvite",null,this.videoUsers[0],this.videoUsers[1]);
    }else{
     conn.call("denyVideoInvite",null,this.videoUsers[0],this.videoUsers[1]);
    }
   }
   /**
    * 显示自己的视频
    */
   private function publishVideo():void{
    this.selfNS=new NetStream(conn);
    //this.selfNS.bufferTime=15;
    var cam:Camera=Camera.getCamera();
    if(cam==null){
     Alert.show("对不起,没有摄像头设备!");
     return;
    }else{
     cam.setLoopback(true);
     cam.setMotionLevel(50,100);
     cam.setMode(320,240,15,true);
     this.selfNS.attachCamera(cam);
    }
    
    var microphone:Microphone=Microphone.getMicrophone();
    if(microphone==null){
     Alert.show("没有可用的麦克风!");
     return;
    }else{
     microphone.setUseEchoSuppression(true);
     this.selfNS.attachAudio(microphone);
    }
    
    this.selfNS.publish("somes"+this.txtLoginName.text,"live");
    
    this.selfVideo=new Video();
    this.selfVideo.width=this.self_VD.width;
    this.selfVideo.height=this.self_VD.height;
    
    this.selfVideo.attachCamera(cam);
    
    this.self_VD.addChild(this.selfVideo);
    
   }
   
   /**
    * 对方视频显示
    */
   private function otherVideoShow():void{
    this.otherNS=new NetStream(conn);
    //this.otherNS.bufferTime=15;
    this.otherOneVideo=new Video();
    this.otherOneVideo.width=this.other_OneVD.width;
    this.otherOneVideo.height=this.other_OneVD.height;
    
    this.otherOneVideo.attachNetStream(this.otherNS);
    
    this.other_OneVD.addChild(this.otherOneVideo);
    
   }

   /**
    * 被邀请方获得对方视频
    */
   private function getVideo():void{
    this.otherVideoShow();
    this.otherNS.play("somes"+this.videoUsers[0]);
   }
   
   /**
    * 邀请方获得对方视频
    */
   private function getOtherVideo(other:String):void{
    this.otherVideoShow();
    this.otherNS.play("somes"+other);
   }
   
   
   
   /**
    * 邀请方的提示信息(对方拒绝视频后自己调用的方法)
    */
   public function msgTip(msg:String):void{
    Alert.show(msg);
   }
   
   /**
    * 邀请方收到被邀请方同意后调用的方法
    */
   public function showVideo(other:String):void{
    this.publishVideo();
    this.getOtherVideo(other);
   }
   
   public function disConnectMessage(message:String):void{
    this.chatMsg.text+=message+"退出聊天室!"+"\n";
   }
   
  ]]>
 </fx:Script>


 
 <s:states>
  <s:State name="chatState"/>
  <s:State name="loginState"/>
 </s:states>
 <fx:Declarations>
  <!-- 将非可视元素(例如服务、值对象)放在此处 -->
 </fx:Declarations>
 <mx:Form includeIn="loginState" width="315" height="150" textAlign="center">
  <mx:FormHeading label="欢迎来到登录窗口" width="269"/>
  <mx:FormItem label="请输入登录名:" width="273">
   <s:TextInput width="168" id="txtLoginName"/>
  </mx:FormItem>
  <mx:FormItem label="请输入密    码:">
   <s:TextInput width="167" id="txtPwd"/>
  </mx:FormItem>
  <mx:FormItem width="267">
   <s:Button label="登录"  id="btnLogin" click="btnLogin_clickHandler(event)"/>
  </mx:FormItem>
 </mx:Form>
 <s:HGroup width="599" height="479" verticalAlign="middle" includeIn="chatState">
  <s:Panel width="380" height="480" title="聊天信息" y="-2">
   <s:HGroup x="0" y="0" width="378" height="447">
    <s:VGroup width="229" height="100%">
     <s:TextInput width="240" height="321" editable="false" id="chatMsg"/>
     <s:HGroup width="229" height="186">
      <s:TextInput width="145" height="116" id="txtYouSay"/>
      <s:VGroup width="77" height="107" paddingTop="30" gap="16">
       <s:Button label="发送" id="txtSend" click="txtSend_clickHandler(event)"/>
       <s:Button label="视频"  id="txtVideo" click="txtVideo_clickHandler(event)"/>
      </s:VGroup>
     </s:HGroup>
    </s:VGroup>
    <s:VGroup width="142" height="100%" paddingLeft="10" paddingTop="10">
     <s:Label text="用户列表"/>
     <s:DropDownList id="combo_userList" width="119"></s:DropDownList>
     <s:Label text="用户列表"/>
     <mx:DataGrid width="123" height="366" id="dg_userList">
      <mx:columns>
       <mx:DataGridColumn headerText="用户名" dataField="label"/>
      </mx:columns>
     </mx:DataGrid>
    </s:VGroup>
   </s:HGroup>
  </s:Panel>
  <s:VGroup width="217" height="478" y="-1" paddingLeft="10">
   <s:Label text="我的视频" paddingLeft="10" paddingTop="10"/>
   <s:VideoDisplay width="198" height="222" id="self_VD"/>
   <s:Label text="对方视频"/>
   <s:VideoDisplay width="196" height="212" id="other_OneVD"/>
  </s:VGroup>
 </s:HGroup>
</s:Application>

 

!!!!服务器端配置见 Flex4 实现视频通话完整实例 二 服务器端

类似9158视频聊天室源码开发方案

类似新浪聊天室和呱呱聊天室,99CU等表现形式,聊天大厅和聊天房间可以自由切换。 2. 数据库最好使用MS SQL,程序代码模块化开发,有充分的扩展性以及接口,二次开发方便。 3. 通过IE浏览器...
  • zhao520100000
  • zhao520100000
  • 2013年07月29日 10:47
  • 2747

在自己网站中嵌入NN视频会议,互动教学系统

在网站中嵌入视频会议 NN视频会议系统网页版,支持在用户网站中无缝嵌入视频会议、互动教学系统。 使用网站原有的用户账号登陆系统。支持安卓系统的手机或平板(需安装App) 已经登录帐号的网站中直接...
  • Ensue
  • Ensue
  • 2016年11月08日 10:48
  • 1150

Flex4 实现视频通话完整实例 二 服务器端

Flex4 实现视频通话完整实例 二 服务器端 一、GlobalConstance.java package com.hsj.red5.server; public class GlobalCo...
  • belibei
  • belibei
  • 2012年03月26日 20:26
  • 1214

100行Javascript代码实现视频通话

视频聊天室 上一篇文章通过JavaScript调用AnyChat实现视频聊天室 简单地讲述了如何通过AnyChat做视频聊天室。通过学习,我自己也做了个简单的小例子,几十行JavaScript脚...
  • bairui_Allen
  • bairui_Allen
  • 2013年02月28日 10:09
  • 1105

jplogic 开发案例(FMS流媒体服务集成) 之 视频会议管理 (多人互动呼叫-应答模式视频会议含共享白板)

本人之前有做过类似视频语音
  • romantichjwhjwhjw
  • romantichjwhjwhjw
  • 2014年08月09日 01:32
  • 3902

red5 学习6 --多人聊天室服务端

red5 多人聊天室服务端
  • lql876381722
  • lql876381722
  • 2010年07月02日 18:05
  • 4514

Java使用websocket和WebRTC实现视频通话

最近这段时间折腾了一下WebRTC,这两天终于是抽了时间把WebRTC搞定了,去年就想弄的,但是确实没时间。看了网上的https://apprtc.appspot.com/的例子(可能需要翻墙访问),...
  • Melod_bc
  • Melod_bc
  • 2017年03月11日 12:08
  • 3142

flex4 学习资料内容介绍

1、flex包含一个基于组件的开发模型,你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用。 2、可视化组件包括以下主要特性:尺寸、事件、样式、效果、皮肤。 3、flex定义了两套组件。...
  • xiaoxin888888
  • xiaoxin888888
  • 2011年11月18日 14:00
  • 2261

使用red5和OBS搭建直播平台

使用red5和OBS搞出自己的直播平台来挑战bilibili(B站),为什么文章标题叫这个,其实我学习red5和fms方面的东西是很久了的,加上我最近借助flex,要开发一套医疗远程会诊的系统(web...
  • liang5603
  • liang5603
  • 2017年01月21日 12:37
  • 953

Openmeetings安装详细步骤

openmeetings SOAMySQLOSGIIEAnt Openmeetings安装 Openmeetings安装Openmeetings官方主页http:...
  • zhangjuanxpj
  • zhangjuanxpj
  • 2013年03月05日 18:56
  • 3715
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex4 实现视频通话完整实例 一 客户端
举报原因:
原因补充:

(最多只允许输入30个字)