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

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

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

相关推荐
Dontla36 分钟前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript
EndingCoder2 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架
德育处主任Pro3 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
前端小趴菜056 小时前
React - 组件通信
前端·react.js·前端框架
xd000026 小时前
11. vue pinia 和react redux、jotai对比
node.js
HarderCoder7 小时前
学习React的一些知识
react.js
小满zs7 小时前
Zustand 第二章(状态处理)
前端·react.js
程序猿小D7 小时前
第16节 Node.js 文件系统
linux·服务器·前端·node.js·编辑器·vim
工呈士11 小时前
MobX与响应式编程实践
前端·react.js·面试
木木夕酱11 小时前
前端响应式网站编写套路
css·react.js