Web端輕鬆實現音視頻聊天通話

網絡上視頻主播的火熱帶動了網絡視頻聊天室開發行業的火熱。如今網上企業或者工做室在弄網頁的視頻聊天室。經過我的學習，借用別人的開發Demo（AnyChat SDK，網上隨便搜索一下就能夠下載的），加上幾十行JavaScript腳本就能輕鬆實現視頻通話；也不用去下載指定的什麼瀏覽器，由於IE、firefox、chrome等windows平臺主流瀏覽器所有經過，完美運行。下邊就跟大夥分享分享個人成果，佈局代碼就不貼出來了，只貼JavaScript腳本。

下面是我所使用的開發包的特色：

1.        支持Windows平臺瀏覽器上的音頻即時通信應用開發

2.        提供JavaScript語言API接口，腳本編程

3.        兼容IE、Chrome、Firefox、360、遨遊等主流瀏覽器

4.        支持iOS、Android、PC等設備和Web之間的互聯互通

 

1、加載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>

 

2、全局變量定義

 定義全局變量

var mDefaultServerAddr = "demo.anychat.cn";                  // 默認服務器地址

var mDefaultServerPort = 8906;                                         // 默認服務器端口號

var mSelfUserId = -1;                                                  // 本地用戶ID

var mTargetUserId = -1;                                      // 目標用戶ID（請求了對方的音視頻）

 

3、調用初始化函數

網頁加載完成後判斷有沒有安裝插件和插件是不是最新

// 頁面加載完成 初始化

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";    // 顯示提示層  

}

 

4、調用登陸函數

在這裏服務器地址和端口都寫死，輸入用戶名就能夠登陸

登陸按鈕點擊事件：

// 登陸系統

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];

}

 

6、退出房間

退出房間調用函數

function OutOfRoom(){       

    BRAC_LeaveRoom(dwRoomid);

}

 

7、退出系統

退出系統調用函數

function OutOfSystem(){       

    BRAC_Logout();

}

到此，簡單的視頻聊天室就完成了，若是你是我的的研究，不講究界面和風格，甚至能夠直接試用，能夠和朋友直接視頻聊天了，若是你是開發工做室，那麼請一個設計師，優化界面和其餘功能部署，那麼你的開發基本完成了！