幾十行JavaScript指令碼就能輕鬆實現視訊通話

來源:互聯網
上載者:User

幾十行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();}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.