在線互動教室 demo 快速體驗 | 掘金技術徵文

最近手頭有項目須要搭建一個在線直播教室的應用，通過這幾年的快速發展，在線直播教育這個領域也有很多平臺提供了相關的視音頻服務。相比其餘行業的視音頻服務，在線直播教育的硬性需求主要在如下幾點：

• 低延時：直播教學過程當中，教師與學生間的互動一般會有一對1、一對多的音視頻連麥狀況，因爲教育場景的特殊性，對於低延時的要求極其嚴苛。尤爲不少狀況下還涉及到跨國或面向偏遠地區的學生等特殊狀況。
• 音視頻流暢清晰：直播過程當中不會出現卡頓，畫面抖動，聲畫不一樣步，畫面模糊等狀況。
• 教學功能：好比白板，及時問答，教鞭等
• 回放功能：能讓學生可以及時複習課程內容，定位課堂中特定知識點。

項目搭建

目前 Agora 有兩個版本的 eEducation demo，web 版本 demo（eEducation-with-Web） 基於Express（Server） + React（Client），Electron 版本 demo（Agora e-Education Demo with Electron） 則是基於 Express（Room Control + Recording）+ Electron(Client)。我實在才疏學淺，對於 Electron 瞭解甚少。並且項目目前也是主要 web 和微信小程序，因此直接 pass Electron 選擇 web 版本了。

搭建環境： 服務器環境： ubuntu 18.04 + nodejs 8.10.0 瀏覽器環境： chorme 74.0.3729

1. 註冊聲網帳號，建立項目，獲取 APP ID。這些都是平常流程了，沒啥好交待的，不過聲網的各位實在太熱情了，註冊完次日客服就打電話回訪。技術支持也加微信問是否須要什麼幫助，服務真是太熱情了。

2. git clone https://github.com/AgoraIO-Usecase/eEducation-with-Web.git，將項目克隆到本地。

3. 分別進入 server 和 client 目錄下, 使用 npm install安裝依賴。Client 目錄下的安裝卻是沒什麼問題， Server 目錄下安裝 agora-node-rtm 包的時候出錯，編譯時報 fatal error: event2/buffer.h: No such file or dicectory。嗯，缺了 libevenet 庫。這個庫是一個基於事件觸發的網絡庫，是 webrtc 的必須庫之一。有下面一些特色和優點：

• 統一I/O事件、信號和定時器這三種事件；
• 可移植，跨平臺支持多種I/O多路複用技術， epoll、poll、dev/poll、select 和kqueue 等；
• 併發支持，避免競態條件；
• 高性能，由事件驅動；
• 輕量，專一於網絡。

4. libevent 須要本身下載編譯，其實也蠻簡單，對着 libevent github 的說明文檔一步步安裝便可，這裏就不贅述了。
5. 而後繼續 npm install，繼續報錯 fatal error: uuid/uuid.h: No such file or dicectory，那就 sudo apt-get install uuid-dev。
6. 繼續報錯 fatal error: IAgoraService.h: No such file or dicectory，這個名字一看就是 agora 本身寫的頭文件了。沒辦法了，先去看看 agora-npm-rtm 包有沒安裝說明吧。
7. 找到 agora-npm-rtm github，看了 README，它是使用了 Agora RTM Linux SDK (C++) 做爲 nodejs 的插件。須要 node-gyp 支持。才疏學淺啊，不知道這是作啥用的。趕忙學習了一波。node-gyp 主要是用來編譯原生 C++ 模塊。sudo npm install -g node-gyp 安裝完成。
8. 查找了一下，在另外一個帳號下找到 RTM github 下有文件 linux RTM C++ SDK。下載，按照提示解壓到目錄下，仍是同樣的錯。這樣的操做我很慌啊。

   

9. 首先得拷貝 libagora_rtm_sdk.so 到 /usr/lib/ 下，才注意到文件夾下有 docker-compose.yml 和 Dockerfile 兩個文件。打開 Dockerfile，發現是有安裝 uuid-dev 和 libevent，也是將 libagora_rtm_sdk.so 放入到 /usr/lib/ 目錄下，可是並未說起 include 目錄下的三個頭文件。我將這三個文件直接拷貝到 /usr/include/ 目錄下了。 再也不報 fatal error: IAgoraService.h: No such file or dicectory 的錯誤，但，後面的錯誤就是我沒法解決的了：error: 'agora::rtm::CHANNEL_MESSAGE_ERR_CODE' has not been declared。

10. server 目錄下的問題目前我是沒辦法解決了，那就看下 client 能不能跑起來。打開目錄後首先查看 README.md，簡要介紹了怎麼運行、測試、構建。可是 不是應該有地方配置 APP ID 的嗎？先無論 APP ID， npm start 測試下，嗯， react 順利構建並跑起來了，瀏覽器訪問，而後...仍是要 APP ID。 11. ok，本身找下吧，翻了下目錄，沒有任何像是 configure 的文件。那看下代碼，index.tsx 入口沒有任何提示，查看引入的文件，在 routes/App.tsx 下發現 是從環境變量引入的 REACT_AOO_AGORA_APPID。好吧，那就 export REACT_AOO_AGORA_APPID=MY_AGORA_APP_ID。再次起航。 12. 終於可以順利訪問了。界面蠻漂亮，惋惜沒有服務端，登入不進去。

總結

1. 從註冊完以後就有人跟進來講，服務來講很好。
2. 文檔、demo 比較全面，目前就缺瀏覽器插件這一部分了吧。
3. demo 的部署文檔還待優化。引用的庫或者相關的資料最好加上連接，畢竟也是學習的機會。

Agora SDK 使用體驗徵文大賽 | 掘金技術徵文，徵文活動正在進行中