Flat 線上教室 —— 個人老師可直接使用的線上授課軟體，開箱即用。前後端完全開源，快速搭建簡約美觀的線上教室。支持 Web 端、Windows 客戶端與 macOS 客戶端。 ...
大家好，我是 Java陳序員。
大學四年，疫情就占了三年！
以前小時候曾經夢想著不用去學校上課，在家就能上課，這不前幾年疫情的時候就成為了現實！
隨著互聯網的興起，各種線下的活動都可以搬到線上來執行，線上授課、線上會議等。
今天給大家介紹一個線上授課的開源項目，適用於老師授課或者視頻會議！
項目介紹
Flat 線上教室 —— 個人老師可直接使用的線上授課軟體，開箱即用。
前後端完全開源，快速搭建簡約美觀的線上教室。
支持 Web 端、Windows 客戶端與 macOS 客戶端。
功能特性：
- 實時交互：支持多功能互動白板、實時音視頻（RTC）通訊、即時消息（RTM）聊天
- 登錄方式：支持微信、GitHub、手機號驗證碼登錄
- 房間管理：支持加入、創建、預定房間，支持周期性房間
- 課堂錄製回放：支持白板信令回放、音視頻雲錄製回放、群聊信令回放
- 多媒體課件雲盤
- 屏幕共用
技術棧：
- Electron
- React
- Vite
- Node.js
Electron 是一個使用 JavaScript、HTML 和 CSS 構建跨平臺的桌面應用程式。它基於 Node.js 和 Chromium，被 Atom 編輯器和許多其他應用程式使用。
Electron 相容 Mac、Windows 和 Linux，可以構建出三個平臺的應用程式。
功能體驗
登錄頁面，可以使用手機號驗證碼、微信、Github賬號登錄。
首頁頁面，展示房間列表和歷史記錄。可以加入一個創建好的房間，或者快速開始創建一個房間，也可以預定房間。
加入房間，需要輸入房間號，可以設置是否開啟麥克風和攝像頭。
快速開始，創建一個房間，可以根據人數選擇房間大小，有大班課（面向大量學生）、小班課（最多 16 位學生）、一對一。
房間頁面，房間的左中側是白板，可以用來當作是上課的黑板；右側是用戶列表信息。
白板工具，白板支持畫筆、圖形、橡皮擦、代碼運行、幾何代數、計時器、答題器、骰子、思維導圖、富文本、板書、素材庫等功能。
代碼運行，支持多種編程語言的線上運行。
幾何代數
計時器
聊天列表，右側聊天列表可以統計線上人數，查看學生舉手，支持線上聊天。
按鈕功能，房間右上角的按鈕支持共用屏幕、錄製視頻、查看雲盤文件、邀請加入、查看用戶列表、房間設置等。
共用屏幕，支持共用 Chrome 標簽頁、視窗、整個屏幕的共用。
查看雲盤文件，支持查看文件、上傳文件、新建文件夾。
邀請加入房間，支持生成鏈接和複製分享。
查看用戶列表，支持全體下臺、全員靜音。
房間設置，支持多語言、主題設置、白板設置、攝像頭設置、揚聲器設置、麥克風設置等。
歷史記錄，記錄已結束的課程，支持查看房間詳情、查看回放、分享回放。
雲盤管理
應用設置
安裝使用
0、項目依賴：
- Node.js
- pnom
全局安裝 pnpm:
npm i -g pnpm
1、克隆項目：
git clone https://github.com/netless-io/flat.git
2、安裝依賴，在項目根目錄下執行：
pnpm i
3、構建並運行 Web 客戶端，在倉庫根目錄運行以下任意一個命令：
pnpm start:web
cd ./web/flat-web/ && pnpm start
4、構建並運行 Electron 客戶端：
pnpm start
5、運行以下命令可以將項目打包成可執行文件：
項目根目錄執行，將根據當前系統打包
pnpm ship
或者項目根目錄執行，可針對指定的系統打包
pnpm ship:mac
pnpm ship:win
如果你因為網路問題導致無法下載 electron
- 可在項目目錄新建: .npmrc 文件
- 寫入 ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/" 內容
- 重新執行 pnpm i 即可
最後
推薦的開源項目已經收錄到 GitHub 項目，歡迎 Star：
https://github.com/chenyl8848/great-open-source-project
或者訪問網站，進行線上瀏覽：
https://chencoding.top:8090/#/
大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！
