当前位置：代码迷 >> JavaScript >> 经过JavaScript调用实现视频聊天室

详细解决方案

经过JavaScript调用实现视频聊天室

热度：676 发布时间：2013-03-27 11:22:42.0

通过JavaScript调用实现视频聊天室

视频聊天室

最近公司做项目，需要找一套跨平台的即时通讯解决方案，希望是Web浏览器的，声音要清楚，视频要清晰，流量小……但是目?前国内这类方案太少了，目前只找到一个，这是案例：(http://www.anychat.cn/web/)；我在CSDN网上看到的，这个案例整合了音视频编码、多媒体通讯领域领先的开发技术和丰富的产品经验而设计网页?版视频聊天室，我看了里面的开发文档说可通过JavaScript简单地快速地二次开发，下面根据官方示例代码，将一些框架提炼出来，结合自己的分析总结，以备其他朋友参考。
?

一、加载AnyChat for Web SDK库：

首先将anychatevent.js文件和anychatsdk.js文件加载到页面中。

[html]?view plaincopy

<script?language="javascript"?type="text/javascript"?src="./javascript/anychatsdk.js"?charset="GB2312"></script>??
<script?language="javascript"?type="text/javascript"?src="./javascript/anychatevent.js"?charset="GB2312"></script>??

?

anychatevent.js?为事件回调

anychatsdk.js?为常量定义和方法定义

用户只需对网页进行布局，布局完成后对SDK中方法进行调用，输入参数获得结果进行操作即可。

AnyChat SDK的所有功能函数都有个返回值，用户可根据常量定义获得函数返回值的意义，从而进行相应的操作。

?

二、初始化SDK

网页加载完成后进行初始化插件。

[javascript]?view plaincopy

BRAC_InitSDK(apilevel);????//?初始化SDK，返回出错代码??

根据系统返回错误代码，与常量进行对比，获得结果

[javascript]?view plaincopy

var?GV_ERR_SUCCESS???=?0;????//?成功??
var?GV_ERR_PLUGINNOINSTALL?=?1010000;??//?插件没有安装??
var?GV_ERR_PLUGINOLDVERSION?=?1010001;??//?插件版本太低??

?

三、登录系统

在登录界面设置中进行设置服务器地址和端口号。

点击登录按钮

[javascript]?view plaincopy

BRAC_Connect(lpServerAddr,?dwPort);????//?连接服务器??
BRAC_Login(lpUserName,?lpPassword,?dwParam);?//?登录系统??

?

四、进入大厅

登录成功后系统会触发回调函数?

[javascript]?view plaincopy

OnAnyChatLoginSystem(dwUserId,?errorcode);????//?登录系统回调函数??

?用户可在回调函数中作出相应动作，例如

[javascript]?view plaincopy

DisplayLoadingDiv(false);??
AddLog("OnAnyChatLoginSystem(userid="?+?dwUserId?+?",?errorcode="?+?errorcode?+?")",?LOG_TYPE_EVENT);??
ShowHallDiv(true);??

显示主界面，隐藏登录界面和加载等待层

?

五、进入房间

用户可以通过方法进入指定房间

[javascript]?view plaincopy

BRAC_EnterRoom(dwRoomid,?lpRoomPass,?dwParam);????//?进入房间??

1.打开本地视频音频

进入房间后系统触发回调函数

[javascript]?view plaincopy

OnAnyChatEnterRoom(dwRoomId,?errorcode);????//?进入房间回调函数??

在该回调函数中应作以下动作

[javascript]?view plaincopy

BRAC_UserCameraControl(mSelfUserId,?1);??//?打开本地视频??
BRAC_UserSpeakControl(mSelfUserId,?1);???//?打开本地语音??
??
ShowNotifyMessage("Welcome?use?AnyChat,?successfully?enter?the?room:"?+?dwRoomId,?NOTIFY_TYPE_SYSTEM);??
?//?设置本地视频显示位置??
?BRAC_SetVideoPos(mSelfUserId,?GetID("AnyChatLocalVideoDiv"),?"ANYCHAT_VIDEO_LOCAL");??
?//?设置远程视频显示位置（没有关联到用户，只是占位置）??
BRAC_SetVideoPos(0,?GetID("AnyChatRemoteVideoDiv"),?"ANYCHAT_VIDEO_REMOTE");??
???

?

2.发送接收文本信息

房间界面右下角为文本信息框，发送文本信息和接收文本信息将在这里显示。

发送文本信息需调用方法

[javascript]?view plaincopy

BRAC_SendTextMessage(dwUserId,?bSecret,?lpMsgBuf);????//?发送文本信息??

接收到用户发来信息系统触发函数

[javascript]?view plaincopy

OnAnyChatTextMessage(dwFromUserId,?dwToUserId,?bSecret,?lpMsgBuf,?dwLen);????//?接收文本信息??

?

3.获取在线用户?

用户第一次进入房间时会触发函数

[javascript]?view plaincopy

OnAnyChatRoomOnlineUser(dwUserCount,?dwRoomId)??

该方法只会在用户进入房间时触发一次，在该方法中调用函数，获得在线用户

[javascript]?view plaincopy

BRAC_GetOnlineUser();????//?获取当前房间在线用户列表??

?

之后在线用户的变更系统会通过回调函数进行通知，bEnterRoom = 1 代表有新用户进入，否则为用户退出房间

[javascript]?view plaincopy

OnAnyChatUserAtRoom(dwUserId,?bEnterRoom);????//?用户进入（离开）房间??

?

4.打开远程视频

进入房间时远程视频为关闭状态，开启需要在左上角单击在线用户，调用以下函数

[javascript]?view plaincopy

BRAC_UserCameraControl(userid,?1);???//?请求对方视频??
BRAC_UserSpeakControl(userid,?1);???//?请求对方语音??
//?设置远程视频显示位置??
BRAC_SetVideoPos(userid,?GetID("AnyChatRemoteVideoDiv"),?"ANYCHAT_VIDEO_REMOTE");??

?

5.退出房间

[javascript]?view plaincopy

BRAC_LeaveRoom();????//?退出房间??

?

6.退出系统

[javascript]?view plaincopy

BRAC_Logout();????//?注销系统??

?

7.其他功能

此外?AnyChat SDK?还提供了其他的各种功能函数。例如查询版本号、对用户相关状态的查询、对设备各项参数进行设置等等...

?

AnyChat SDK 实例下载：http://download.csdn.net/detail/bairui_allen/5093078

相关解决方案