視頻聊天室

通過學習，我自己也做了個簡單的小例子，幾十行JavaScript腳本就能輕松實現(xiàn)視頻通話；也不用去下載指定的什么瀏覽器，因為IE、firefox、chrome等windows平臺主流瀏覽器全部通過，完美運行。下邊就跟大伙分享分享我的成果，布局代碼就不貼出來了，只貼JavaScript腳本。

一、加載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（請求了對方的音視頻）

三、調用初始化函數(shù)

網(wǎng)頁加載完成后判斷有沒有安裝插件和插件是否是最新

// 頁面加載完成 初始化 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";??? // 顯示提示層?? }

?

四、調用登錄函數(shù)

在這里服務器地址和端口都寫死，輸入用戶名就可以登錄

登錄按鈕點擊事件：

// 登錄系統(tǒng) function LoginToHall() {BRAC_Connect(mDefaultServerAddr, mDefaultServerPort);? // 連接服務器?? BRAC_Login(document.getElementById("username").value, "", 0);??? // 登錄系統(tǒng)，密碼為空也可登錄?? }

?

調用登錄函數(shù)后首先會觸發(fā)連接服務器函數(shù)

// 客戶端連接服務器，bSuccess表示是否連接成功，errorcode表示出錯代碼 function OnAnyChatConnect(bSuccess, errorcode) {if (errorcode == 0) { } // 連接服務器成功 else alert("連接服務器失敗"); //連接失敗作提示，此時系統(tǒng)不會觸發(fā)登錄系統(tǒng)函數(shù) }

?

連接服務器成功后會觸發(fā)登錄系統(tǒng)回調函數(shù)

// 客戶端登錄系統(tǒng)，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";?? //顯示大廳界面?? } }

?

五、調用進入房間函數(shù)

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

點擊 進入房間 按鈕 調用函數(shù)

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

?

進入房間觸發(fā)回調函數(shù)

// 客戶端進入房間，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");// 設置遠程視頻顯示位置（沒有關聯(lián)到用戶，只是占位置）???????????????????????? BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE");} }

進入房間時，會觸發(fā)在線用戶回調函數(shù)

// 收到當前房間的在線用戶信息，進入房間后觸發(fā)一次，dwUserCount表示在線用戶數(shù)（包含自己），dwRoomId表示房間ID function OnAnyChatRoomOnlineUser(dwUserCount, dwRoomId) {// 判斷是否需要關閉之前已請求的用戶音視頻數(shù)據(jù)?????? if (mTargetUserId != -1) {????? // mTargetUserId 表示? 上次視頻會話的用戶ID? 為自定義變量?????????? BRAC_UserCameraControl(mTargetUserId, 0);???? // 關閉遠程視頻????? BRAC_UserSpeakControl(mTargetUserId, 0);???? // 關閉遠程語音mTargetUserId = -1;}if (dwUserCount > 1) ??? // 在該函數(shù)中判斷是否有在線用戶，有的話就打開其中一個遠程視頻SetTheVideo(); }

?

有用戶退出房間時判斷是否遠程用戶，并作出相應操作

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

?

發(fā)送信息時調用函數(shù)

// 發(fā)送信息 function SendMessage() {BRAC_SendTextMessage(0, 0, document.getElementById("SendMsg").innerHTML);???? //調用發(fā)送信息函數(shù)?? Msg:信息內容document.getElementById("ReceiveMsg").innerHTML += "我：" + document.getElementById("SendMsg").innerHTML + "<br />";document.getElementById("SendMsg").innerHTML = ""; }

?

收到在線用戶發(fā)來信息時會觸發(fā)函數(shù)

// 收到文字消息 function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgBuf + "<br />"; // 收到信息顯示到接收框 }

?

自定義函數(shù)

//自定義函數(shù) 請求遠程視頻用戶 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]; }

?

六、退出房間

退出房間調用函數(shù)

function OutOfRoom(){ BRAC_LeaveRoom(dwRoomid); }

?

七、退出系統(tǒng)

退出系統(tǒng)調用函數(shù)

function OutOfSystem(){ BRAC_Logout(); }

?

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

?

簡例截圖： 登錄界面： 大廳界面： ? 房間界面：

?

簡單實例下載：demo.rar

總結

以上是生活随笔為你收集整理的通过JavaScript脚本轻松实现视频通话的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。