【转帖】实现了视频私聊功能
昨天匆忙实现了视频私聊功能,今天把思路再整理下。顺便和各位做个探讨~
我的基本思路是这样的:
1. 用户登录聊天室后在左边的窗口自动显示视频(如果检测到有的话,如果没有则显示相关文字或图片,这个暂时还没有加);
2. 点击用户列表中的相应用户名后取得对应的视频文件名,然后在右边的窗口播放就可以了。
看起来简单,其实不然哦~下面看详细的分析
注意:下面所有修改都是基于FlashCom 组件,相关的组件实现就不再详细叙述。只是摘取视频私聊相关部分分析。
关于自动开启视频的代码修改:
在av组件中的connect方法中添加
1 : //av1_mc 是左边视频窗口的实例名称
2 : if (this.name=='av1_mc') this.startPublish();
这个比较容易实现,关键是私聊用户的视频显示。
因为AVPresence组件的视频发布是this.prefix + this.soName
1 : this.ns.publish(this.prefix + this.soName);
也就是说是以窗口的实例名来定位播放的,要修改为针对用户定位播放的方式,因此以上代码改为
1 : this.ns.publish(this.userID);
这样就是以用户ID为文件名发布视频文件,以便于我们下一步选择不同的用户来播放相应的视频。
下一步,是修改接收视频部分。
原先接收的方式是当前窗口接收,代码为:
1 : // Starts receiving a stream from another user
2 : FCAVPresenceClass.prototype.startReceive = function() {
3 : // trace('Start Receiving');
4 : this.seat_video.attachVideo(this.ns);
5 : this.ns.play(this.prefix + this.soName);
6 : this.gotoAndStop('receiving');
7 : this.onStartReceive();
8 : };
现在要改为指定播放窗口接收视频(这里就是右边的窗口了),而且要指明接收哪个用户的,所以加传递用户ID参数,代码改为:
1 : FCAVPresenceClass.prototype.startReceive = function(userId) {
2 : if (userId !=this.userID){ //如果选择自己,则不再接收
3 : this.seat_video.attachVideo(this.ns);
4 : this.ns.play(userId);
5 : this.gotoAndStop('receiving'); }
6 : };
接着要修改同步的部分,否则一旦视频同步就会乱了。下面是修改后的代码,比较下就知道了。
01 : this.so.onSync = function(list) {
02 : for (i in list) {
03 : userID[this.data.speaker]=this.data.speakerID;//把用户ID保存到数组
04 : if (list[ i ].name == 'broadcast') {
05 : if (this.data.broadcast && this.data.speakerID!=this.userID && this.data.speakerID == this.selectUserID) {
06 : this.owner.startReceive(this.data.speakerID);
07 : this.owner.username_txt.text = this.data.speaker;
08 : } else {
09 : this.owner.stopReceive();
10 : this.owner.level.mask._height = 1;
11 : this.owner.username_txt.text = '(Open)';
12 : // Stop
13 : }
14 : }
15 : }
16 : };其中selectUserID就是我们点击用户列表后获取到的值,要能够获取到这个值首先要在peopleList组件中保存用户信息,在组件onchange事件触发的时候可以获取到用户名。
我在用户列表的value中保存了很多信息,下面是peopleList组件的同步时候添加List数据代码
1 : this.owner.people_lb.addItem(this.data[ i ].name,{ id:i,sex:this.data[ i ].sex,name:this.data[ i ].name,ip:this.data[ i ].ip,cam:this.data[ i ].cam,mic:this.data[ i ].mic });
这些用户信息是通过共享对象存储在服务器端的
下面是服务器端people.asc文件中的相关实现
1 : FCPeopleList.prototype.connect = function( client,userSex,cam,mic ) {
2 : var cglobal = this.getClientGlobalStorage(client);
3 : var clocal = this.getClientLocalStorage(client);
4 : clocal.id = 'u' + this.getClientID(client);
5 : userName=cglobal.username == null ? ' fc_lurker' : cglobal.username;
6 : this.users_so.setProperty(clocal.id, { name:userName, cam:cam,mic:mic,sex:userSex,ip:client.ip });
7 : }
最后要做的就是点击用户列表中的名称后显示相应的视频了
在onchange事件中写入下面代码就可以了:
1 : //av2_mc 是右边窗口的实例名称
2 : av2_mc.username_txt.text = this.getValue().name;
3 : av2_mc.selectUserId = userID[this.getValue().name];
4 : av2_mc.startReceive(userID[this.getValue().name]);
以上简要说明了基于FlashCom组件实现私聊的方法,分析的不是很周全,难免存在些Bug~只是作些交流,本人也会不断完善
posted on 2006-06-30 17:11
blog搬家了--[www.ialway.com/blog] 阅读(1373)
评论(2) 编辑 收藏 所属分类:
FMS