永利402com官方网站由此JavaScript脚本轻巧完毕录像通话,通过JavaScript脚本来达成网页录制聊天室的火速创造

永利402com官方网站

摄像聊天室

前几天网络海人民广播广播台湾大学爱人在弄网页的录制聊天室

透过学习,作者本人也做了个大约的小例子,几十行JavaScript脚本就能够轻易实现录像通话;也不用去下载钦命的怎样浏览器,因为IE、firefox、chrome等windows平台主流浏览器全体透过,完美运转。下面就跟大家分享分享小编的名堂,布局代码就不贴出来了,只贴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库

一、加载AnyChat for Web SDK库

[html]  

率先依然得先加载AnyChat for Web SDK库

<script language=”javascript” type=”text/javascript”
src=”./javascript/anychatsdk.js” charset=”GB2312″></script>  

[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/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(乞请了对方的音摄像) 

[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  

[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”;    // 显示提醒层     

var mTargetUserId = -1;                 //
目的客商ID(须要了对方的音摄像)  

// 页面加载成功 初阶化
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]  

[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);    //
登陆种类,密码为空也可登陆  
}

function LogicInit() {    // 初始化     

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

    var NEED_ANYCHAT_APILEVEL = “0”;  

[javascript]
// 客商端连接服务器,bSuccess表示是或不是连接成功,errorcode表示出错代码  
function OnAnyChatConnect(bSuccess, errorcode) { 
    if (errorcode == 0) { }    // 连接服务器成功         
     else alert(“连接服务器失利”);     
//连接失利作提示,此时系统不会触发登陆系统函数  

    var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);  

// 客商端连接服务器,bSuccess表示是不是连接成功,errorcode表示出错代码
function OnAnyChatConnect(bSuccess, errorcode) {
    if (errorcode == 0) { }    // 连接服务器成功      
     else alert(“连接服务器失利”);     
//连接战败作提醒,此时系统不会触发登入系统函数
}
 

    if (errorcode == GV_ERR_SUCCESS)    // 开始化插件成功     

三番五次服务器成功后会触发登陆系统回调函数

        document.getElementById(“login_div”).style.display = “block”;
 // 突显登入分界面     

[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”;  
//显示大厅分界面     
    } 

    else    // 未有设置插件,或是插件版本太旧,展现插件下载分界面     

// 客户端登入种类,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”;  
//突显大厅分界面  
    }
}

        document.getElementById(“prompt_div”).style.display = “block”;
   // 展现提示层     

五、调用步入房间函数

}  

登入成功后显示大厅,大厅里就个输入框和三个 步入房间 按键

 

点击 步向房间 按键 调用函数

四、调用登陆函数

[javascript]
// 步入房间  
function EnterRoom(){    // 走入自定义房间  
   
BRAC_EnterRoom(parseInt(document.getElementById(“customroomid”).value),
“”, 0);  //进入房间     

在这里服务器地址和端口都写死,输入顾客名就足以登入

// 步向房间
function EnterRoom(){    // 进入自定义房间
   
BRAC_EnterRoom(parseInt(document.getElementById(“customroomid”).value),
“”, 0);  //进入房间  
}

登陆按键点击事件:

进去房间触发回调函数

[javascript]  

[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”); 
    } 

// 登入种类  

//
客商端步入房间,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”);
    }
}
跻身房间时,会触发在线顾客回调函数

function LoginToHall() {  

[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(); 

    BRAC_Connect(mDefaultServerAddr, mDefaultServerPort);  //
连接服务器     

//
收到当前房间的在线客商消息,步向房间后触发一次,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();
}

    BRAC_Login(document.getElementById(“username”).value, “”, 0);    //
登陆系统,密码为空也可登陆     

有顾客退出房间时判定是或不是远程顾客,并作出相应操作

}  

[javascript]
//
用户走入(离开)房间,dwUserId表示顾客ID号,bEnterRoom表示该客户是步入(1)或离开(0)房间  
function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) { 
    if (bEnterRoom == 1) 
        if (mTargetUserId == -1) SetTheVideo(); 
    else { 
        if (mTargetUserId == dwUserId) 
            mTargetUserId = -1; 
    } 

 

//
客商进入(离开)房间,dwUserId表示客商ID号,bEnterRoom表示该顾客是跻身(1)或离开(0)房间
function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {
    if (bEnterRoom == 1)
        if (mTargetUserId == -1) SetTheVideo();
    else {
        if (mTargetUserId == dwUserId)
            mTargetUserId = -1;
    }
}

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

发送音信时调用函数

[javascript] 

[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 = “”; 

// 客商端连接服务器,bSuccess表示是不是连接成功,errorcode表示出错代码  

// 发送消息
function SendMessage() {
    BRAC_SendTextMessage(0, 0,
document.getElementById(“SendMsg”).innerHTML);     //调用发送消息函数  
Msg:新闻内容
    document.getElementById(“ReceiveMsg”).innerHTML += “我:” +
document.getElementById(“SendMsg”).innerHTML + “<br />”;
    document.getElementById(“SendMsg”).innerHTML = “”;
}

function OnAnyChatConnect(bSuccess, errorcode) {  

接过在线客商发来新闻时会触发函数

    if (errorcode == 0) { }    // 连接服务器成功         

[javascript]
// 收到文字新闻  
function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret,
lpMsgBuf, dwLen) { 
    document.getElementById(“ReceiveMsg”).innerHTML +=
BRAC_GetUserName(dwFromUserId) + “:” + lpMsgBuf + “<br />”;  //
收到新闻显示到接收框  

     else alert(“连接服务器退步”);    
 //连接退步作提示,此时系统不会触发登陆系统函数  

// 收到文字音讯
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]; 

老是服务器成功后会触发登入系统回调函数

//自定义函数 伏乞远程录制客户
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 

六、退出房间

// 顾客端登陆系统,dwUserId表示自身的客商ID号,errorcode代表登入结果:0
成功,不然为失误代码,参照他事他说加以考察出错代码定义  

脱离房间调用函数

function OnAnyChatLoginSystem(dwUserId, errorcode) {  

[javascript]
function OutOfRoom(){         
    BRAC_LeaveRoom(dwRoomid); 

    if (errorcode == 0) {    //
登入成功,突显大厅分界面,遮掩登陆分界面。战败的话怎么也不做,原封不动     

function OutOfRoom(){       
    BRAC_LeaveRoom(dwRoomid);
}
 

        mSelfUserId = dwUserId;   

七、退出系统

        document.getElementById(“login_div”).style.display = “none”;  
//掩饰登入分界面     

剥离系统调用函数

        document.getElementById(“hall_div”).style.display = “block”;  
//突显大厅分界面     

[javascript] v
function OutOfSystem(){         
    BRAC_Logout(); 

    }  

function OutOfSystem(){       
    BRAC_Logout();
}
 

}  

到此,轻巧的录制聊天室就大功告成了…

 

 

五、调用步向房间函数

通过学习,小编自个儿也做了个简易的小例子,几十行JavaScript脚本就会轻轻便松完成摄像通话;也不用去…

签到成功后显示大厅,大厅里就个输入框和二个 走入房间 按键

点击 步向房间 开关 调用函数

[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();  

}  

 

到此,轻巧的录制聊天室就完事了…

 

简例截图:

报到分界面:

 

永利402com官方网站 1

大厅分界面:

 

永利402com官方网站 2

房子分界面:

 

永利402com官方网站 3

通过学习,小编要好也做了个大概的小例子,几十行JavaScript脚本就能够轻易达成录像通话;也不用去下载钦定的哪些浏览器,因为…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图