透過JavaScript腳本輕鬆實現視訊通話

視訊聊天室

透過學習，我自己也做了個簡單的小例子，幾十行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(){          

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

簡例截圖：

登入介面：

大廳介面：

房間介面：