在網(wǎng)頁里實現(xiàn)文字聊天是比較容易的，但若要實現(xiàn)視頻聊天，就比較麻煩了。本文將實現(xiàn)一個純網(wǎng)頁版的視頻聊天和桌面分享的Demo，可直接在瀏覽器中運行，不需要安裝任何插件。

一. 主要功能及支持平臺

1.本Demo的主要功能有

二. 開發(fā)環(huán)境

1. 服務(wù)端：

    服務(wù)端開發(fā)環(huán)境是 Visual Sudio 2022 ，開發(fā)語言是 C# 。

2. Web端：

    PC版Web開發(fā)環(huán)境是 VS Code 1.85 ，使用 vue 3。

    手機版Web開發(fā)環(huán)境是 HBuilder 3.8.12，uni-app（導(dǎo)出H5）。

三. 運行效果

     此Demo的源碼分為三個部分，分別是服務(wù)端，PC端Web（橫版）和手機端Web（豎版）。接下來首先來看移動端Web的運行效果。 

（1）首先是登錄界面，在登錄界面有三個輸入框，依次為服務(wù)器IP、用戶賬號和用戶密碼，在本Demo中，用戶賬號和用戶密碼均可隨便填寫。           

（2）接下來是首頁界面，首頁界面有一個已連接的提示框，代表的意思是目前與服務(wù)端是連接狀態(tài)，當(dāng)因為網(wǎng)絡(luò)原因或者其他原因斷開時，則會提示已斷開連接。   

（3）發(fā)起視頻聊天，輸入對方的賬號，然后點擊請求視頻會話按鈕即可向?qū)Ψ桨l(fā)起視頻聊天請求，對方接受請求和即可聊天了。    

         下圖是手機端視頻聊天效果：

注意：手機端是不支持分享自己的桌面的，但是移動端可以觀看PC端桌面。

（4）接下來看看一下PC端的運行效果。

         登錄之后主頁界面，左上角是關(guān)于自己的一些信息，右邊窗口則是顯示連接對方的攝像頭或者桌面。    

（4）下圖是在PC端觀看他人桌面。

         輸入對方的賬號，然后點擊請求遠(yuǎn)程桌面，在對方同意后便可以觀看別人的屏幕了。  

四. 服務(wù)端源碼說明

        注意，由于瀏覽器的限制，如果你要將Web端部署到公網(wǎng)上，需要使用HTTPS協(xié)議，否則無法訪問攝像頭。

        與之對應(yīng)的，服務(wù)端也需要使用到WSS協(xié)議，因此需要準(zhǔn)備一份SSL證書用于部署。如果你僅僅只是在本地運行看一下效果，則無需準(zhǔn)備。

        上圖為服務(wù)端初始化代碼，若不打算部署只是在瀏覽器中加載本地Demo頁面，則應(yīng)將上圖中的第六行注釋掉，并將第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替換掉。

　　 若打算將網(wǎng)站部署在服務(wù)器上，則需要將第五行X509Certificate2中的兩個參數(shù)分別修改為你證書的路徑和密碼。

五. Web端源碼說明

       本Demo的中的Web端包含兩套代碼，其中移動端Web采用Uniapp進行開發(fā)，PC端Web采用Vue框架進行開發(fā)。為了便于理解，下面對源碼中的關(guān)鍵點進行講解說明，兩套代碼邏輯基本相同，因此這里不作區(qū)分。 

1. 消息定義

在本Demo中，我們定義了10個消息類型，用于Web端之間進行通信，其定義如下：

const informationTypes = {
  // 視頻請求
  VideoRequest: 0,

  // 回復(fù)視頻請求的結(jié)果
  VideoResult: 1,

  // 通知對方 掛斷 視頻連接
  CloseVideo: 2,

  // 通知好友 網(wǎng)絡(luò)原因，導(dǎo)致 視頻中斷
  NetReasonCloseVideo: 3,

  // 通知對方(忙線中) 掛斷 視頻連接
  BusyLine: 4,

  // 遠(yuǎn)程桌面請求
  DesktopRequest: 5,

  // 回復(fù)遠(yuǎn)程桌面請求的結(jié)果
  DesktopResult: 6,

  // 主動取消遠(yuǎn)程桌面請求
  CancelDesktop: 7,

  // 對方（主人端）主動斷開遠(yuǎn)程桌面
  OwnerCloseDesktop: 8,

  // 客人端斷開遠(yuǎn)程桌面連接
  GuestCloseDesktop: 9
};

      由于這些消息類型經(jīng)常會使用到，因此需要將其放到一個全局都能訪問到的地方，在移動端Web源碼中，它被放在了Vuex中。而在PC端Web源碼中，它放在src目錄下的omcs目錄下。 

2. 自定義消息處理器

     在登錄成功后的這個時機，通過調(diào)用多媒體管理器上的 SetCustomMessageReceivedCallback 方法，我們向 multimediaManager（多媒體管理器）注冊一個回調(diào)函數(shù)，這個回調(diào)函數(shù)會在接收到其他用戶或服務(wù)端的消息時被觸發(fā)。

      這個回調(diào)函數(shù)會接收一個對象類型的參數(shù)，其中包含了消息的類型和消息發(fā)起者的用戶名數(shù)據(jù)，然后就可以根據(jù)消息的類型來完成自己的業(yè)務(wù)操作了。下圖是本Demo中定義的消息處理器：  

3. 一對一語音視頻

      在本Demo中，一對一語音視頻聊天功能的實現(xiàn)邏輯簡而言之就是：例如用戶A想要與用戶B視頻聊天，那么用戶A向用戶B發(fā)送VideoRequest消息，在用戶B收到來自用戶A的VideoRequest消息時選擇同意與否，并將攜帶用戶B意愿數(shù)據(jù)的VideoResult消息發(fā)送用戶A。

// 請求視頻會話
const videoRequest = async () => {
  // ...
  multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null);
  // ...
};

// 響應(yīng)視頻會話
const videoResult = (flag) => {
　　// ...
　　multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, [flag ? 1 : 0], "");
　　// ...
};

4. 桌面分享

     與一對一語音視頻聊天功能類似，實現(xiàn)桌面分享也是一方發(fā)起請求，一方進行回應(yīng)。與語音視頻對應(yīng)的，桌面分享的請求的消息類型為DesktopRequest，響應(yīng)的消息類型為DesktopResult。

5. 斷網(wǎng)重連

     在網(wǎng)絡(luò)斷開時，用戶進入掉線狀態(tài)（與服務(wù)器斷開），每5秒會進行與服務(wù)器的重新連接。提前向多媒體管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回調(diào)，能夠在與媒體服務(wù)器斷開和重新連接成功時做一些事情。 

六. 如何在本地部署運行Web端

     Web端包含兩套代碼，其中移動端Web的目錄是H5MediaDemo_WebH5，PC端Web的目錄是H5MediaDemo_WebPC。 

1. 移動端web：

      由于移動端web是采用uniapp開發(fā)的，而uniapp項目需要通過HBuilder X來運行，因此，你需要在電腦上安裝一個HBuilder X，然后在HBuilderX中打開運行——>運行到瀏覽器，然后選擇一個瀏覽器就可以運行起來了，如下圖：

2. PC端web：

       PC端采用Vue3開發(fā)的，需要依賴NodeJS環(huán)境，因此，你需要在電腦上安裝一個NodeJS（建議安裝長期維護版）。在安裝完后，通過在命令行窗口輸入node -v和npm - v來檢查是否安裝成功：      

       確定安裝成功后，通過命令行進入到H5MediaDemo_WebPC的項目根目錄，然后輸入npm run dev即可將項目運行起來。 

七. 源碼下載

（1）PC版源碼

（2）手機版源碼

      另外，我們已經(jīng)部署好了測試服務(wù)器，以方便測試。

（1）PC  Web 測試網(wǎng)址 

（2）手機 Web 測試網(wǎng)址

      網(wǎng)頁版視頻聊天Demo實現(xiàn)的介紹就到這里了，謝謝！