您好,欢迎访问一九零五行业门户网

通过JavaScript脚本轻松实现视频通话

视频聊天室
通过学习,我自己也做了个简单的小例子,几十行javascript脚本就能轻松实现视频通话;也不用去下载指定的什么浏览器,因为ie、firefox、chrome等windows平台主流浏览器全部通过,完美运行。下边就跟大伙分享分享我的成果,布局代码就不贴出来了,只贴javascript脚本。
一、加载anychat for web sdk库
首先还是得先加载anychat for web sdk库
[html]  
<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>
二、全局变量定义
 定义全局变量
[javascript]  
var mdefaultserveraddr = demo.anychat.cn;     // 默认服务器地址  
var mdefaultserverport = 8906;              // 默认服务器端口号  
var mselfuserid = -1;                   // 本地用户id  
var mtargetuserid = -1;                 // 目标用户id(请求了对方的音视频)
三、调用初始化函数
网页加载完成后判断有没有安装插件和插件是否是最新
[javascript]  
// 页面加载完成 初始化  
function logicinit() {    // 初始化     
    var need_anychat_apilevel = 0;  
    var errorcode = brac_initsdk(need_anychat_apilevel);  
    if (errorcode == gv_err_success)    // 初始化插件成功     
        document.getelementbyid(login_div).style.display = block;  // 显示登录界面     
    else    // 没有安装插件,或是插件版本太旧,显示插件下载界面     
        document.getelementbyid(prompt_div).style.display = block;    // 显示提示层     
}
四、调用登录函数
在这里服务器地址和端口都写死,输入用户名就可以登录
登录按钮点击事件:
[javascript]  
// 登录系统  
function logintohall() {  
    brac_connect(mdefaultserveraddr, mdefaultserverport);  // 连接服务器     
    brac_login(document.getelementbyid(username).value, , 0);    // 登录系统,密码为空也可登录     
}
调用登录函数后首先会触发连接服务器函数
[javascript] 
// 客户端连接服务器,bsuccess表示是否连接成功,errorcode表示出错代码  
function onanychatconnect(bsuccess, errorcode) {  
    if (errorcode == 0) { }    // 连接服务器成功         
     else alert(连接服务器失败);      //连接失败作提示,此时系统不会触发登录系统函数  
}
连接服务器成功后会触发登录系统回调函数
[javascript 
// 客户端登录系统,dwuserid表示自己的用户id号,errorcode表示登录结果:0 成功,否则为出错代码,参考出错代码定义  
function onanychatloginsystem(dwuserid, errorcode) {  
    if (errorcode == 0) {    // 登录成功,显示大厅界面,隐藏登录界面。失败的话什么也不做,维持原状     
        mselfuserid = dwuserid;   
        document.getelementbyid(login_div).style.display = none;   //隐藏登录界面     
        document.getelementbyid(hall_div).style.display = block;   //显示大厅界面     
    }  
}
五、调用进入房间函数
登录成功后显示大厅,大厅里就个输入框和一个 进入房间 按钮
点击 进入房间 按钮 调用函数
[javascript]  
// 进入房间  
function enterroom(){    // 进入自定义房间  
    brac_enterroom(parseint(document.getelementbyid(customroomid).value), , 0);  //进入房间     
}
进入房间触发回调函数
[javascript]  
// 客户端进入房间,dwroomid表示所进入房间的id号,errorcode表示是否进入房间:0成功进入,否则为出错代码  
function onanychatenterroom(dwroomid, errorcode) {  
    if (errorcode == 0) {  // 进入房间成功,显示房间界面,隐藏大厅界面;进入房间失败时不作任何动作     
        document.getelementbyid(hall_div).style.display = none; //隐藏大厅界面     
        document.getelementbyid(room_div).style.display = block;  //显示房间界面     
        brac_usercameracontrol(mselfuserid, 1);  // 打开本地视频     
        brac_userspeakcontrol(mselfuserid, 1);   // 打开本地语音                     
        // 设置本地视频显示位置     
        brac_setvideopos(mselfuserid, document.getelementbyid(anychatlocalvideodiv), anychat_video_local);  
        // 设置远程视频显示位置(没有关联到用户,只是占位置)                           
        brac_setvideopos(0, document.getelementbyid(anychatremotevideodiv), anychat_video_remote);  
    }  
}
进入房间时,会触发在线用户回调函数
[javascript] 
// 收到当前房间的在线用户信息,进入房间后触发一次,dwusercount表示在线用户数(包含自己),dwroomid表示房间id  
function onanychatroomonlineuser(dwusercount, dwroomid) {  
    // 判断是否需要关闭之前已请求的用户音视频数据         
    if (mtargetuserid != -1) {      // mtargetuserid 表示  上次视频会话的用户id  为自定义变量             
        brac_usercameracontrol(mtargetuserid, 0);     // 关闭远程视频        
        brac_userspeakcontrol(mtargetuserid, 0);     // 关闭远程语音  
        mtargetuserid = -1;  
    }  
    if (dwusercount > 1)     // 在该函数中判断是否有在线用户,有的话就打开其中一个远程视频  
        setthevideo();  
}
有用户退出房间时判断是否远程用户,并作出相应操作
[javascript]  
// 用户进入(离开)房间,dwuserid表示用户id号,benterroom表示该用户是进入(1)或离开(0)房间  
function onanychatuseratroom(dwuserid, benterroom) {  
    if (benterroom == 1)  
        if (mtargetuserid == -1) setthevideo();  
    else {  
        if (mtargetuserid == dwuserid)  
            mtargetuserid = -1;  
    }  
}
发送信息时调用函数
[javascript]  
// 发送信息  
function sendmessage() {  
    brac_sendtextmessage(0, 0, document.getelementbyid(sendmsg).innerhtml);     //调用发送信息函数   msg:信息内容  
    document.getelementbyid(receivemsg).innerhtml += 我: + document.getelementbyid(sendmsg).innerhtml + <br />;  
    document.getelementbyid(sendmsg).innerhtml = ;  
}
收到在线用户发来信息时会触发函数
[javascript]  
// 收到文字消息  
function onanychattextmessage(dwfromuserid, dwtouserid, bsecret, lpmsgbuf, dwlen) {  
    document.getelementbyid(receivemsg).innerhtml += brac_getusername(dwfromuserid) + : + lpmsgbuf + <br />;  // 收到信息显示到接收框  
}
自定义函数
[javascript] 
//自定义函数 请求远程视频用户  
function setthevideo() {  
    var useridlist = brac_getonlineuser();    // 获取所有在线用户id     
    brac_usercameracontrol(useridlist[0], 1);   // 请求对方视频     
    brac_userspeakcontrol(useridlist[0], 1);   // 请求对方语音     
    brac_setvideopos(useridlist[0], document.getelementbyid(anychatremotevideodiv), anychat_video_remote);    // 设置远程视频显示位置  
    mtargetuserid = useridlist[0];  
}
六、退出房间
退出房间调用函数
[javascript]  
function outofroom(){          
    brac_leaveroom(dwroomid);  
}
七、退出系统
退出系统调用函数
[javascript]  
function outofsystem(){          
    brac_logout();  
}
到此,简单的视频聊天室就完成了...
简例截图:
登录界面:
大厅界面:
房间界面:
其它类似信息

推荐信息