多人交互畫板系統(tǒng)設計與實現(xiàn)

摘要：隨著互聯(lián)網(wǎng)技術的發(fā)展，遠程會議和教學的需求日益增長。現(xiàn)有的平臺往往局限于音視頻通話或文件共享，未能充分支持設計人員在會議中的多人協(xié)作繪圖需求。為此，設計并實現(xiàn)了一個用于遠程會議協(xié)作的多人交互畫板系統(tǒng)。該系統(tǒng)支持實時繪圖同步、音視頻通話以及多媒體文件討論功能。通過騰訊云服務器部署HTTPS服務，并結合We?bRTC和騰訊實時通信（TRTC）技術，實現(xiàn)了穩(wěn)定且高效的多人協(xié)作體驗。

關鍵詞：多人交互畫板；Web前端；HTTPS服務器；WebRTC

中圖分類號：TP393

文獻標識碼：A

文章編號：1009-3044（2025）14-0050-03

0引言

隨著互聯(lián)網(wǎng)技術的不斷進步與5G網(wǎng)絡的廣泛部署，遠程辦公已成為一種日益普遍的工作模式，顯著提升了工作效能與靈活性[1]。Gartner公司的研究報告指出，過去五年中全球范圍內遠程工作的比例顯著增長，尤其是在2020年，遠程工作的需求急劇增加，遠程工作人員的比例從2019年的大約30%躍升至60%以上，并預測至2025年該比例將進一步提升至70%以上[2]。此外，Zoom平臺的數(shù)據(jù)也顯示其日活躍用戶數(shù)量在2020年初至2021年初間，從大約1000萬增長至3億[3]。盡管遠程辦公與遠程會議軟件的廣泛應用解決了諸多傳統(tǒng)辦公難題，但現(xiàn)有平臺在支持設計人員會議中的多人協(xié)同繪圖功能上仍存在不足，無法支持多人根據(jù)現(xiàn)場攝像頭采集的畫面進行在線繪制，亦無法解決上傳媒體和同步繪制等問題。針對上述問題，本文設計并實現(xiàn)了一套基于騰訊云服務器的多人交互畫板系統(tǒng)。該系統(tǒng)不僅采用了先進的Web前端技術構建用戶界面，還融合了WebRTC與騰訊實時通信（TRTC）技術，以提供高效穩(wěn)定的音視頻通話服務[4-5]。本研究旨在通過這些技術手段的應用，促進遠程協(xié)作工具的創(chuàng)新與發(fā)展，為適應未來的遠程辦公趨勢做出貢獻。

1系統(tǒng)總體設計

1.1系統(tǒng)邏輯架構設計

本系統(tǒng)由五個主要層次構成：訪問層、表現(xiàn)層、通信層、服務層和數(shù)據(jù)層，如圖1所示。訪問層支持多平臺接入，包括移動設備（iOS/Android）及桌面環(huán)境（Win?dows/Mac）。表現(xiàn)層采用HTML、JavaScript和CSS實現(xiàn)響應式設計，提供協(xié)作繪圖、多媒體文件上傳與保存以及音視頻通信，并處理來自后端服務器的事件反饋。通信層采用HTTPS協(xié)議以保障數(shù)據(jù)傳輸?shù)陌踩裕⑼ㄟ^WebSocket協(xié)議實現(xiàn)實時雙向即時通信，確保前端頁面與后端服務器的實時信息交互需求得到滿足。服務層中，HTTPS服務器用于建立安全連接和MIME類型文件服務；后端處理服務器基于Express框架開發(fā)，支持跨域資源共享（CORS）配置，負責處理跨域請求、前端事件廣播和日志監(jiān)控。數(shù)據(jù)層則負責將用戶的繪圖數(shù)據(jù)持久化存儲于本地磁盤，確保數(shù)據(jù)的安全與完整。

1.2系統(tǒng)功能結構設計

本研究設計的多人在線畫板系統(tǒng)包含多個模塊，具體功能如表1所示。

2系統(tǒng)功能實現(xiàn)

2.1房間管理模塊

后端服務器通過數(shù)組創(chuàng)建房間并監(jiān)聽是否有客戶端加入。客戶端輸入房間號并點擊加入按鈕，使用WebSocket協(xié)議將加入請求發(fā)送至服務器。服務器監(jiān)聽加入的房間號是否為創(chuàng)建的房間號，隨后執(zhí)行“加入房間”事件，接收請求并進行加入房間的操作，將客戶端加入房間數(shù)組中。

當客戶端點擊退出按鈕時，通過WebSocket協(xié)議將退出房間事件發(fā)送至服務器。服務器接收到退出信息后，廣播給房間內的其他用戶，并調用TRTC服務器的API接口，關閉音視頻流，最后將退出的客戶端從房間數(shù)組中刪除，完成退出房間的操作。

2.2繪制模塊

用戶使用鼠標在畫布上進行繪制，畫布跟蹤記錄鼠標的初始位置和移動位置，并在畫布上填充鼠標移動過的位置。通過WebSocket技術，將繪制的位置、房間號、畫筆顏色等信息發(fā)送至服務器。服務器接收信息后，將其廣播給房間內的其他用戶。其他用戶接收到信息后，按照信息將繪制內容同步至畫布上，這一過程對用戶而言是完全透明的。

2.3文件管理模塊

用戶上傳文件后，系統(tǒng)畫布檢測上傳文件的類型。對于圖片文件，系統(tǒng)直接將其上傳至畫布上；而對于視頻文件，則將其拆分成多個幀，并逐幀顯示在視頻畫布上。文件上傳至畫布后，通過Axios的post方法向服務器發(fā)送POST請求，并攜帶文件數(shù)據(jù)。后端服務器接收到請求后，處理文件上傳事件，返回上傳結果，并將文件信息廣播給房間中的其他用戶，最終接收文件并將其在畫布上顯示出來。

2.4畫筆管理模塊

通過前端技術，橡皮擦采用前端JS技術中的簡單“destination-out”模式表示擦除，而鋼筆則使用“source-over”模式表示正常繪制模式。用戶還可以選擇畫筆的顏色以及畫筆的粗細。當用戶更改顏色或畫筆的粗細時，同樣將這些信息發(fā)送給后端服務器進行處理和轉發(fā)，最終實現(xiàn)繪制畫筆的同步。

2.5畫布管理模塊

在本系統(tǒng)的設計中，集成了兩個獨立的操作畫布，盡管對于最終用戶來說，這兩個畫布的表現(xiàn)形式是透明的。第一個畫布用于呈現(xiàn)用戶上傳的靜態(tài)圖像數(shù)據(jù)以及執(zhí)行繪圖操作。第二個畫布則專為動態(tài)視頻文件的幀級顯示而定制。鑒于視頻素材以逐幀方式呈現(xiàn)的特點，將視頻幀與靜態(tài)圖像及繪圖功能置于同一畫布操作環(huán)境中，將會導致上傳的視頻文件無法正常播放。

當客戶端保存畫布時，畫布上的所有信息，包括實時繪制的內容、上傳的文件以及開啟的攝像頭信息，都會保存下來，并存儲到客戶端本地磁盤中。在未開啟音視頻功能的情況下，畫布系統(tǒng)通過創(chuàng)建一個虛擬畫布來存儲當前活動畫布上的所有內容。而在音視頻通信會話期間，系統(tǒng)通過調用TRTC服務器提供的應用程序編程接口（API）來捕獲當前視頻流的幀數(shù)據(jù)，最終創(chuàng)建一個虛擬的畫布，以保存顯示在畫布上的所有信息。

清空畫布將清除顯示在兩個畫布上的所有信息。當客戶端清空畫布時，畫布上的所有信息將被清除并返回至畫布的初始狀態(tài)。

2.6通信模塊

通信模塊承擔了兩項主要職責：一是建立并維護前端與后端之間的持久連接；二是作為信息中轉站，促進前端與后端之間的數(shù)據(jù)交換。具體而言，前端發(fā)送HTTPS請求至HTTPS服務器，服務器響應此請求，并利用Socket.IO技術封裝WebSocket協(xié)議，從而使客戶端與后端服務器之間建立持久連接。當連接建立后，每當前端發(fā)生新的繪制事件時，該事件將被實時發(fā)送至后端服務器。隨后，服務器將接收的事件廣播至同一房間內的所有其他客戶端，這些客戶端依據(jù)接收到的事件更新其本地畫布，從而實現(xiàn)多用戶間的同步繪制效果。

2.7音視頻模塊

在啟動音視頻通話功能后，系統(tǒng)通過TRTC技術初始化本地音視頻流，并借助本地硬件設備采集音視頻數(shù)據(jù)。采集到的數(shù)據(jù)經(jīng)過壓縮和編碼處理后，通過TRTC云服務器轉發(fā)至其他參與者。其他用戶在監(jiān)聽音視頻事件時檢測到媒體流可用后，即可訂閱并接收來自對方的音視頻流。接收到的數(shù)據(jù)經(jīng)過解碼處理后，將在屏幕上實時顯示對方的畫面。

2.8服務器模塊

本系統(tǒng)采用云服務器部署了三類服務器節(jié)點，分別包括前端服務器、HTTPS服務器以及后端服務器。前端服務器負責展示應用程序的用戶界面；HTTPS服務器提供安全的數(shù)據(jù)傳輸服務；后端服務器則負責處理前端發(fā)送的事件，并將處理后的事件轉發(fā)給其他用戶。

2.8.1搭建前端服務器

且穩(wěn)定的靜態(tài)文件托管解決方案InternetInformationServices（IIS，并配備了用戶友好）提供了一套成熟的管理界面。因此，前端服務器選擇使用IIS進行搭建，在云服務器環(huán)境中部署靜態(tài)文件。通過配置域名并部署SSL證書，實現(xiàn)了網(wǎng)站的安全發(fā)布。

2.8.2構建HTTPS服務器

合處理大量并發(fā)連接Node.js技術基于事件驅動和非阻塞，并能夠提供高性能的服務I/O模型，適。HTTPS服務器在Node.js環(huán)境下構建，旨在提供安全的Web服務并處理來自客戶端的請求。通過配置所需的域名證書，實現(xiàn)了HTTPS的安全連接。

2.8.3搭建后端服務器

Express框架作為Node.js生態(tài)系統(tǒng)中的輕量級Web應用框架，提供了簡潔的API和豐富的功能集。后端服務器在Node.js環(huán)境中采用Express框架搭建，能夠高效地處理前端請求，確保數(shù)據(jù)傳輸?shù)陌踩裕⒅С謴碗s的業(yè)務邏輯處理。

3系統(tǒng)測試

本研究中的系統(tǒng)測試的環(huán)境如表2所示。

使用三個終端進行驗證：在學校實驗室的筆記本電腦（Lenovo，Windows11系統(tǒng)，學校端），對應表格的第二行配置；在家中的臺式機電腦（Windows10系統(tǒng)，家庭端），對應表格的第三行配置；智能手機（榮耀手機，HarmonyOS系統(tǒng)，移動端），對應表格的第四行配置。

3.1實時繪制功能

當用戶進入指定的虛擬房間后，在計算機終端記錄時間戳，隨后由位于三個不同地理位置的參與者協(xié)同完成繪圖任務。實驗結果顯示，各端的繪圖同步性能表現(xiàn)出高度的一致性。完成后的繪圖效果如圖2所示，該圖依次展示了來自學校實驗室、家庭環(huán)境及移動設備的實時協(xié)作繪圖界面。

3.2上傳文件實時繪制功能

用戶通過點擊按鈕上傳圖片文件，系統(tǒng)將自動在其他客戶端加載并同步該圖片文件。隨后，各端用戶可以基于同步的圖片文件進行實時繪制。如圖3所示。

同樣，用戶可以通過上傳視頻文件并在視頻播放過程中進行繪制。此外，系統(tǒng)提供“暫停”按鈕，允許用戶在需要時停止視頻播放，以便進行精確的實時繪制操作。

3.3音視頻通話繪制功能

學校端采集的現(xiàn)場音視頻數(shù)據(jù)通過TRTC服務器進行傳輸和轉發(fā)，確保房間內的所有客戶端能夠同步接收到音視頻數(shù)據(jù)。這樣一來，三個客戶端的用戶可以實現(xiàn)實時交流，并同步繪制動態(tài)畫面。

3.4畫布管理功能

畫布管理功能包括畫布清空與畫布保存兩部分。當客戶端執(zhí)行清空畫布操作時，系統(tǒng)將清除畫布上的所有信息，恢復至初始狀態(tài)。當客戶端執(zhí)行保存畫布操作時，系統(tǒng)會將當前畫布的信息存儲到客戶端的本地磁盤中。如圖4所示，保存的畫板數(shù)據(jù)將存儲在磁盤中，以備后續(xù)使用。

4結論

多人交互畫板系統(tǒng)有效支持會議中多人同時在畫板上繪制，從而實現(xiàn)與他人的實時討論。系統(tǒng)提供了靈活多樣的繪圖工具，并支持多媒體文件的上傳與展示，確保參與者能夠在統(tǒng)一的平臺上共享信息。通過集成TRTC技術，系統(tǒng)實現(xiàn)了音視頻通話功能。相較于現(xiàn)有的解決方案，本系統(tǒng)的顯著優(yōu)勢在于能夠實時同步多名用戶的繪制內容，支持多媒體文件的上傳并在同一畫板界面上進行實時繪制。同時，通過集成TRTC技術，系統(tǒng)在支持音視頻通話的同時，還能實時繪制并保存采集到的視頻幀數(shù)據(jù)。這些特性使得跨地域的遠程團隊能夠實現(xiàn)高效且便捷的協(xié)作環(huán)境。

隨著遠程會議需求的增長，遠程會議將越來越普遍。未來工作將重點放在進一步優(yōu)化用戶界面和交互設計，提升用戶體驗，并增加數(shù)據(jù)庫功能模塊，以滿足海量繪制畫布的存儲需求，并保障用戶信息的安全保存。

參考文獻：

[1]王雷.基于音視頻實時交互的遠程協(xié)助系統(tǒng)軟件設計和開發(fā)[D].杭州：浙江工業(yè)大學，2020.

[2]張峰.新冠疫情期小微電商A公司遠程辦公團隊合作管理研究[D].杭州：浙江工商大學，2022.

[3]杭敏，綦雪.2021年全球傳媒產(chǎn)業(yè)發(fā)展報告[J].傳媒，2022（16）：16-21.

[4]王藝燕.基于HTML+CSS+JS的網(wǎng)頁版2048的實現(xiàn)[J].電子世界，2017（9）：32，34.

[5]JofWebRTC-basedvideoconferencingANSENB，GOODWINT，GUPTAV，etal[J.Performanceevaluation].ACMSIGMETRICSPerformanceEvaluationReview，2018，45（3）：56-68.

【通聯(lián)編輯：張薇】