現在網上很多朋友在弄網頁的視頻聊天室
通過學習，我自己也做了個簡單的小例子，幾十行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庫
<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();
}
到此，簡單的視頻聊天室就完成了...