首頁 > web前端 > js教程 > 主體

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

高洛峰
發布: 2016-11-26 16:30:57
原創
3861 人瀏覽過

視訊聊天室

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

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

簡例截圖:

登入介面:

大廳介面:

房間介面:

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板