視訊聊天室

一、載入AnyChat for Web SDK庫

首先還是得先載入AnyChat for Web SDK庫

<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>
 

二、全域性變數定義

 定義全域性變數

var mDefaultServerAddr = "demo.anychat.cn";		// 預設伺服器地址
var mDefaultServerPort = 8906; 				// 預設伺服器埠號
var mSelfUserId = -1; 					// 本地使用者ID
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";    // 顯示提示層   
}
 

四、呼叫登入函式

在這裡伺服器地址和埠都寫死，輸入使用者名稱就可以登入

登入按鈕點選事件：

// 登入系統
function LoginToHall() {
    BRAC_Connect(mDefaultServerAddr, mDefaultServerPort);  // 連線伺服器   
    BRAC_Login(document.getElementById("username").value, "", 0);    // 登入系統，密碼為空也可登入   
}

呼叫登入函式後首先會觸發連線伺服器函式

// 客戶端連線伺服器，bSuccess表示是否連線成功，errorcode表示出錯程式碼
function OnAnyChatConnect(bSuccess, errorcode) {
    if (errorcode == 0) { }    // 連線伺服器成功       
     else alert("連線伺服器失敗");      //連線失敗作提示，此時系統不會觸發登入系統函式
}
 

連線伺服器成功後會觸發登入系統回撥函式

// 客戶端登入系統，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";   //顯示大廳介面   
    }
}

五、呼叫進入房間函式

登入成功後顯示大廳，大廳裡就個輸入框和一個 進入房間 按鈕

點選 進入房間 按鈕 呼叫函式

// 進入房間
function EnterRoom(){    // 進入自定義房間
    BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0);  //進入房間   
}

進入房間觸發回撥函式

// 客戶端進入房間，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");
    }
}

進入房間時，會觸發線上使用者回撥函式

// 收到當前房間的線上使用者資訊，進入房間後觸發一次，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();
}

有使用者退出房間時判斷是否遠端使用者，並作出相應操作

// 使用者進入（離開）房間，dwUserId表示使用者ID號，bEnterRoom表示該使用者是進入（1）或離開（0）房間
function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {
    if (bEnterRoom == 1)
        if (mTargetUserId == -1) SetTheVideo();
    else {
        if (mTargetUserId == dwUserId)
            mTargetUserId = -1;
    }
}

傳送資訊時呼叫函式

// 傳送資訊
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 OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {
    document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgBuf + "<br />";  // 收到資訊顯示到接收框
}

自定義函式

//自定義函式 請求遠端視訊使用者
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 OutOfRoom(){        
    BRAC_LeaveRoom(dwRoomid);
}

七、退出系統

退出系統呼叫函式

function OutOfSystem(){        
    BRAC_Logout();
}

到此，簡單的視訊聊天室就完成了...