当前位置:编程学习 > JAVA >>

通过JavaScript脚本来实现网页视频聊天室的快速制作

现在网上很多朋友在弄网页的视频聊天室

通过学习,我自己也做了个简单的小例子,几十行JavaScript脚本就能轻松实现视频通话;也不用去下载指定的什么浏览器,因为IE、firefox、chrome等windows平台主流浏览器全部通过,完美运行。下边就跟大伙分享分享我的成果,布局代码就不贴出来了,只贴JavaScript脚本。
下面是我所使用的开发包的特点:(浏览器上的音频即时通讯应用开发)


支持Windows平台浏览器上的音频即时通讯应用开发
提供JavaScript语言API接口,脚本编程
兼容IE、Chrome、Firefox、360、遨游等主流浏览器
支持iOS、Android、PC等设备和Web之间的互联互通

 


一、加载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> 

<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(请求了对方的音视频) 

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";    // 显示提示层     

// 页面加载完成 初始化
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);    // 登录系统,密码为空也可登录     

// 登录系统
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("连接服务器失败");      //连接失败作提示,此时系统不会触发登录系统函数  

// 客户端连接服务器,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";   //显示大厅界面     
    } 

// 客户端登录系统,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(){    // 进入自定义房间  

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,