視訊聊天室
透過學習,我自己也做了個簡單的小例子,幾十行JavaScript腳本就能輕鬆實現視訊通話;也不用去下載指定的什麼瀏覽器,因為IE、firefox、chrome等windows平台主流瀏覽器全部通過,完美運作。下邊跟大夥分享我的成果,版面程式碼就不貼出來了,只貼JavaScript腳本。
一、載入AnyChat for Web SDK函式庫
首先還是得載入AnyChat for Web SDK庫
[html]
二、全域變數定義
定義全域變數
[javascript]
var mDefaultServerAddr = "demo.anybcha. // 預設伺服器連接埠號碼
var mSelfUserId = -1; // 本地使用者ID
var mTarget UserId
三、呼叫初始化函數網頁載入完成後判斷是否有安裝外掛程式和外掛程式是否為最新[javascript] // 頁載入完成初始化 function LogicInit() { //var errorcode = BRAC_InitSDK (NEED_ANYCHAT_APILEVEL);
if (errorcode == GV_ERR_SUCCESS) // 初始化外掛程式成功
.登入介面
else // 沒有安裝插件,或是外掛程式版本太舊,顯示器外掛程式下載介面
document.getElementById("prompt_div").style.display = "block"; // 顯示提示層登入
這裡伺服器位址和連接埠都寫死,輸入使用者名稱就可以登入
登入按鈕點選事件:
[javascript]
// 登入系統
function LoginHall() { // 連線伺服器
BRAC_Login(document.getElementById("username").value, "", 0); // 登入系統,密碼為空白也可登入🜠 連接伺服器函數
[javascript]
// 用戶端連接伺服器,bSuccess表示是否連接成功,errorcode表示出錯程式碼
function OnAnyChatConnect(bSuccess, errorcode) { function OnAnyChatConnect(bSuccess, errorcode) { 連線伺服器成功
else alert("連線伺服器失敗"); //連線失敗作提示,此時系統不會觸發登入系統函數 [javascript
// 用戶端登入系統,dwUserId表示自己的使用者ID號,errorcode表示登入結果:0 成功,否則為出錯程式碼,參考出錯程式碼定義
function OnAnyChatLoginSystem(dwUserId, error errorcode == 0) { // 登入成功,顯示大廳介面,隱藏登入介面。失敗的話什麼也不做,維持原狀
mSelfUserId = dwUserId;
document.getElementByo
document.getElementByo("login_"). document.getElementByo("login_"). document.getElementById("hall_div"). style.display = "block"; //顯示大廳介面 } } 五、呼叫進入房間按鈕點選進入房間按鈕呼叫函數[javascript] // 進入房間 function EnterRoom(){ // 進入自訂房間BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0); //進入房間
}
// 客戶端進入房間,dwRoomId表示所進入房間的ID號,errorcode表示是否進入房間:0成功進入,否則為出錯代碼 function OnAnyChatEnterRoom(dwRoomId, errorcode) { / if (errorcode == if成功,顯示房間介面,隱藏大廳介面;進入房間失敗時不做任何動作 document.getElementById("hall_div").style.display = "none" ).style.display = "block"; //顯示房間介面 BRAC_UserCameraControl(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_UsereraControl(BRAC_UsereraControlControl(, 0 ); BRAC_UserSpeakControl(mTargetUserId, 0); // 關閉遠端語音
mTargetUserId = -1;
}
if (dwUserCount > 1)
}
有用戶退出房間時判斷是否遠端用戶,並作出相應操作
[javascript]
// 用戶進入(離開)房間,dwUserId表示用戶ID號,bEnterRoom表示該用戶是進入(1)或離開(0 )房間
function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {
if (bEnterRoom == 1)
else {
if (mTargetUserId == dwUserId)
mTargetUserId = -1;
}
}
發送訊息時呼叫函數
[ BRAC_SendTextMessage(0, 0, document.getElementById( "SendMsg").innerHTML); br />";
document.getElementById("SendMsg").innerHTML = "";
}
/java}
/java 。
"; // 收到訊息顯示到接收框
}
自訂函數
[javascript]
//自訂函數請求遠端視訊使用者
function SetTheVideo() {
var useridlist = BRAC_GetOnlineUser(); // 取得所有線上使用者ID // 請求對方視頻
BRAC_UserSpeakControl(useridlist[0], 1); // 請求對方語音
BRAC_SetVideoPos(useridlist[0], 17.get // 設定遠端視訊顯示位置
mTargetUserId = useridlist[0];
}
六、退出房間
退出房間呼叫函數
[javascript]
RACf LeaveRoom(dwRoomid); } 七、退出系統退出系統呼叫函數[javascript] function OutOfSystem(){簡單的視訊聊天室就完成了...
簡例截圖:
登入介面:
大廳介面:房間介面: