視訊聊天室

最近公司做專案，需要找一套跨平臺的即時通訊解決方案，希望是Web瀏覽器的，聲音要清楚，視訊要清晰，流量小……但是目 前國內這類方案太少了，目前只找到一個，這是案例：(http://www.anychat.cn/web/)；我在CSDN網上看到的，這個案例整合了音視訊編碼、多媒體通訊領域領先的開發技術和豐富的產品經驗而設計網頁 版視訊聊天室，我看了裡面的開發文件說可通過JavaScript簡單地快速地二次開發，下面根據官方示例程式碼，將一些框架提煉出來，結合自己的分析總結，以備其他朋友參考。

一、載入AnyChat for Web SDK庫：

首先將anychatevent.js檔案和anychatsdk.js

檔案載入到頁面中。

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

anychatevent.js 為事件回撥

anychatsdk.js 為常量定義和方法定義

使用者只需對網頁進行佈局，佈局完成後對SDK中方法進行呼叫，輸入引數獲得結果進行操作即可。

AnyChat SDK的所有功能函式都有個返回值，使用者可根據常量定義獲得函式返回值的意義，從而進行相應的操作。

二、初始化SDK

網頁載入完成後進行初始化外掛。

BRAC_InitSDK(apilevel);    // 初始化SDK，返回出錯程式碼

根據系統返回錯誤程式碼，與常量進行對比，獲得結果

var GV_ERR_SUCCESS   = 0;    // 成功
var GV_ERR_PLUGINNOINSTALL = 1010000;  // 外掛沒有安裝
var GV_ERR_PLUGINOLDVERSION = 1010001;  // 外掛版本太低
 

三、登入系統

初始化成功則顯示登入介面

 

初始化失敗則顯示提示層

在登入介面 設定 中進行設定伺服器地址和埠號。

點選 登入 按鈕

BRAC_Connect(lpServerAddr, dwPort);    // 連線伺服器
BRAC_Login(lpUserName, lpPassword, dwParam); // 登入系統

四、進入大廳

登入成功進入主介面

登入成功後系統會觸發回撥函式 

OnAnyChatLoginSystem(dwUserId, errorcode);    // 登入系統回撥函式

 使用者可在回撥函式中作出相應動作，例如

DisplayLoadingDiv(false);
AddLog("OnAnyChatLoginSystem(userid=" + dwUserId + ", errorcode=" + errorcode + ")", LOG_TYPE_EVENT);
ShowHallDiv(true);

顯示主介面，隱藏登入介面和載入等待層

五、進入房間

使用者可以通過方法進入指定房間

BRAC_EnterRoom(dwRoomid, lpRoomPass, dwParam);    // 進入房間

1.開啟本地視訊音訊

進入房間後系統觸發回撥函式

OnAnyChatEnterRoom(dwRoomId, errorcode);    // 進入房間回撥函式

在該回調函式中應作以下動作

BRAC_UserCameraControl(mSelfUserId, 1);  // 開啟本地視訊
BRAC_UserSpeakControl(mSelfUserId, 1);   // 開啟本地語音

ShowNotifyMessage("Welcome use AnyChat, successfully enter the room:" + dwRoomId, NOTIFY_TYPE_SYSTEM);
 // 設定本地視訊顯示位置
 BRAC_SetVideoPos(mSelfUserId, GetID("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL");
 // 設定遠端視訊顯示位置（沒有關聯到使用者，只是佔位置）
BRAC_SetVideoPos(0, GetID("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE");
 

2.傳送接收文字資訊

房間介面右下角為文字資訊框，傳送文字資訊和接收文字資訊將在這裡顯示。

傳送文字資訊需呼叫方法

BRAC_SendTextMessage(dwUserId, bSecret, lpMsgBuf);    // 傳送文字資訊

接收到使用者發來資訊系統觸發函式

OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen);    // 接收文字資訊

3.獲取線上使用者 

使用者第一次進入房間時會觸發函式

OnAnyChatRoomOnlineUser(dwUserCount, dwRoomId)

該方法只會在使用者進入房間時觸發一次，在該方法中呼叫函式，獲得線上使用者

BRAC_GetOnlineUser();    // 獲取當前房間線上使用者列表

之後線上使用者的變更系統會通過回撥函式 進行通知，bEnterRoom = 1 代表有新使用者進入，否則為使用者退出房間

OnAnyChatUserAtRoom(dwUserId, bEnterRoom);    // 使用者進入（離開）房間

4.開啟遠端視訊

進入房間時遠端視訊為關閉狀態，開啟需要在左上角單擊線上使用者，呼叫以下函式

BRAC_UserCameraControl(userid, 1);   // 請求對方視訊
BRAC_UserSpeakControl(userid, 1);   // 請求對方語音
// 設定遠端視訊顯示位置
BRAC_SetVideoPos(userid, GetID("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE");

5.退出房間

BRAC_LeaveRoom();    // 退出房間

6.退出系統

BRAC_Logout();    // 登出系統

7.其他功能

此外 AnyChat SDK 還提供了其他的各種功能函式。例如 查詢版本號、對使用者相關狀態的查詢、對裝置各項引數進行設定等等...