音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载本篇文章以 Agora Flat 开源教室客户端的首个公测版本 v1.0.0-beta.1 发布说明 为核心骨架逐项拆解该版本交付的 21 项核心能力微信登录、房间管理、三种课堂场景、实时互动、录制回放、课件云盘、设备检测与自动更新。结合仓库内真实源码你将理解每项功能在前端页面、状态管理MobX Store与服务抽象层flat-services中的落点掌握从登录 → 建课 → 上课 → 回放的完整技术链路可作为阅读本项目源码与二次开发的地图。一、版本背景第一个面向公测的功能基线根据仓库根目录的项目描述Agora Flat 是面向 Web、Windows 与 macOS 三端发布的在线教室客户端。v1.0.0-beta.1 是其版本历史上第一个 beta 发布标志着项目从内部联调走向公测登录、房间全生命周期管理、多班型课堂、实时互动与课后回放等主干功能在这一版集中成形。该版本发布说明以功能清单形式列出 21 项能力可归纳为五个技术域下文将逐一结合源码展开技术域覆盖功能对应发布说明条目账号与登录微信登录房间管理房间管理加入、创建、预定房间周期性房间查看历史房间课堂场景多场景课堂大班课、小班课、一对一实时互动实时交互多功能互动白板RTC 音视频RTM 即时消息举手上麦发言课后闭环课堂录制回放白板信令回放音视频云录制回放群聊信令回放多媒体课件云盘运行保障设备检测自动检查更新二、账号登录微信扫码登录发布说明的第一项能力是微信登录。仓库中对应的实现位于 packages/flat-pages/src/LoginPage/WeChatLogin.tsx它以二维码扫码方式完成登录组件对外暴露onLoginResult回调并在 登录页 通过renderQRCode插槽集成renderQRCode{() WeChatLogin onLoginResult{onLoginResult} /}同一目录还提供了 githubLogin.ts 与 googleLogin.ts 两种登录执行器它们与微信登录一起在 state.ts 中被按需分发调用。从源码结构看登录方式采用登录执行器 登录结果回调的可扩展设计后续新增第三方登录只需补充新的LoginExecutor实现。登录态信息随后由flat-server-api的login.ts与用户 Store 统一管理支撑后续所有房间操作。三、房间管理创建、加入与预定房间管理与加入、创建、预定房间是 beta.1 的核心业务。客户端首页 MainRoomMenu 以三栏布局加入房间、创建房间、预定房间呈现三个入口对应三个交互组件JoinRoomBox、CreateRoomBox、ScheduleRoomBox。底层 API 集中在 packages/flat-server-api/src/room.ts其调用关系清晰可查创建房间createOrdinaryRoom 向room/create/ordinary提交{ title, type, beginTime, region, pmi? }服务端返回roomUUID与inviteCode邀请码预定房间与创建共用同一接口只是beginTime为未来时间点加入房间joinRoom 向room/join提交uuid兼容 roomUUID / inviteCode / periodicUUID一次返回白板房间与 Token、RTC UID 与 Token、屏幕共享 RTC 参数、RTM Token 等全套进房凭证房间列表listRooms 按room/list/:type?page分页拉取取消房间cancelRoom 根据入参组合分发到整期取消周期课 / 取消周期课单节 / 取消历史房间 / 取消单次房间四种内部实现更新房间updateOrdinaryRoom/updatePeriodicRoom/updatePeriodicSubRoom分别对应三类更新场景。客户端侧的 RoomStore 封装了createOrdinaryRoom与createPeriodicRoom创建成功后把房间信息写入本地 Store 缓存并调用preferencesStore.setRegion记录用户常用的服务区域如cn-hz、us-sv、sg。进房前的设备检测拦截值得注意的细节是加入房间并不总是直接进课堂。MainRoomMenu 的onJoinRoom逻辑显示当用户处于 Web 端且未关闭设备检测globalStore.isTurnOffDeviceTest为 false时会先跳转到设备检测页通过后再由 join-room-handler 完成进房。这条链路正是设备检测功能与房间流程的集成点。四、周期性房间与历史房间发布说明单独列出支持周期性房间与查看历史房间两项可见其在教学场景中的重要性。周期性房间周期性房间的创建载荷定义在 room.ts支持两种排期模型periodic: | { weeks: Week[]; rate: number } // 每周按星期重复 | { weeks: Week[]; endTime: number }; // 指定截止时间的重复其中weeks取值来自 Week 枚举周日到周六。服务端还会为周期课生成独立的periodicUUID客户端通过 periodicRoomInfo 拉取整期课表通过 periodicSubRoomInfo 查看单节课并获取前后相邻课次时间用于详情页展示。单节周期课的取消/改期则走cancelPeriodicSubRoom/updatePeriodicSubRoom。历史房间房间列表类型由 ListRoomsType 枚举 定义分为All全部、Today今日、Periodic周期课、History历史四类。历史房间面板 MainRoomHistoryPanel 在滚动到底部时触发roomStore.fetchMoreRooms(ListRoomsType.History)做分页加载配合 room-store.ts 中的防重入isFetchingRooms与单页大小控制形成滚动加载的完整闭环。历史房间同时是进入录制回放的入口。五、多场景课堂大班课、小班课与一对一多场景课堂由三种班型构成其类型定义集中在 RoomType 枚举export enum RoomType { OneToOne OneToOne, SmallClass SmallClass, BigClass BigClass, }该枚举贯穿创建房间载荷、房间信息、进房结果等多个 API 契约并驱动 flat-pages 下的BigClassPage、SmallClassPage、OneToOnePage三个独立课堂页面进行路由分发。从页面结构与课堂 Store 的实现看三种班型的差异主要体现在参会人数上限、互动权限策略如是否全员开麦、举手发言的调度方式等维度而底层白板、RTC、RTM 基础设施是三端共享的。六、实时交互互动白板、RTC 音视频与 RTM 即时消息实时交互是课堂的引擎它由三块服务能力组合而成。项目将它们统一抽象为可替换的服务接口层位于 packages/flat-services/src/services多功能互动白板IServiceWhiteboardIServiceWhiteboard 提供白板房间的创建与加入能力具体实现依赖 fastboard SDK见 service-providers/fastboard支撑画笔、图形、课件展示等多功能交互。实时音视频IServiceVideoChatIServiceVideoChat 是 RTC 能力的抽象接口清单直接对应课堂内的音视频诉求进房/离房joinRoom/leaveRoom角色与头像setRole/getAvatar/getTestAvatar设备检测用测试头像音量监控getVolumeLevel设备管理setCameraID/setMicID/setSpeakerID与对应的设备枚举方法是设备检测页的数据源。桌面端与 Web 端分别由 agora-rtc-electron 与 agora-rtc-web 提供实现。即时消息IServiceTextChatIServiceTextChat 抽象了 RTM 聊天能力sendRoomMessage群发消息、sendPeerMessage私聊、sendRoomCommand/sendPeerCommand发送指令消息。其中指令通道正是举手上麦的底层载体。七、举手上麦发言指令驱动的互动闭环举手上麦发言在课堂 Store 中是一套完整的指令闭环实现在 packages/flat-stores/src/classroom-store/index.ts学员举手onToggleHandRaising 通过rtm.sendPeerCommand(raise-hand, { raiseHand: true })将举手事件点对点发给房主ownerUUID并提示已举手举手状态汇聚房主侧监听raise-hand事件维护raiseHandUsers用户列表L282-L300房主上麦acceptRaiseHand 校验isCreator后调用onStaging将学员移上舞台上麦并同步更新白板共享存储中的onStageUsers统一处理onCancelAllHandRaising 一键清空举手列表打开举手面板时通过flushLazyUsers拉取举手学员的完整资料。值得注意的是举手状态通过classroomStorage白板 syncedStore在多端之间同步因此同一课堂内的所有客户端都能实时看到举手列表变化。八、课堂录制与回放白板信令、音视频云录制与群聊信令回放是 beta.1 中最具工程含量的一环。发布说明将其细分为课堂录制回放 / 白板信令回放 / 音视频云录制回放 / 群聊信令回放对应仓库中的 classroom-replay-store 与 ReplayPage。多轨同步播放器回放的核心是多路时间轨的同步。classroom-replay-store/index.ts 展示了完整的装配过程白板轨通过replayFastboard按beginTimestamp duration载入白板信令回放并连接onStageUsers同步存储以还原上麦状态视频轨若录制包含videoURL则创建NativeVideoPlayer播放云端音视频录制同步调度两类播放器统一交给SyncPlayer({ players })做多轨时钟同步实现白板笔迹与教师音视频画面逐帧对齐。页面层 ReplayPage 将ReplayVideo视频区、ReplayWhiteboard白板区与ReplayList回放控制列表组装为完整回放界面桌面端还可通过x-agora-flat-client://replayRoom?roomUUID...ownerUUID...roomType...协议唤起客户端回放L32-L35。云录制与回放服务录制能力由两个层面支撑服务端侧声网云录制集成位于 service-providers/agora-cloud-recording/src/cloud-recording.ts负责把课堂音视频写入云端客户端侧IServiceRecording 抽象了startRecording/stopRecording/checkIsRecording等录制控制与状态查询接口房主可随时开始/停止录制。群聊信令回放则依赖聊天消息记录与上述多轨同步框架在回放时间轴上还原课堂中的群聊内容。九、多媒体课件云盘多媒体课件云盘提供课件的上传、管理与课堂内插入能力。客户端入口为 CloudStoragePanel底层服务定义在 packages/flat-services/src/services/file并配套两套工具链upload-task-manager断点续传式的上传任务调度courseware-converting课件转码状态管理配合 file-convert-h5 与 file-convert-netless 服务将 PPT/PDF 等课件转换为可在白板中展示的格式完成云盘 → 转码 → 课堂插入的完整链路。十、设备检测与自动检查更新设备检测DevicesTestPage 在进房前对摄像头、麦克风、扬声器三路设备做检测通过getCameraDevices/getMicDevices/getSpeakerDevicesRTC 服务提供枚举设备并支持切换设备 ID 与音量自测L106-L131。用户可选择关闭设备检测直接进房isTurnOffDeviceTest该偏好由全局 Store 持久化。桌面端由于 Electron 环境进房链路可靠可跳过该页见上文onJoinRoom判断。自动检查更新桌面端的自动更新由 electron-updater 驱动实现在 desktop/main-app/src/utils/update-service.ts检查更新check()设置autoDownload false仅探测最新版本并通过事件回调update-available/update-not-available通知界面L10-L66执行更新update()开启autoDownload监听download-progress上报进度、update-downloaded后调用quitAndInstall完成安装重启L68-L135版本源配置setFeedURL将更新源指向${UPDATE_DOMAIN}/latest/${prereleaseTag}/${osName}按平台与预发布标签区分更新通道L137-L148这是 beta 版能够自动检查更新的基础设施。十一、总结beta.1 功能源码地图v1.0.0-beta.1 的 21 项功能并非孤立特性而是一条贯穿登录 → 建课 → 上课 → 回放的完整产品链路其工程落点可归纳如下功能域前端页面业务逻辑服务/API微信登录LoginPageLoginPage/utilsflat-server-api/src/login.ts创建/加入/预定/周期/历史房间HomePage/MainRoomMenuroom-store.tsflat-server-api/src/room.ts三种班型课堂BigClass / SmallClass / OneToOne 页面classroom-storeRoomType 枚举白板 / RTC / RTM课堂页组件flat-stores 课堂 Storeflat-services/services 及 service-providers举手上麦课堂举手面板classroom-store L1242-L1272RTMraise-hand指令录制回放ReplayPageclassroom-replay-storeagora-cloud-recording课件云盘CloudStoragePageupload-task-manager / courseware-convertingflat-services/services/file设备检测DevicesTestPage全局 Store 偏好IServiceVideoChat 设备接口自动更新桌面端更新弹窗update-service.tselectron-updater如果你正打算为 Flat 做二次开发或扩展课堂能力建议按此地图从flat-services的抽象接口切入接口层定义了能力边界service-providers提供具体实现替换或新增服务提供商即可在不动上层页面的前提下切换底层 SDK这正是该版本为后续功能迭代打下的架构基础。赞分享音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载相关推荐Agora Flat v1.0.0-beta.1 功能解析开源在线课堂首个 Beta 里程碑Agora Flat v1.0.0 beta.1 功能解析开源在线课堂首个 Beta 里程碑 Agora Flat 是声网推出的开源在线互动教室客户端覆盖音视频即时通讯教育前端桌面应用Agora Flat v1.0.0-beta.5 版本解析房间类型 UI 重构与课堂稳定性修复Agora Flat v1.0.0 beta.5 版本解析房间类型 UI 重构与课堂稳定性修复 Agora Flat 是声网开源的跨平台在线互动课堂客户端支音视频即时通讯教育前端桌面应用Agora Flat v1.6.0 版本全解析课件无感切换、Agora 登录与回放交互升级Agora Flat v1.6.0 版本全解析课件无感切换、Agora 登录与回放交互升级 本文以 Agora Flat 开源教室项目 v1.6.0 版本的官音视频即时通讯教育前端桌面应用上一篇whu-thesis模板的LaTeX底层实现深入理解文档类设计与源码架构下一篇推荐开源项目Vagga - 开发环境的轻量级容器引擎创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考