FMS视频聊天室案例开发3

    本文要介绍的内容主要有利用SharedObject来实现聊天文字聊天和在线用户的列表,以及实现语音视频聊天等.

    前一篇文章介绍了实现用户注册和登录的功能,本文接着介绍用户注册并成功登录后的相关功能开发.首先分析下功能,用户登录成功要做四件事:

    1、显示自己的视频到聊天界面(作用不大,自己看而已)

    2、发布自己的视频和语音数据到FMS服务器(这个作用很大,别人则根据你发布的数据查看你的视频等)

    3、将自己的基本信息写如共享对象,实现在线用户列表.

    4、通过共享对象来实现文字聊天(本文只是为了演示方便,实际开发中应尽量使用Client-Server之间的方法调用实现)

    OK,有了上面的分析,接下来一步一步的实现这些功能.显示自己的视频到界面很简单,在以前的相关文章里都有使用到.

private function displayCameraSelf():void
{
    //显示自己的视频
    myCamera = Camera.getCamera();
    if(myCamera != null)
    {
        this.twoVideo.attachCamera(myCamera);
    }
    else
    {
        Alert.okLabel="确 定";
        Alert.show("没检测到视频摄像头！","系统提示");
    }
}

    发布视频数据到FMS很简单,既通过NetConnection和NetStream就可以完成,需要注意的是,在发布视频流的时候视频流的命名规则采用的用户名,也就是用户名是什么,他发布的视频流就叫什么名字,其他用户要查看他的视频就是通过他的用户名命名的流名来查看.

private function onLoginRusult(evt:ResultEvent):void
{
    if(evt.result != null)
    {
        //显示自己的视频
        displayCameraSelf();
       
        //连接FMS服务器发布自己的视频流
        publishNc = new NetConnection();
        publishNc.connect("rtmp://localhost/ChatRoom");
        publishNc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
        publishNc.client = this;
       
        playNc = new NetConnection();
        playNc.connect("rtmp://localhost/ChatRoom");
        playNc.addEventListener(NetStatusEvent.NET_STATUS,onPlayStatusHandler);
        playNc.client = this;
       
        so = SharedObject.getRemote("ChatSO",publishNc.uri,false);
        so.addEventListener(SyncEvent.SYNC,onSyncHandler);   
        so.connect(publishNc);       
        so.client = this;               
       
        userSO = SharedObject.getRemote("UserSO",publishNc.uri,false);
        userSO.connect(publishNc);
        userSO.client = this;
       
       
        UserName = myUserName = evt.result.UserName;
        NickName = myNickName = evt.result.NickName;
       
        //将当前用户添加到共享对象
        var uarray:ArrayCollection;
        var o:Object = new Object();
        o.UserName=myUserName;
        o.NickName=myNickName;
       
        if(userSO.data.UserList == null)
        {
            uarray = new ArrayCollection();
        }
        else
        {
            uarray = userSO.data.UserList as ArrayCollection;
   
        }
        var temp:ArrayCollection = new ArrayCollection();
        convertArrayCollection(temp,uarray);
        temp.addItem(o);
        userSO.setProperty("UserList",temp);
   
        this.loginPanel.visible = false;
        this.chatRoomPanel.visible=true;
        ChatRoomViewStack.selectedChild = chatRoomPanel;
    }
    else
    {
        Alert.okLabel="确 定";
        Alert.show("登录失败！","系统提示");
    }
}

private function onNetStatusHandler(evt:NetStatusEvent):void
{
    if(evt.info.code == "NetConnection.Connect.Success")
    {
        //连接成功则发布自己的流到FMS
        publishNs = new NetStream(publishNc);
        publishNs.attachAudio(myMic);
        publishNs.attachCamera(myCamera);
        publishNs.client=this;
        //以用户名作为视频流名,直接通过用户名连接对方的流
        publishNs.publish(myUserName,"live");   
    }
}

    默认自己和自己对聊,只有从在线用户列表里选择了用户才和对应的人进行视频聊天,也就是说初始化为自己连接到自己的视频流.实现代码如下所示:

private function onPlayStatusHandler(evt:NetStatusEvent):void
{
    if(evt.info.code == "NetConnection.Connect.Success")
    {
        playNs = new NetStream(playNc);
        var v:Video = new Video();
        v.width = 320;
        v.height= 240;
        v.attachNetStream(playNs);
        playNs.play(UserName,"live");
        this.oneVideo.addChild(v);
    }
}

    连接到自己发布的视频流,将视频流显示到界面上.

    文字聊天使用的共享对象做的大厅聊天,实现很简单,关于共享对象实现文字聊天详细可以查看《使用远程共享对象(SharedObject)实现多人时时在线聊天(Flex | Flash) 》.

/**
 * 发送聊天消息
 * */
private function sendMessage(evt:MouseEvent):void
{
    var tempCollection:ArrayCollection = new ArrayCollection();
    if(so.data.msgCollection != null)
    {
        convertArrayCollection(tempCollection,so.data.msgCollection as ArrayCollection);
    }
    var msg:Message = new Message();
    msg.NickName = myNickName;
    msg.Context = this.txtMessage.text;
    tempCollection.addItem(msg);
   
    //更新远程共享对象中的属性值
    so.setProperty("msgCollection",tempCollection);
   
    this.txtMessage.text="";
}

private function onSyncHandler(evt:SyncEvent):void
{
    if(so.data.msgCollection != null)
    {
        //首次登录进来异步获取消息的时候不显示登录之前的消息
        if(isFirstLogin)
        {
            so.setProperty("msgCollection",null);
            isFirstLogin = false;
        }
        else
        {
            var tempCollection:ArrayCollection = new ArrayCollection();
            convertArrayCollection(tempCollection,so.data.msgCollection as ArrayCollection);
           
            this.displayMessage.text="";
            for(var index:int=0;index<tempCollection.length;index++)
            {
                var message:Object = tempCollection.getItemAt(index);
                var displayMessage:String = message.NickName+"说:"+message.Context;
                this.displayMessage.text += displayMessage + "\n";
            }
        }
    }
    this.displayMessage.verticalScrollPosition=this.displayMessage.maxVerticalScrollPosition;
}

前面用户登录的时候已经将用户信息写入了共享对象，用户在线列表只需要将共享对象的数据读出来，显示在界面上就OK，这里使用tree控件来呈现数据。

private function init():void
{
    nc = new NetConnection();
    nc.connect("rtmp://localhost/ChatRoom");
    nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
    nc.client = this;
   
    so = SharedObject.getRemote("UserSO");
    so.addEventListener(SyncEvent.SYNC,onSyncHandler);
    so.connect(nc);
    so.client = this;
}

private function onNetStatusHandler(event:NetStatusEvent):void
{
    if(event.info.code=="NetConnection.Connect.Success")
    {
        if(so.data.UserList!=null)
        {
            var uarray:Array = so.data.UserList as Array;
            this.userTree.dataProvider = uarray;
        }
    }
}

private function onSyncHandler(event:SyncEvent):void
{
    if(so.data.UserList!=null)
    {
        var uarray:Array = so.data.UserList as Array;
        this.userTree.dataProvider = uarray;
    }
}