个人老师可直接使用的在线授课软件

大家好,我是 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:

bash 复制代码
npm i -g pnpm

1、克隆项目:

bash 复制代码
git clone https://github.com/netless-io/flat.git

2、安装依赖,在项目根目录下执行:

bash 复制代码
pnpm i

3、构建并运行 Web 客户端,在仓库根目录运行以下任意一个命令:

bash 复制代码
pnpm start:web
bash 复制代码
cd ./web/flat-web/ && pnpm start

4、构建并运行 Electron 客户端:

bash 复制代码
pnpm start

5、运行以下命令可以将项目打包成可执行文件:

项目根目录执行,将根据当前系统打包

bash 复制代码
pnpm ship

或者项目根目录执行,可针对指定的系统打包

bash 复制代码
pnpm ship:mac
bash 复制代码
pnpm ship:win

如果你因为网络问题导致无法下载 electron

  1. 可在项目目录新建: .npmrc 文件
  2. 写入 ELECTRON_MIRROR="npmmirror.com/mirrors/ele..." 内容
  3. 重新执行 pnpm i 即可

最后

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star

bash 复制代码
https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

bash 复制代码
https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

相关推荐
codingWhat18 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
ServBay18 小时前
Node.js、Bun 与 Deno,2026 年后端运行时选择指南
node.js·deno·bun
一拳不是超人21 小时前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
青青家的小灰灰1 天前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
青青家的小灰灰1 天前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
码路飞1 天前
Node.js 中间层我维护了两年,这周终于摊牌了——成本账单算完我人傻了
node.js
小霖家的混江龙1 天前
从 0 到 1 实现一个 useState
前端·javascript·react.js
晓得迷路了1 天前
栗子前端技术周刊第 118 期 - Oxfmt Beta、Angular GitHub stars、React 基金会...
前端·javascript·react.js
AAA阿giao2 天前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
昨晚我输给了一辆AE862 天前
为什么现在不推荐使用 React.FC 了?
前端·react.js·typescript