幾十行j指令碼就能輕鬆實現視訊通話;也不用去下載指定的什麼瀏覽器,因為IE、firefox、chrome等windows平台主流瀏覽器全部通過,完美運行。下邊就跟大夥分享分享我的成果,布局代碼就不貼出來了,只貼j指令碼。
一、載入AnyChat for Web SDK庫
首先還是得先載入AnyChat for Web SDK庫
<script language="j" type="text/javascrpt" src="./j/anychatsdk.js" charset="GB2312"></script> <script language="j" type="text/javascrpt" src="./j/anychatevent.js" charset="GB2312"></script>
二、全域變數定義
定義全域變數
var mDefaultServerAddr = "demo.anychat.cn";// 預設伺服器位址var mDefaultServerPort = 8906; // 預設伺服器連接埠號碼var mSelfUserId = -1; // 本機使用者IDvar 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_diy").style.display = "block"; // 顯示登入介面 else // 沒有安裝外掛程式,或是外掛程式版本太舊,顯示外掛程式下載介面 document.getElementById("prompt_diy").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_diy").style.display = "none"; //隱藏登入介面 document.getElementById("hall_diy").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_diy").style.display = "none"; //隱藏大廳介面 document.getElementById("room_diy").style.display = "block"; //顯示房間介面 BRAC_UserCameraControl(mSelfUserId, 1); // 開啟本地視頻 BRAC_UserSpeakControl(mSelfUserId, 1); // 開啟本地語音 // 設定本地視頻顯示位置 BRAC_SetVideoPos(mSelfUserId, document.getElementById("AnyChatLocalVideodiy"), "ANYCHAT_VIDEO_LOCAL"); // 設定遠程視頻顯示位置(沒有關聯到使用者,只是佔位置) BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideodiy"), "ANYCHAT_VIDEO_REMOTE"); }}
進入房間時,會觸發線上使用者回呼函數
// 收到當前房間的線上使用者資訊,進入房間後觸發一次,dwUserCount表示線上使用者數(包含自己),dwRoomId表示房間IDfunction 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 + ""; document.getElementById("SendMsg").innerHTML = "";}
收到線上使用者發來資訊時會觸發函數
// 收到文字訊息function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) { document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + ":" + lpMsgBuf + ""; // 收到資訊顯示到接收框}
自訂函數
//自訂函數 請求遠程視頻使用者function SetTheVideo() { var useridlist = BRAC_GetOnlineUser(); // 擷取所有線上使用者ID BRAC_UserCameraControl(useridlist[0], 1); // 請求對方視頻 BRAC_UserSpeakControl(useridlist[0], 1); // 請求對方語音 BRAC_SetVideoPos(useridlist[0], document.getElementById("AnyChatRemoteVideodiy"), "ANYCHAT_VIDEO_REMOTE"); // 設定遠程視頻顯示位置 mTargetUserId = useridlist[0];}
六、退出房間
退出房間調用函數
function OutOfRoom(){ BRAC_LeaveRoom(dwRoomid);}
七、退出系統
退出系統調用函數
function OutOfSystem(){ BRAC_Logout();}