概述
首先，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直播與小程式直播。