編者按：自從新冠疫情爆發(fā)以來，大家經(jīng)常需要居家工作和線上開會(huì)，因此音視頻會(huì)議軟件變得越來越重要。LiveVideoStack Meet青島站邀請到了易軟天創(chuàng)的李文睿老師，為我們介紹在喧喧這款聊天軟件中，從無到有的視頻會(huì)議之路。

文/李文睿

整理/LiveVideoStack

大家好！我是李文睿，來自青島易軟天創(chuàng)網(wǎng)絡(luò)科技有限公司。我所在的小團(tuán)隊(duì)大概有3人，該團(tuán)隊(duì)是禪道團(tuán)隊(duì)中負(fù)責(zé)研發(fā)喧喧聊天軟件的小組。

今天，我分享的主題是：在喧喧這款聊天軟件中，從無到有的視頻會(huì)議之路。

1.1 單機(jī)可運(yùn)行、輕量、跨平臺(tái)、私有部署

首先，介紹我們的企業(yè)聊天軟件——喧喧。喧喧是一款單機(jī)可運(yùn)行的、輕量的、跨平臺(tái)的、私有部署的聊天軟件。之所以說喧喧是單機(jī)可運(yùn)行的、輕量的、私有部署的軟件，是因?yàn)樾恼w架構(gòu)足夠輕，可以私有部署到用戶的單臺(tái)服務(wù)器上。

接下來，介紹一下喧喧的功能。由于喧喧是企業(yè)協(xié)同聊天軟件，所以我們把精力更多地放在了針對企業(yè)和協(xié)同場景的功能開發(fā)上。首先，喧喧具有音視頻聊天、桌面共享的功能，還支持移動(dòng)客戶端和萬人級別的聊天。其次，卡片消息功能能夠讓用戶處理由第三方或自身推送的流程事務(wù)。同時(shí)，右鍵菜單功能可將消息轉(zhuǎn)為禪道需求、bug或第三方系統(tǒng)中的數(shù)據(jù)。此外，喧喧還有一套擴(kuò)展機(jī)制，第三方開發(fā)者可以通過擴(kuò)展機(jī)制為喧喧定義新的功能、嵌入web應(yīng)用等。喧喧還有單點(diǎn)登錄功能。

喧喧還有內(nèi)置Web應(yīng)用的功能，可使用WebHook向用戶發(fā)送通知消息，并支持Office等格式的文件預(yù)覽。之前提到，喧喧支持各種芯片架構(gòu)，即可在ARM、MIPS、X86、X86-64架構(gòu)服務(wù)器上穩(wěn)定運(yùn)行。喧喧還有LDAP和登錄IP限制的功能，這兩個(gè)功能都是企業(yè)辦公場景下的剛需。此外，喧喧還有加密存儲(chǔ)文件的功能。由于截圖也是聊天軟件中的重要功能之一，我們還為喧喧開發(fā)了一款炫酷的截圖工具——ZenShot，該工具已在GitHub上開源。

接下來，介紹喧喧的架構(gòu)。架構(gòu)主要分為三大塊，第一塊是后端處理服務(wù)器，其使用PHP實(shí)現(xiàn)，這是因?yàn)槲覀儓F(tuán)隊(duì)中的程序員大多是使用世界上最好語言PHP的程序員，并且我們需要將喧喧集成到其他產(chǎn)品中，而其他產(chǎn)品也使用PHP實(shí)現(xiàn)。但PHP也有短板，喧喧作為一個(gè)聊天軟件，需要維持與客戶端的連接，但在維持連接的場景下，PHP的性能不高，且處理起來比較麻煩。為了解決這個(gè)問題，我們做了一個(gè)消息中轉(zhuǎn)服務(wù)器，以達(dá)到維持連接和提升服務(wù)性能的目的。消息中轉(zhuǎn)服務(wù)器使用Go和Go的WebSocket庫gorilla實(shí)現(xiàn)，保證了服務(wù)器和客戶端間的連接。最后是客戶端，客戶端是全平臺(tái)的，支持Mac、Windows、Linux等平臺(tái)。移動(dòng)客戶端也可跨平臺(tái)，支持Android和iOS。另外只要有瀏覽器，也可以使用喧喧的網(wǎng)頁端。

1.2 Electron

為什么喧喧能夠做到全平臺(tái)兼容呢？是因?yàn)槲覀兪褂昧薊lectron。Electron的前身是GitHub旗下的編輯器Atom的GUI框架。雖然Atom編輯器已經(jīng)壽終正寢，但Electron卻可以說是如日中天。

大家的電腦上可能已經(jīng)有好幾個(gè)Electron，比如著名的編輯器VS Code，這是用Electron實(shí)現(xiàn)的。此外，交互設(shè)計(jì)工具Figma、Markdown編輯器Typora和Evernote的桌面端也都是用Electron實(shí)現(xiàn)的。

甚至還有人使用Electron運(yùn)行完整的Windows 95操作系統(tǒng)，這個(gè)項(xiàng)目十分有意思，可在GitHub上找到。由此可以看出，Electron確實(shí)十分強(qiáng)大。

圖中的是從Electron官網(wǎng)摘抄的一句話：Electron允許使用Web技術(shù)構(gòu)建跨平臺(tái)的桌面應(yīng)用。這是因?yàn)镋lectron可以理解為一個(gè)Chrome瀏覽器，Chrome通常代表了最新的Web標(biāo)準(zhǔn)，所以Electron可以使用大多數(shù)的新的Web API和Web技術(shù)。此外，Electron還進(jìn)行了系統(tǒng)API的集成，開發(fā)時(shí)僅需使用JS進(jìn)行調(diào)用，對開發(fā)人員十分友好，無需操心各系統(tǒng)下的平臺(tái)差異性。當(dāng)然，Electron也有短板，Electron可以認(rèn)為是一個(gè)Chrome，Chrome的內(nèi)存消耗很大，使用Electron的軟件的體積通常會(huì)達(dá)到至少一百兆。但是，Electron的好處也是明顯的，我們可以使用Web技術(shù)開發(fā)各種桌面應(yīng)用，一個(gè)前端工程師也可以用其做一個(gè)桌面應(yīng)用。因此，如果大家需要開發(fā)新的桌面應(yīng)用，我會(huì)推薦Electron。

1.3 “Dirty Hack”

然后，還想跟大家分享一些有點(diǎn)hack的有趣的細(xì)節(jié)。

后端服務(wù)器和消息中轉(zhuǎn)服務(wù)器以及消息中轉(zhuǎn)服務(wù)器和客戶端之間的數(shù)據(jù)傳遞方式是有趣的，我稱之為HTTP Over WebSocket，即經(jīng)由WebSocket轉(zhuǎn)發(fā)的HTTP協(xié)議通信。客戶端通過WebSocket向消息中轉(zhuǎn)服務(wù)器發(fā)送消息請求，該消息請求會(huì)原封不動(dòng)地POST給后端服務(wù)器，得到回復(fù)后，再分發(fā)給需要被通知的客戶端。這樣就實(shí)現(xiàn)了基于PHP后端的高性能的WebSocket服務(wù)。

我們的數(shù)據(jù)使用JSON傳輸，JSON是一個(gè)較低效的文本數(shù)據(jù)交換格式。雖然JSON方便使用，但是每次傳輸?shù)捏w積較大，比如這一串JSON里有效的數(shù)據(jù)量大概只占了三分之一。為了優(yōu)化數(shù)據(jù)傳輸，我們研究了一套JSON的壓縮機(jī)制。我們先定義了接口的數(shù)據(jù)格式和默認(rèn)值，然后做了字典，用索引代替已知的長字符串。通過這種方法，我們將圖中上半部分的JSON壓縮成了圖中下半部分的JSON，縮小了大概一半的體積，并且編解碼過程的效率較高。此外，我們還集成了RoadRunner（一款使用Go的協(xié)程來調(diào)度PHP程序的、高性能PHP應(yīng)用服務(wù)器），還將其集成到了同樣是Go實(shí)現(xiàn)的消息中轉(zhuǎn)服務(wù)器中。這能極大地提升性能，幫助實(shí)現(xiàn)單服務(wù)器在萬人級別的場景下的穩(wěn)定運(yùn)行。

2.1 為什么要做音視頻

接下來進(jìn)入正題，開始走音視頻之路，談?wù)勎覀優(yōu)槭裁匆鲆粢曨l。最初，我們是一群快樂的Zoom付費(fèi)用戶，Zoom在2019年前是方便使用的視頻工具，公司每次需要與外地同事開會(huì)時(shí)，都會(huì)首選Zoom。再后來，由于網(wǎng)絡(luò)環(huán)境的惡化和Zoom運(yùn)營的態(tài)度轉(zhuǎn)變，Zoom在中國的運(yùn)營沒有以前直接，出現(xiàn)了代理商，服務(wù)體驗(yàn)變差。再之后，新冠疫情爆發(fā)，2020年后，我們經(jīng)常需要居家辦公，為了解決每次線上開會(huì)體驗(yàn)不佳的問題，我們尋求了很多辦法。我們首先在網(wǎng)上找了很多其他的視頻軟件，包括當(dāng)時(shí)剛起步的騰訊會(huì)議，但最終沒有找到滿意的視頻軟件，所以本著一定要解決工作中的痛苦的精神，我們最后選擇成為在聊天軟件中做音視頻的“痛苦的”開發(fā)者，開始做音視頻。

2.2 集成Intel OWT

我們先在GitHub上找靈感，思考集成哪款音視頻服務(wù)，最終找到了Intel的OWT音視頻媒體服務(wù)器，并嘗試集成這款服務(wù)。

OWT服務(wù)支持MCU和SFU兩種模式，由于當(dāng)時(shí)我們剛?cè)腴T，所以直接選用了MCU模式。所謂MCU模式，就是服務(wù)器接收所有用戶推送的媒體流并進(jìn)行混流，將它們合并到一條流中，再分發(fā)給用戶，這樣每個(gè)用戶只需推送一個(gè)流和拉一個(gè)流。這種模式對服務(wù)器的配置要求比較高，但是能夠節(jié)約帶寬資源。

在集成OWT時(shí)，我們花費(fèi)了很多力氣，折騰了差不多一周后，我們初步實(shí)現(xiàn)了音頻會(huì)議的功能，但中間的過程非常痛苦。比如，OWT本身需要編譯，在編譯時(shí)我們需要拉取其他的代碼，例如Google的WebRTC的代碼，受限于網(wǎng)絡(luò)，我們經(jīng)常遇到構(gòu)建失敗的情況，最后不得不購買一臺(tái)國外的服務(wù)器來專門編譯OWT。此外，我們還發(fā)現(xiàn)將其分發(fā)給用戶也是一件困難的事情，因?yàn)樾且豢钏接胁渴鸬牧奶燔浖層脩粲H自部署OWT是不現(xiàn)實(shí)的，于是我們嘗試將其Docker化，但OWT的運(yùn)行環(huán)境較大，我們在去年才將其精簡、壓縮成了161兆大小。

這是剛做喧喧音頻時(shí)音頻功能的截圖，當(dāng)時(shí)花了一周的時(shí)間在內(nèi)網(wǎng)中做了相關(guān)的嘗試。

后來，我們很快實(shí)現(xiàn)了視頻會(huì)議功能。這得益于MCU模式的特點(diǎn)，不需要擔(dān)心視頻布局問題，可以很輕松地實(shí)現(xiàn)推流和拉流，并由OWT做好一切內(nèi)容。

2.3 屏幕共享和移動(dòng)端

然后，我們還實(shí)現(xiàn)了屏幕共享功能和移動(dòng)端的開發(fā)。屏幕共享功能和視頻會(huì)議功能是同期實(shí)現(xiàn)的，屏幕共享功能中使用了MediaDevice之類的Web API，可以獲取屏幕的視頻流，并將其推送到服務(wù)端。在開發(fā)移動(dòng)端時(shí)，我們則花費(fèi)了較大的力氣。

這是當(dāng)時(shí)喧喧桌面共享功能的截圖。

移動(dòng)端使用Flutter實(shí)現(xiàn)，使用Flutter與使用Electron的目的一樣，希望只編寫一次代碼就可在多個(gè)平臺(tái)下同時(shí)運(yùn)行。Flutter對RTC的支持是足夠的，有很多第三方庫輔助我們實(shí)現(xiàn)相關(guān)功能。我們一共花了兩周多的時(shí)間，實(shí)現(xiàn)了移動(dòng)端音視頻。

2.4 集成SRS

后來，我們不斷收到用戶反饋，用戶說不使用音視頻服務(wù)時(shí)，該服務(wù)也會(huì)占用資源，而使用該服務(wù)時(shí)，資源占用很高、體積大，于是我們開始思考解決辦法。我們發(fā)現(xiàn)，OWT使用了RabbitMQ和MongoDB，這二者在閑時(shí)也會(huì)占用資源，于是我們考慮更換音視頻后端。最終我們決定使用SRS，SRS是一款國產(chǎn)的開源的音視頻項(xiàng)目。

在遷移時(shí)，我們發(fā)現(xiàn)SRS僅支持SFU模式，于是需要從MCU模式切換到SFU模式，這樣的改變會(huì)帶來一些變化。首先是布局的變化，在SFU模式下，我們需要親自排布視頻并在客戶端上呈現(xiàn)，而不由服務(wù)端進(jìn)行排布，對此我們只需開發(fā)一些前端的功能，而這是容易實(shí)現(xiàn)的。但同時(shí)也存在一些問題，以后再跟大家詳細(xì)介紹。

SRS的文檔非常全面，在GitHub上面，其Wiki有797條。得益于詳盡的文檔和之前集成OWT的經(jīng)驗(yàn)，我們很快地完成了SRS的遷移。

這是近期喧喧音視頻的界面，我們將其做成了獨(dú)立的窗口。

03 萬能的WebRTC

WebRTC技術(shù)在飛速地發(fā)展，近期我們使用WebRTC實(shí)現(xiàn)了客戶端之間點(diǎn)對點(diǎn)的大文件傳輸功能。具體地，通過使用WebRTC的DataChannel和PeerConnection直接傳輸大文件。由此看出，WebRTC的應(yīng)用廣泛，各大瀏覽器對WebRTC的支持也很全面。我們期待用WebRTC做更多的事情，比如桌面共享和控制、甚至元宇宙，當(dāng)然，還要做更好的會(huì)議功能。

我今天的分享到此結(jié)束，謝謝大家！