V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
BlackHole1
V2EX  ›  分享创造

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

  BlackHole1 ·
BlackHole1 · 2021-04-29 17:21:57 +08:00 · 5665 次点击
这是一个创建于 1064 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

目前仅支持: Windows / macOSAndroid / 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-kubectlaxioselectron-devtools-installerzh.mobx.js.orgKubernetes Lens 等第三方库都贡献过代码。

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

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

效果图:

image

image

image

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


第 1 条附言  ·  2021-04-30 11:29:50 +08:00
免费无限制使用我们构建好的应用,在官网即可下载安装使用,github 登录正在做,预计下周就能上线。下个阶段我们将对贡献过 PR 的小伙伴给与奖励,目前奖励的规则正在起草讨论。
第 2 条附言  ·  2021-04-30 16:30:50 +08:00
我们支持: pptx(动画效果)、ppt 、pdf 、doc 、docx 、图片、音视频等渲染。而且支持回放,回放包括 pptx 动画、音视频、操作、用户视频头像流等,都是同步的,基本上只要是在教室内的操作,回放都是准确无误的复现一遍。

由于团队小伙伴的给力,github 登陆,今天晚上就能上线,大家明天就可以使用 github 进行登陆了。
42 条回复    2023-01-28 18:16:13 +08:00
tomyail
    1
tomyail  
   2021-04-29 18:02:10 +08:00
大佬威武,特意登个账号给你点赞
simple233
    2
simple233  
   2021-04-29 18:04:32 +08:00
大佬强啊!
lzuntalented
    3
lzuntalented  
   2021-04-29 18:05:35 +08:00
强,手动点赞
Leooe1
    4
Leooe1  
   2021-04-29 18:07:25 +08:00
大佬牛皮呀,可以拿来给妹妹在线辅导用~
Ruohua3kou
    5
Ruohua3kou  
   2021-04-29 21:51:09 +08:00
支持一波,学习下代码~
superliwei
    6
superliwei  
   2021-04-29 23:14:50 +08:00
声网的服务非常适合我的应用,可惜对于刚创业的我来说太贵
你们做得挺好的,加油!
labulaka521
    7
labulaka521  
   2021-04-30 00:28:34 +08:00
牛逼
fatelight
    8
fatelight  
   2021-04-30 00:51:21 +08:00
看着不错啊
SauerkrautFish
    9
SauerkrautFish  
   2021-04-30 01:30:14 +08:00 via iPhone
黑洞师傅带带我
phithon
    10
phithon  
   2021-04-30 01:39:59 +08:00
看起来不错。我去官网注册了个账号,结果新手指引都没过去,enableVideo()那一步浏览器弹不出视频和麦克风权限的框,不知为何……最新 chrome
BlackHole1
    11
BlackHole1  
OP
   2021-04-30 07:48:06 +08:00 via iPhone
@phithon 是不是 chrome flags 里 disable 了摄像头和麦克风的权限,或者可以看下 mac 设置里是不是没有给 chrome 权限。你也可以用 火狐尝试下。一般来说 agora 官网注册后的新手指引用的是 agora-web-sdk 。有兴趣的话可以看下其他的端的 sdk
dwzfuck
    12
dwzfuck  
   2021-04-30 09:39:05 +08:00
要是后端改用 go 写的是不是部署更爽了~
BlackHole1
    13
BlackHole1  
OP
   2021-04-30 09:50:48 +08:00   ❤️ 1
@dwzfuck 刚开始的时候也是上 golang 的,但是目前 golang 社区没有一个能够稳定的 socket.io 实现,所以当时又迁移到 nodejs 了。不过最近我们已经移除了 Websocket 的代码,所以后续我们是有计划上 golang 的
Jinxxxx
    14
Jinxxxx  
   2021-04-30 09:58:07 +08:00
厉害了
SenLief
    15
SenLief  
   2021-04-30 10:19:35 +08:00
厉害厉害,不过大批量用估计也是小型培训机构,带宽服务器太贵了,自建还不如直接用服务了。
BlackHole1
    16
BlackHole1  
OP
   2021-04-30 10:23:28 +08:00
@SenLief 是的,如果要自建,可以使用 agora 、白板的免费额度(各 10000 分 /月),再配合阿里云的动态扩容等,小型的机构其实每个月开销会非常低
HFX3389
    17
HFX3389  
   2021-04-30 10:24:17 +08:00
纯开源吗?不做多一些功能的商业版吗?
这样运营一个大型开源项目压力不会很大吗....
keepcleargas
    18
keepcleargas  
   2021-04-30 10:32:00 +08:00
有用 但贵
BlackHole1
    19
BlackHole1  
OP
   2021-04-30 10:33:05 +08:00
@HFX3389 纯开源,商业版的话,目前我们的想法暂时是私有部署等。至于盈利压力的话,其实还好(可以说压根没有),我们目前并没有任何关于盈利的指标,所有的指标就是完善这个开源项目。其他的都是次要的。

当然我们组正在招人,如果有朋友想来尝试一下的话,也十分欢迎。其他组或者地区也可以~

JD: https://app.mokahr.com/recommendation-apply/agora/4790?containerType=workwechat&goto=recommendations#/job/9e1f7eac-339e-47e6-8b1a-c62e0d409797

我的邮箱: 158blackhole#gmail.com
BlackHole1
    20
BlackHole1  
OP
   2021-04-30 10:35:33 +08:00
@keepcleargas 目前 flat 可以无限制的免费使用,可能就是要自建的时候,可能会有一些开销,而且这样的开销这对于公司层面应该还好
StrayBugs
    21
StrayBugs  
   2021-04-30 11:30:39 +08:00
我去,正想找个开源项目完整的学一下打通前后端,发现没什么能看的。这个很给力啊,大佬 66666
EPr2hh6LADQWqRVH
    22
EPr2hh6LADQWqRVH  
   2021-04-30 11:50:02 +08:00
厉害了, 又是一个 Electron 应用哈哈
Latin
    23
Latin  
   2021-04-30 12:00:45 +08:00
大佬大佬大佬
sundogs8603
    24
sundogs8603  
   2021-04-30 14:37:28 +08:00
真是瞌睡送枕头,感觉只需要加个我这边学校的一个 app 的扫码登录,其他不需要二开了...约等于开箱即用,代码很优雅,而且目前需求感觉还不需要自建,直接用服务即可...
magichacker
    25
magichacker  
   2021-04-30 15:12:11 +08:00
加入房间要收费吧?
BlackHole1
    26
BlackHole1  
OP
   2021-04-30 15:13:34 +08:00
@magichacker 见附言: 《免费无限制使用我们构建好的应用,在官网即可下载安装使用》
turtlekey
    27
turtlekey  
   2021-04-30 16:08:46 +08:00
百兆宽带两台局域网机子,win10 平台,一对一模式,明显卡顿。
turtlekey
    28
turtlekey  
   2021-04-30 16:11:55 +08:00
想问一下,自建用于一对一模式,至少需要多少带宽才能避免卡顿和延迟。
turtlekey
    29
turtlekey  
   2021-04-30 16:13:41 +08:00
@sundogs8603 大佬这边不觉得卡顿吗?下载试过吗?
BlackHole1
    30
BlackHole1  
OP
   2021-04-30 16:25:41 +08:00
@turtlekey 目前我们还没有针对局域网做明显的优化,所以其实都要经过中转服务器。卡顿和延迟的话,我们目前测试下来,很少遇到过。遇到过的几次,都是主播的网络卡顿导致
phithon
    31
phithon  
   2021-04-30 21:59:29 +08:00
@BlackHole1 试过了,我手工把权限开启了也不行。。。不知道为啥
guimeisang
    32
guimeisang  
   2021-05-01 10:36:34 +08:00
优秀,去学习下
stevenhan
    33
stevenhan  
   2021-05-02 19:37:28 +08:00
感觉很适合大学生租用做线上一对一家教。。。我当时就需要这么一个工具
whi147
    34
whi147  
   2021-05-03 11:50:23 +08:00 via iPhone
录制包含用户视频吗,如果包含的话,云存储费用应该很贵吧
whi147
    35
whi147  
   2021-05-03 11:52:47 +08:00 via iPhone
我在前东家也做在线教育客户端,为了减少存储空间占用,音频和白板分开存储。这样也防止课程盗版问题
shade
    36
shade  
   2021-05-03 11:59:02 +08:00
内网能独立部署吗?
BlackHole1
    37
BlackHole1  
OP
   2021-05-03 19:48:42 +08:00 via iPhone
@whi147 包含的,存储其实还好,如果你是自己构建使用的话,这个费用是避不开的,可以使用我们自己构建好的应用,不会收费。

@shade 可以的
lymith
    38
lymith  
   2021-05-04 13:24:29 +08:00
下载下来好好研究
dragonszy
    39
dragonszy  
   2021-05-08 22:52:34 +08:00
战略马克
magicdu
    40
magicdu  
   2021-05-09 13:39:31 +08:00
大佬,electron 视频会议的可以吗?内网独立部署的
joshua7v
    41
joshua7v  
   2021-05-14 19:48:42 +08:00
下载-登录-创建房间-"参数错误"-关闭-卸载
是我使用姿势不对吗:doge:
Onepeng
    42
Onepeng  
   2023-01-28 18:16:13 +08:00
mDesk mTab 作为在线互动教室白板应用的名称如何?(其中“m”可理解为 member 、mobile 、merge 、multi-media 等含义)
mDesk. cn mTab. cn 在售~
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5304 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 29ms · UTC 07:12 · PVG 15:12 · LAX 00:12 · JFK 03:12
Developed with CodeLauncher
♥ Do have faith in what you're doing.