[开源] 前后端全部开源的在线互动教室

[BlackHole1]

我们是声网旗下的白板团队，几年来一直致力于为在线教育公司提供稳定且优质的白板服务，包括灵活可定制化的 API 、基于信令的白板云录制与回放、自研动态 PPT 以及简单易用的白板综合体验。

我们从 2020 年 8 月开始去做这个项目，集成了我们自己的 agora 音视频 sdk 和 在线白板 sdk 。目前我们起名为: Flat

我们基于 MIT 协议，前后端代码完全开源，无任何限制。

目前的功能包括但不限于:

1. 微信登陆
2. 预订房间、预约周期性房间
3. 在线云盘
4. 小班课、大班课、一对一
5. 视频、语音、聊天、在线白板(支持 pptx 、doc 、pdf 等静态资源渲染，包括 pptx 动画)
6. 回放

目前仅支持: Windows / macOS 。 Android / iOS 正在开发中(预计 6 月底就会上线)， Pad 也会在考虑之中

除了全平台之外，一些功能也会在 Q2 一一实现：互动答题、全套快捷键、白板多窗口、支持常用插件(如 VS Code)、屏幕分享

我们的技术选型:

前端

1. TypeScript
2. React
3. Mobx
4. Storybook
5. Electron
6. yarn workspace

后端

1. TypeScript
2. Fastify
3. TypeORM
4. MySQL
5. Redis

---

而 Flat 作为我们团队在开源领域第一次正式尝试，我们有十分严格的 code review ，我们做出了以下的努力:

1. 每个 PR，必须由其他人进行仔细的 code review
2. 为了保证代码风格，我们编写了相关的 eslint-plugin 进行约束
3. 使用 husky / commitlint 对 代码 及 commit message 做校验

在开发过程中，我们也借鉴学习了很多开源社区的技术，并且我们给 helm-kubectl、axios、electron-devtools-installer、zh.mobx.js.org、Kubernetes Lens 等第三方库都贡献过代码。

我们在开发过程中也遇到了很多难点并最终攻克，包括 electron 多窗口 / electron preload 加载 / 打包签名 / 公证 / 课程录制 /回放 / 麦克风 /摄像头授权 / webpack 优化 / Kubernetes 部署 等。

如果大家在开发其他应用时，遇到了相关的问题，那么 Flat 将会是一个很好的借鉴。

效果图:

gif 可移步查看: https://i.imgur.com/fScd7eF.gif

---

• 官网: https://flat.whiteboard.agora.io
• 前端: https://github.com/netless-io/flat
• 后端: https://github.com/netless-io/flat-server

[StrayBugs]

我去，正想找个开源项目完整的学一下打通前后端，发现没什么能看的。这个很给力啊，大佬 66666

[EPr2hh6LADQWqRVH]

厉害了， 又是一个 Electron 应用哈哈

[Latin]

大佬大佬大佬

[sundogs8603]

真是瞌睡送枕头，感觉只需要加个我这边学校的一个 app 的扫码登录，其他不需要二开了...约等于开箱即用，代码很优雅，而且目前需求感觉还不需要自建，直接用服务即可...

[magichacker]

加入房间要收费吧？

[BlackHole1]

@magichacker 见附言: 《免费无限制使用我们构建好的应用，在官网即可下载安装使用》

[turtlekey]

百兆宽带两台局域网机子，win10 平台，一对一模式，明显卡顿。

[turtlekey]

想问一下，自建用于一对一模式，至少需要多少带宽才能避免卡顿和延迟。

[turtlekey]

@sundogs8603 大佬这边不觉得卡顿吗？下载试过吗？

[BlackHole1]

@turtlekey 目前我们还没有针对局域网做明显的优化，所以其实都要经过中转服务器。卡顿和延迟的话，我们目前测试下来，很少遇到过。遇到过的几次，都是主播的网络卡顿导致

[phithon]

@BlackHole1 试过了，我手工把权限开启了也不行。。。不知道为啥

[guimeisang]

优秀，去学习下

[stevenhan]

感觉很适合大学生租用做线上一对一家教。。。我当时就需要这么一个工具

[whi147]

录制包含用户视频吗，如果包含的话，云存储费用应该很贵吧

[whi147]

我在前东家也做在线教育客户端，为了减少存储空间占用，音频和白板分开存储。这样也防止课程盗版问题

[shade]

内网能独立部署吗？

[BlackHole1]

@whi147 包含的，存储其实还好，如果你是自己构建使用的话，这个费用是避不开的，可以使用我们自己构建好的应用，不会收费。

@shade 可以的

[lymith]

下载下来好好研究

[dragonszy]

战略马克

[magicdu]

大佬，electron 视频会议的可以吗？内网独立部署的