面向K12 的在線教育直播平臺的設計與實現

南京市電化教育館（南京市教育信息化中心） 劉曉羽

在技術發展迅速的今天，網絡直播教育已經漸漸普及開來。對于促進教育公平化，網絡直播教育恰逢其時。它既可以跨越地理的空間限制，也能提高教育教學質量的快速普及。網絡直播教育平臺正是解決當下偏遠山區教育的最優解。文章設計了一個面向K12 的在線直播教育系統，老師和學生既可以克服空間限制，也可以做到實時交流，加強了學習效率的同時，也促進了教育教學過程良性發展的蓬勃趨勢。

目前，伴隨著AI 技術與5G 網絡通訊的快速發展，線上線下教育融合的趨勢愈發凸顯[1]。為了提升教育教學效果，打造一個面向K12 的在線直播教育系統是有著巨大實踐價值的工程應用。本文提供了一套已經用于實際生產環境的教學直播平臺的架構方案。其具體方案是:采用Nginx 來搭建流媒體服務器，實現數據的轉發功能[2]。該系統除了提供用戶的登錄、注冊和找回密碼等基本的需求，教師采用OBS 進行推流操作，經過Nginx 流媒體服務器轉發后，學生端進行拉流操作，獲取教師的視頻界面，借此實現直播功能。

1 系統概要設計

本系統是利用互聯網作為傳播平臺，綜合利用流媒體技術，將老師上課的畫面（視頻部分）、語音（音頻部分）實時地對在校學生進行網絡直播教育的平臺。其整體架構可以從硬件層面和軟件層面分別進行闡述。

（1）硬件設計層面。學校教育具有典型的“彈性”特征，通常學生學習的時長全年為40 周（去除寒暑假），因此，過度購置設備必然會造成設備的閑置。在本方案中，硬件服務器使用“云存儲”架構，基于時空復用、分時配置的原則合理規劃服務器投入。

（2）軟件設計層面。本系統核心用戶端可劃分為兩側:教師端和學生端。

1）教師端:教師是教育教學的主動發起方，教師可以把本地的PPTX 文件進行轉換，轉換為HTML5 文件，這樣可以讓文件在瀏覽器端打開，有良好的兼容性。再者，教師需要直播功能、視頻互動功能等比較重要的功能[3]。因此，本方案搭建了Nginx 流媒體服務器，給了教師對應的URL 和密碼，這樣教師就可以基于OBS 技術進行推流直播。從實際教學需求出發，本系統提供了教師端的桌面涂鴉功能，可以直接在教師端桌面進行涂鴉批注，從而在教學活動中，及時對課堂上的重點知識進行標注，進而引領學生學習進程，提高了知識講解效率。

2）學生端:首要的功能是登錄、注冊和忘記密碼等基本信息系統所具有的功能，這對一個完整的系統有著非常重要的功能。再者，學生需要的最基礎的功能是看直播課程，本系統是在線直播平臺，觀看直播功能就是本系統最為主要的功能，也是學生最為關心的功能。最后，學生需要和老師進行視頻互動的功能，這對于提升教學效果有著非常重要的實踐價值。

2 系統詳細設計

2.1 教師端分模塊詳細設計

教師端模塊由基礎功能模塊和直播功能模塊共同組成。基礎功能模塊為直播功能模塊提供數據支撐。教師登錄系統以后，點擊“課程信息管理”按鈕，可以直接進入課程信息管理界面，在該界面中，教師可以對課程信息進行編輯和更改。并且，在此界面中，系統會收集數據庫中的所有信息，并在正確的網頁上顯示相關課程的具體信息，管理員可以選擇具體的產品進行信息更改、添加信息和更改或刪除信息。如果課程有變更，同時點擊“保存變更”按鈕和頁面，系統會提示教師“修改成功”提示，課程相關信息也會及時顯示；如果點擊“刪除”按鈕，系統會提示“是否刪除”，如果教師選擇“是”，系統刪除之后會提示教師“刪除成功”，對應的課程將從系統頁面中移除。如果網頁沒有實時地顯示出來，教師可以手動點擊“刷新頁面”按鈕，進而就可以看到最新的課程信息。如果教師有新的課程要上線發布，可以訪問“添加新課程”鏈接，輸入課程相關信息的詳細介紹，此后再點擊“保存”按鈕，保存完成后，“保存成功”會出現，教師及時刷新頁面就可以觀測新課程。

在本教育直播平臺中，每個學生每一次觀看課程直播，都會獲得一個流水號。這樣系統就可以統計每個流水號對應的觀看時長和交互信息，并建立直播學情基礎數據表。想要了解某一門課程的在線學情，可以找一張數據表，查看表中的課程流水號，也可以查詢該門課程在該直播時間段內的參與趨勢狀況。直播學情基礎數據是分析在線學習學情質量的重要依據。

在基礎模塊之上，教師端的直播功能才能發揮作用。首先，需要啟動Nginx 服務器后，可以通過OBS 進行推流，將本地的音視頻發送出去，讓學生可以看到直播。至于連麥互動則是采用了目前主流的WebRTC 實現其功能。

教師端直播功能如圖1 所示。

圖1 教師端功能圖Fig.1 Function diagram of the teacher

2.1.1 功能模塊之PPTX 課件導入

在教師直播課教學知識的過程中，老師總會用到PPT/PPTX 文件，把所需要講解的知識點整理完善在PPT上，或者直接對著PPT/PPTX 進行講課，有時也會把課上的重要知識點和比較重要的拓展知識都記載在PPT/PPTX上。PPT 是微軟公司設計的桌面Office 辦公套件的文件格式，無法直接在瀏覽器上打開，需要專門的軟件來打開文件。本系統根據PPTX 規范，自行設計了文件格式轉化算法，將PPTX 文件轉化為HTML5 文件[4]。這樣一來，學生可以在瀏覽器上查看。既便于學生的課后復習，也提高了系統訪問的便捷性。在具體實現上，本系統利用了Office 365 的PPTX 標準文檔，進行XML 解讀，從而使得PPT 課件實現網頁話瀏覽。

2.1.2 功能模塊之視頻直播

直播模塊采用了Nginx 搭建流媒體服務器，OBS 實現RTMP 推流，學生端拉流實現直播，如圖2 所示，其實現流程如下，首先建立教師端OBS 推流，然后經由Nginx服務器對OBS 流進行轉發，按照HTTP 的標準協議，學生可以直接以HTML5 的格式進行觀看。

圖2 直播模塊執行流程Fig.2 Execution process of live broadcast module

2.1.3 功能模塊之師生連麥

在直播的過程中，老師有時需要和學生端進行溝通，視頻連麥互動就變得非常重要。在本系統中，采用了Node.js 執行JS 文件，在瀏覽器上調用WebRTC 來實現視頻通話功能。WebRTC 是一個實時通訊的技術，可以通過此技術方便快速地構建出一個音視頻通訊應用。具體流程如下:先在A 端發送Get 請求，并定時輪詢是否有教師應答，當教師收到連麥請求后，則將SDP 回傳給學生實現連麥功能，具體如圖3 所示。

圖3 WebRTC 實時通信Fig.3 WebRTC real-time communication

2.2 學生端分模塊詳細設計

學生端模塊的功能主要是登錄、注冊、觀看直播和與老師連麥互動的功能。學生端可以登錄后，點擊對應的課程，從而轉到對應的JSP 界面來獲取觀看直播的功能。

針對學生端的交互界面設計，必須體現實用性和簡易性，基于“Donot Make Me Think”的原則，設計“所見即所得”的操作界面，為用戶更好地操作提供便利。學生使用在線直播平臺的流程包括課程瀏覽界面、用戶登錄界面、課程信息核對、點擊上課按鈕等。

（1）課程瀏覽界面。用戶可以通過網絡關注微信公眾號，在首頁瀏覽相關年級、所屬學校的信息，找到自己必須參與的課程后，點擊上課按鈕，系統即跳轉到登錄界面。

（2）用戶登錄。用戶在進入到上課流程中后，必須要進行登錄才能正式上課。如果用戶第一次使用，尚未注冊賬號，則需要先注冊，后上課。用戶注冊或登錄的信息會被服務器記錄下來，這是學校進行學情分析的數據來源，具體包括登錄時長、網絡掉線、課堂參與的重要數據來源。

（3）課程信息核對。這一界面設計中，必須要對學生上課進行必要的信息確認。在線學習雖然方便了學生的學習，但是課堂交互監控就明顯不如線下課程。因此，學生要進行信息填寫，如學習課程的方式、授課教師信息等，以方便教師監管。

（4）點擊上課。該步驟會依據用戶之前填寫的信息，供用戶對上課進行二次核對，如果發現存在問題，需要及時修改，如果核對無誤，方可點擊確認。接著用戶可以點擊在線上課按鈕，進入在線學習流程，這樣頁面會直接跳轉到課程學習的主頁面。

當學生完成了基礎信息校驗之后，學生可以進入直播課堂，與老師進行語音、視頻通話來參與課堂互動。學生端通過對應的URL 可以獲取到教師端通過Nginx發送的數據，以此方式實現了在線直播功能。學生端功能如圖4 所示，在設計上，學生端與老師是一對多的關系，分層設計必須考慮不同的業務場景，主要分以下幾種:

圖4 學生功能圖Fig.4 Student function diagram

場景1，觀看直播，采用網頁WebRTC 推流技術，進行流媒體傳播；場景2，連麥，分為學生與學生，學生與老師，采用P2P 技術；場景3 和場景4，均為傳統Web服務，考慮到手機、PC、平板的特性，采用HTML5 進行業務編碼。

3 系統測試

在線直播教學平臺是一個高并發的實時流媒體播放平臺，本系統的設計在使用中必須要考慮在同一時間有眾多用戶同時登錄進行授課的情況，所以要確保系統的訪問級別達到企業級別，避免在高并發的狀況下，服務器因為網絡擁塞、服務器資源規劃等問題，出現系統崩潰。在上線運行前，使用Jmeter 模擬萬人在線的網絡尖峰，在實際運行中，隨時備用云服務器實現負載均衡。在實際運行中，系統運行良好，偶發輕微卡頓，總體運行流暢高效。

4 結語

采用Nginx、OBS、WebRTC 搭建而成的在線教學直播系統突破了傳統教育的時空限制，采用在線Web 訪問的形式，極大地提高了學習人群的覆蓋面。本系統采用內容差異性原則的設計方案[5]，將流媒體推送和網絡轉發有機地統一起來，基于WebRTC 技術將課堂連麥互動有效地組織起來，可以極大地提高實時直播的穩定性和課堂教學的高效性。本文的這種系統架構可以為類似的在線教育提供借鑒與啟發。