概述
首先，web的免安裝，即用即走的特性，再加上沒有版本的限制，可以快速迭代或者試錯，特別的適合一些業務場景，例如創新性業務，快速迭代業務，關於web能不能支撐直播業務，web直播性能行不行，帶着這兩個疑問，我們對web直播能力做了探索。通過讀這篇文章你可以瞭解到到web、h5、小程序是否能夠做直播，以下探索基於網校學研大班直播體系。
web1.0版本橫空出世
背景是產品側提出講座業務要重構，這時候天時地利人和都佔有了，快速組建團隊，耗時1個多月，做出了支持rtmp視頻播放、即時聊天、投票、獻禮物等功能，簡單，夠用。但天有不測風雲，由於這樣那樣的原因，最終項目也沒有上線，夭折了。你以爲就此草草收場，那不是我們的脾氣，繼續發動每一個人的小宇宙。
web1.1版本初生牛犢不怕虎
這個版本最大的亮點是要跟PC客戶端進行功能追齊，那擺在我們面前有三個大坑需要填，一個是web的AI能力，一個是連麥中的rtc能力，還有一個是web的課堂互動拉齊。
首先解決最難的，AI能力，通過探索，我們藉助hark插件進行收音，
this._speechEvents = hark(this._stream) this._speechEvents.on('speaking', () => { // createLog('檢測到說話') }) this._speechEvents.on('stopped_speaking', () => { // createLog('檢測到停止說話') }) this._speechEvents.on('volume_change', (db) => { })
啓動work使用了lamejs，使用AudioContext,在收集聲音時給encodeMp3Worker發消息，轉成buffer傳給AI，完成了AI語音識別能力，圖像識別還沒有完成，理論上也能實現。
const audioCtx = this._audioCtx = new AudioCtx() this._audioStream = audioCtx.createMediaStreamSource(this._stream) this._audioRecorder = audioCtx.createScriptProcessor(16384, 1, 1) this._audioRecorder.onaudioprocess = (e) => { const buffer = e.inputBuffer.getChannelData(0) this._encodeMp3Worker.postMessage({ type: 'encode', payload: buffer }) }
AI插件地址OpenAI:@xes/web-live-framework/libs/openai/index
第二個，集成rtc能力。這塊我們直接複用了集團直播中臺的rtc sdk，快速孵化了我們的業務。RTC SDK@xes/weblive-framework/components/base/players/libs/rtcengine_js_xueersi-1.5.0
第三個，與PC端功能拉齊。這個是一個消耗體力的事情，首先了解客戶端開發的樣子，其次拆分任務，分工開發。這也給項目帶來很大的問題，很多人蔘與，質量把控難度大，這個時候是一個代碼量暴增的時期。雖然有CR，依然沒有擺脫被重構的命運，這也許就是一個大型項目的宿命。
web直播2.0粉墨登場
重構的原因：開發之間矛盾出現，問題頻出，開始互相不信任；代碼風格差異大，理解成本增加；重複代碼多。爲了解決團隊合作問題，爲了解決項目體驗與穩定性，爲了讓項目能繼續活着，開啓了第一版本的重構。
首先，設計了直播框架，將播放器，聊天，信令通道，日誌，消息管理中心，收斂到直播框架中，直播框架發佈以npm包進行版本管理，並且直播框架設計了一些base類，約定了一些類的基本方法，例如互動base，消息處理base，初始化base，業務通過重載，實現了自己的業務功能。
這次的重構產出的直播框架，後來快速孵化了PHP大會項目，海外PC端直播項目，輕直播半身直播項目、小程序直播等，這次的重構還是蠻成功的。web直播框架地址@xes/weblive-framework，支持RTMP播放器、RTC播放器、塗鴉、小程序直播，h5-rtc直播。
你以爲這就完事了，並不是，現階段直播項目單頁面應用，已經發展出了61個模塊，30餘中互動。其中一些互動也到了不得不重構的時候了。
web直播2.1版本到來
這個版本主要是一個模塊的重構，主要是對信令處理模塊進行了處理，其次對未來課件、語音答題、語音測評進行了模塊的重構，升級eslint。
1、對未來課件、語音答題等互動通過開發中間類來實例化不同互動，解決了互動組件的耦合性問題
2、對信令消息處理模塊將控制邏輯與業務實現做了拆分
3、統一eslint：@xes/eslint-cof
互動消息處理模塊新的流程圖：
總結
1、經過不斷的技術探索，文章開始的問題有了答案：web是可以做直播的，在一些場景還具有一定優勢
2、從我們自測的數據來看（待線上數據的檢驗）,大部分指標與native表現相近。
寫在最後
特別感謝所有參與web直播開發的小夥伴們，你們有着極客精神。
關於直播相關的技術歡迎交流，一起進步，未來想做h5直播與小程序直播。