1. 首页 » 生活常识

如何快速搭建简约美观的在线互动教室群聊

这两年,随着疫情的出现,很多人的生活习惯都被逐渐改变了。例如在十年前,很多人说起上课、说起开会,一定是要面对面才能完成的事情,但是如今更多的都是云教室、在线会议,TJ君当然要与时俱进,今天跟大家分享一个功能强大的前后端完全开源的简约美观的互动教室项目

Agora Flat

Agora Flat,支持MAC、WONDOWS不同平台,并且有手机版、电脑版、网页版各种不同的实现形式。可以轻松创建丰富多样的在线互动房间,实现多场景灵活切换,完成高质量的互动,例如教学或开会。

如何快速搭建一个简约美观的在线互动教室

特点

既可以用于大型多人授课或会议,由主持人进行课程或会议的讲解,参加者举手发言在线互动;又可以进行一对一的私人定制化互动。

同时项目内置多种经过专业设计的精美主题,无需专业设计经验就可以使用各种不同效果的UI风格。

如何快速搭建一个简约美观的在线互动教室

如何快速搭建一个简约美观的在线互动教室

(效果图来自官方网站)

语言与功能

项目主要实现部分都是运用TypeScript语言进行实现,辅以小部分的JavaScript、HTML、Less。

截至目前为止主要已实现的功能有:

实时交互多功能互动白板实时音视频(RTC)通讯即时消息(RTM)聊天帐户系统微信登陆GitHub 登陆房间管理加入、创建、预定房间支持周期性房间课堂录制回放白板信令回放音视频云录制回放群聊信令回放多媒体课件云盘屏幕共享

尤其是微信登陆这一点,TJ君感觉使用起来还是非常方便的,想学习这方面登录编码技巧的小伙伴也可以引以为鉴。

如何快速搭建一个简约美观的在线互动教室

从项目的更新频率我们也可以看到每个月几乎都有至少一个版本,这对我们不管是使用还是学习都是一个好消息。

如何快速搭建一个简约美观的在线互动教室

项目安装

yarn run bootstrap

如果有小伙伴因为网络问题导致无法下载 electron,可以在项目目录新建: .yarnrc 文件,并直接写入electron_mirror "https://npmmirror.com/mirrors/electron/"内容,然后重新执行yarn run bootstrap就可以了。

试用效果

FLAT登录后,可以看到画面风格还是偏向简约的

如何快速搭建一个简约美观的在线互动教室

目前项目自带的房间类型主要有三种,分别是大班课、小班课、一对一,如下图

如何快速搭建一个简约美观的在线互动教室

总结

TJ君觉得大可以开拓思路,FLAT不止可以用于仅仅面向学生的教室,例如公司里的培训、各种会议、父母出差不在小孩身边时的功课监督等等,都可以运用一下,不能将思路局限于某个局部。

让TJ君觉得比较加分的是它的开源代码里面的文档非常详细,例如每个版本的优化项,都有中英文两个版本来进行介绍:

如何快速搭建一个简约美观的在线互动教室

如何快速搭建一个简约美观的在线互动教室

其余包括环境变量、如何debug调试也都有对应的文档指导。

如何快速搭建一个简约美观的在线互动教室

对于想学习类似项目的小伙伴来说,绝对是个小宝藏,感兴趣的小伙伴,赶紧来下载体验或学习吧。关注我,私信“FLAT”获取仓库地址。

声明:本文由"麦兜"发布,不代表"破站"立场,转载联系作者并注明出处:https://www.848586.cn/148599.html