100代码实现音视频文字聊天

林俊钦

视频聊天室

调用AnyChat SDK ,几十行JavaScript脚本就能轻松实现视频通话；也不用去下载指定的什么浏览器，因为IE、firefox、chrome等windows平台主流浏览器全部通过，完美运行。下边就跟大伙分享分享我的成果，布局代码就不贴出来了，只贴JavaScript脚本。

一、加载AnyChat for Web SDK库

首先还是得先加载AnyChat for Web SDK库

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

复制代码

二、全局变量定义

定义全局变量

1. var mDefaultServerAddr = "demo.anychat.cn"; // 默认服务器地址
   
2. var mDefaultServerPort = 8906; // 默认服务器端口号
   
3. var mSelfUserId = -1; // 本地用户ID
   
4. var mTargetUserId = -1; // 目标用户ID（请求了对方的音视频）
   

复制代码

三、调用初始化函数

网页加载完成后判断有没有安装插件和插件是否是最新

1. // 页面加载完成 初始化
   
2. function LogicInit() { // 初始化
   
3. var NEED_ANYCHAT_APILEVEL = "0";
   
4. var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);
   
5. if (errorcode == GV_ERR_SUCCESS) // 初始化插件成功
   
6. document.getElementById("login_div").style.display = "block"; // 显示登录界面
   
7. else // 没有安装插件，或是插件版本太旧，显示插件下载界面
   
8. document.getElementById("prompt_div").style.display = "block"; // 显示提示层
   
9. }
   

复制代码

四、调用登录函数

在这里服务器地址和端口都写死，输入用户名就可以登录
登录按钮点击事件：

1. // 登录系统
   
2. function LoginToHall() {
   
3. BRAC_Connect(mDefaultServerAddr, mDefaultServerPort); // 连接服务器
   
4. BRAC_Login(document.getElementById("username").value, "", 0); // 登录系统，密码为空也可登录
   
5. }
   

复制代码

调用登录函数后首先会触发连接服务器函数

1. // 客户端连接服务器，bSuccess表示是否连接成功，errorcode表示出错代码
   
2. function OnAnyChatConnect(bSuccess, errorcode) {
   
3. if (errorcode == 0) { } // 连接服务器成功
   
4. else alert("连接服务器失败"); //连接失败作提示，此时系统不会触发登录系统函数
   
5. }
   

复制代码

连接服务器成功后会触发登录系统回调函数

1. // 客户端登录系统，dwUserId表示自己的用户ID号，errorcode表示登录结果：0 成功，否则为出错代码，参考出错代码定义
   
2. function OnAnyChatLoginSystem(dwUserId, errorcode) {
   
3. if (errorcode == 0) { // 登录成功，显示大厅界面，隐藏登录界面。失败的话什么也不做，维持原状
   
4. mSelfUserId = dwUserId;
   
5. document.getElementById("login_div").style.display = "none"; //隐藏登录界面
   
6. document.getElementById("hall_div").style.display = "block"; //显示大厅界面
   
7. }
   
8. }
   

复制代码

五、调用进入房间函数

登录成功后显示大厅，大厅里就个输入框和一个 进入房间 按钮
点击 进入房间 按钮 调用函数

1. // 进入房间
   
2. function EnterRoom(){ // 进入自定义房间
   
3. BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0); //进入房间
   
4. }
   

复制代码

进入房间触发回调函数

1. // 客户端进入房间，dwRoomId表示所进入房间的ID号，errorcode表示是否进入房间：0成功进入，否则为出错代码
   
2. function OnAnyChatEnterRoom(dwRoomId, errorcode) {
   
3. if (errorcode == 0) { // 进入房间成功，显示房间界面，隐藏大厅界面；进入房间失败时不作任何动作
   
4. document.getElementById("hall_div").style.display = "none"; //隐藏大厅界面
   
5. document.getElementById("room_div").style.display = "block"; //显示房间界面
   
6. BRAC_UserCameraControl(mSelfUserId, 1); // 打开本地视频
   
7. BRAC_UserSpeakControl(mSelfUserId, 1); // 打开本地语音
   
8. // 设置本地视频显示位置
   
9. BRAC_SetVideoPos(mSelfUserId, document.getElementById("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL");
   
10. // 设置远程视频显示位置（没有关联到用户，只是占位置）
    
11. BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE");
    
12. }
    
13. }
    

复制代码

进入房间时，会触发在线用户回调函数

1. // 收到当前房间的在线用户信息，进入房间后触发一次，dwUserCount表示在线用户数（包含自己），dwRoomId表示房间ID
   
2. function OnAnyChatRoomOnlineUser(dwUserCount, dwRoomId) {
   
3. // 判断是否需要关闭之前已请求的用户音视频数据
   
4. if (mTargetUserId != -1) { // mTargetUserId 表示 上次视频会话的用户ID 为自定义变量
   
5. BRAC_UserCameraControl(mTargetUserId, 0); // 关闭远程视频
   
6. BRAC_UserSpeakControl(mTargetUserId, 0); // 关闭远程语音
   
7. mTargetUserId = -1;
   
8. }
   
9. if (dwUserCount > 1) // 在该函数中判断是否有在线用户，有的话就打开其中一个远程视频
   
10. SetTheVideo();
    
11. }
    

复制代码

有用户退出房间时判断是否远程用户，并作出相应操作

1. // 用户进入（离开）房间，dwUserId表示用户ID号，bEnterRoom表示该用户是进入（1）或离开（0）房间
   
2. function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {
   
3. if (bEnterRoom == 1)
   
4. if (mTargetUserId == -1) SetTheVideo();
   
5. else {
   
6. if (mTargetUserId == dwUserId)
   
7. mTargetUserId = -1;
   
8. }
   
9. }
   

复制代码

发送信息时调用函数

1. // 发送信息
   
2. function SendMessage() {
   
3. BRAC_SendTextMessage(0, 0, document.getElementById("SendMsg").innerHTML); //调用发送信息函数 Msg:信息内容
   
4. document.getElementById("ReceiveMsg").innerHTML += "我：" + document.getElementById("SendMsg").innerHTML + "<br />";
   
5. document.getElementById("SendMsg").innerHTML = "";
   
6. }
   

复制代码

收到在线用户发来信息时会触发函数

1. // 收到文字消息
   
2. function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {
   
3. document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgBuf + "<br />"; // 收到信息显示到接收框
   
4. }
   

复制代码

自定义函数

1. //自定义函数 请求远程视频用户
   
2. function SetTheVideo() {
   
3. var useridlist = BRAC_GetOnlineUser(); // 获取所有在线用户ID
   
4. BRAC_UserCameraControl(useridlist[0], 1); // 请求对方视频
   
5. BRAC_UserSpeakControl(useridlist[0], 1); // 请求对方语音
   
6. BRAC_SetVideoPos(useridlist[0], document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // 设置远程视频显示位置
   
7. mTargetUserId = useridlist[0];
   
8. }
   

复制代码

六、退出房间

退出房间调用函数

1. function OutOfRoom(){
   
2. BRAC_LeaveRoom(dwRoomid);
   
3. }
   

复制代码

七、退出系统

退出系统调用函数

1. function OutOfSystem(){
   
2. BRAC_Logout();
   
3. }
   

复制代码

到此，简单的视频聊天室就完成了...



简例截图：

登录界面：

大厅界面：

房间界面：

简单实例下载：
demo.rar (11.59 KB, 下载次数: 41)

2013-6-13 15:12 上传

点击文件名下载附件
100实现音视频

lion521

我大概照你的做 / 登录系统
function LoginToHall() {
BRAC_Connect(mDefaultServerAddr, mDefaultServerPort); // 连接服务器
BRAC_Login(document.getElementById("username").value, "", 0); // 登录系统，密码为空也可登录
}
到连接服务器这块 就没任何反应，不返回值 也不往下进行，就卡在连接服务器这块，知道啥原因吗