在網頁裏實現文字聊天是比較容易的，但若要實現視頻聊天，就比較麻煩了。本文將實現一個純網頁版的視頻聊天和桌面分享的Demo，可直接在瀏覽器中運行，不需要安裝任何插件。
一. 主要功能及支持平臺
1.本Demo的主要功能有
（1）一對一語音視頻聊天。
（3）當客戶端掉線時，會進行自動重連，當網絡恢復後，重連成功。
2.支持的平臺
（1）支持的操作系統包括：Windows、信創國產Linux（銀河麒麟、統信UOS）、Android、iOS、Mac、鴻蒙OS。
（2）支持的CPU架構：X86/X64、ARM、MIPS、Loongarch。
（3）支持幾乎所有的主流瀏覽器：Chrome、Edge、Firefox、Safari、360瀏覽器、QQ瀏覽器等。
（4）另外，我們測試過，使用APP套殼，在WebView控件中加載Demo頁面，也是可以正常視頻聊天的。
如此，可以在C/S架構的客戶端或手機APP中嵌入WebView控件來引入視頻聊天或桌面分享功能的。
二. 開發環境
1. 服務端：
服務端開發環境是 Visual Sudio 2022 ，開發語言是 C# 。
2. Web端：
PC版Web開發環境是 VS Code 1.85 ，使用 vue 3。
手機版Web開發環境是 HBuilder 3.8.12，uni-app（導出H5）。
三. 運行效果
此Demo的源碼分爲三個部分，分別是服務端，PC端Web（橫版）和手機端Web（豎版）。接下來首先來看移動端Web的運行效果。
（1）首先是登錄界面，在登錄界面有三個輸入框，依次爲服務器IP、用戶賬號和用戶密碼，在本Demo中，用戶賬號和用戶密碼均可隨便填寫。
（2）接下來是首頁界面，首頁界面有一個已連接的提示框，代表的意思是目前與服務端是連接狀態，當因爲網絡原因或者其他原因斷開時，則會提示已斷開連接。
（3）發起視頻聊天，輸入對方的賬號，然後點擊請求視頻會話按鈕即可向對方發起視頻聊天請求，對方接受請求和即可聊天了。
下圖是手機端與PC端的視頻聊天效果：
注意：手機端是不支持分享自己的桌面的，但是移動端可以觀看PC端桌面。
（4）接下來看看一下PC端的運行效果。
登錄之後主頁界面，左上角是關於自己的一些信息，右邊窗口則是顯示連接對方的攝像頭或者桌面。
（4）下圖是在PC端觀看他人桌面。
輸入對方的賬號，然後點擊請求遠程桌面，在對方同意後便可以觀看別人的屏幕了。
四. 服務端源碼說明
注意，由於瀏覽器的限制，如果你要將Web端部署到公網上，需要使用HTTPS協議，否則無法訪問攝像頭。
與之對應的，服務端也需要使用到WSS協議，因此需要準備一份SSL證書用於部署。如果你僅僅只是在本地運行看一下效果，則無需準備。
上圖爲服務端初始化代碼，若不打算部署只是在瀏覽器中加載本地Demo頁面，則應將上圖中的第六行註釋掉，並將第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替換掉。
若打算將網站部署在服務器上，則需要將第五行X509Certificate2中的兩個參數分別修改爲你證書的路徑和密碼。
五. Web端源碼說明
本Demo的中的Web端包含兩套代碼，其中移動端Web採用Uniapp進行開發，PC端Web採用Vue框架進行開發。爲了便於理解，下面對源碼中的關鍵點進行講解說明，兩套代碼邏輯基本相同，因此這裏不作區分。
1. 消息定義
在本Demo中，我們定義了10個消息類型，用於Web端之間進行通信，其定義如下：
const informationTypes = { // 視頻請求 VideoRequest: 0, // 回覆視頻請求的結果 VideoResult: 1, // 通知對方 掛斷 視頻連接 CloseVideo: 2, // 通知好友 網絡原因，導致 視頻中斷 NetReasonCloseVideo: 3, // 通知對方(忙線中) 掛斷 視頻連接 BusyLine: 4, // 遠程桌面請求 DesktopRequest: 5, // 回覆遠程桌面請求的結果 DesktopResult: 6, // 主動取消遠程桌面請求 CancelDesktop: 7, // 對方（主人端）主動斷開遠程桌面 OwnerCloseDesktop: 8, // 客人端斷開遠程桌面連接 GuestCloseDesktop: 9 };
由於這些消息類型經常會使用到，因此需要將其放到一個全局都能訪問到的地方，在移動端Web源碼中，它被放在了Vuex中。而在PC端Web源碼中，它放在src目錄下的omcs目錄下。
2. 自定義消息處理器
在登錄成功後的這個時機，通過調用多媒體管理器上的 SetCustomMessageReceivedCallback 方法，我們向 multimediaManager（多媒體管理器）註冊一個回調函數，這個回調函數會在接收到其他用戶或服務端的消息時被觸發。
這個回調函數會接收一個對象類型的參數，其中包含了消息的類型和消息發起者的用戶名數據，然後就可以根據消息的類型來完成自己的業務操作了。下圖是本Demo中定義的消息處理器：
3. 一對一語音視頻
在本Demo中，一對一語音視頻聊天功能的實現邏輯簡而言之就是：例如用戶A想要與用戶B視頻聊天，那麼用戶A向用戶B發送VideoRequest消息，在用戶B收到來自用戶A的VideoRequest消息時選擇同意與否，並將攜帶用戶B意願數據的VideoResult消息發送用戶A。
// 請求視頻會話 const videoRequest = async () => { // ... multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null); // ... }; // 響應視頻會話 const videoResult = (flag) => { // ... multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, [flag ? 1 : 0], ""); // ... };
4. 桌面分享
與一對一語音視頻聊天功能類似，實現桌面分享也是一方發起請求，一方進行迴應。與語音視頻對應的，桌面分享的請求的消息類型爲DesktopRequest，響應的消息類型爲DesktopResult。
5. 斷網重連
在網絡斷開時，用戶進入掉線狀態（與服務器斷開），每5秒會進行與服務器的重新連接。提前向多媒體管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回調，能夠在與媒體服務器斷開和重新連接成功時做一些事情。
六. 如何在本地部署運行Web端
Web端包含兩套代碼，其中移動端Web的目錄是H5MediaDemo_WebH5，PC端Web的目錄是H5MediaDemo_WebPC。
1. 移動端web：
由於移動端web是採用uniapp開發的，而uniapp項目需要通過HBuilder X來運行，因此，你需要在電腦上安裝一個HBuilder X，然後在HBuilderX中打開運行——>運行到瀏覽器，然後選擇一個瀏覽器就可以運行起來了，如下圖：
2. PC端web：
PC端採用Vue3開發的，需要依賴NodeJS環境，因此，你需要在電腦上安裝一個NodeJS（建議安裝長期維護版）。在安裝完後，通過在命令行窗口輸入node -v和npm - v來檢查是否安裝成功：
確定安裝成功後，通過命令行進入到H5MediaDemo_WebPC的項目根目錄，然後輸入npm run dev即可將項目運行起來。
七. 源碼下載
（1）PC版源碼
（2）手機版源碼
另外，我們已經部署好了測試服務器，以方便測試。
（1）PC Web 測試網址
（2）手機 Web 測試網址
網頁版視頻聊天Demo實現的介紹就到這裏了，謝謝！