音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载v2.0.0 是 Agora Flat 开源课堂客户端支持 Web、Windows、macOS的一次能力扩展型版本围绕备课—授课—复盘全链路新增了 8 项功能、优化 3 项、修复 1 项。本文以官方 v2.0.0 发布说明 为骨架结合仓库源码逐条还原每项能力的实现位置与工作原理帮助读者理解 Flat 在云盘、录制回放、白板交互与开发者开放能力上的真实落地方式。一、新增能力详解1. 云盘支持创建文件夹v2.0.0 之前云盘只能平铺上传文件现在支持在云盘中建立多级目录把课件、图片、音视频按课程结构归档整理。该能力在前端由 CloudStorageNewDirectory.tsx 实现组件内置一个Input输入框默认名称为new-directory可通过 zh-CN.json 国际化文案自定义确认按钮onConfirm会先调用checkInvalidDirectoryName(name)做目录名校验非法时通过message.error(t(invalid-directory-name-tips))给出提示合法时以{ directoryName, parentDirectoryPath }结构回传组件挂载后自动focus()并select()输入框支持回车onPressEnter快速确认该组件在 CloudStorageFileTitle/index.tsx 中被按需渲染配合目录导航即可实现任意层级的新建与进入。目录的存储与配额仍由服务端cloudStorage配置驱动见下文云盘空间限制小节。2. 支持多段录制和回放多段录制意味着一次课堂可以按时间切片产生多段录像学生课后可按片段回放而不是只能观看整场直播的单一录像。Flat 的录制基于 Agora 云录制 REST API在 agora.ts 中完整封装了录制生命周期acquireroom/record/agora/acquire获取录制资源声明recordingConfig与recordingFileConfigstartedroom/record/agora/started开始录制可选择aliyun_vod_service或web_recorder_service等存储服务queryroom/record/agora/query查询录制状态与分段信息updateLayoutroom/record/agora/update-layout动态更新录制布局stoppedroom/record/agora/stopped停止录制并生成录像文件。对应的服务端接口定义在 recording.ts并通过 index.ts 统一导出。回放侧则由 classroom-replay-store 负责配合 ReplayPage 提供录像列表、白板回放与视频回放两种模式多段录像可按片段逐一选择播放。3. 支持多种快捷键如快捷画直线v2.0.0 为白板工具与编辑操作引入了系统化快捷键体系并在设置页提供可视化表格。快捷键完整清单定义在 useHotKeyData.ts分为工具栏与编辑器两组分类功能快捷键工具栏选择工具S工具栏画笔P工具栏橡皮E工具栏圆形C工具栏矩形R工具栏箭头A工具栏直线L工具栏激光笔Z工具栏抓手H编辑器删除对象Backspace/Delete编辑器等比缩放Shift/⇧编辑器切换下一种颜色Alt Q/⌥ Q编辑器切换上一种颜色Alt Shift Q/⌥ Shift Q编辑器画笔拖拽画正圆Shift Mouse编辑器从中心画圆Ctrl Mouse/⌘ Mouse编辑器撤销Ctrl Z/⌘ Z编辑器重做Ctrl Y/⌘ Y编辑器复制Ctrl C/⌘ C编辑器粘贴Ctrl V/⌘ V其中快捷画直线即在白板按下L直接切换到直线工具。这些快捷键并非前端自造而是透传到 fastboard 白板服务的hotKeys配置中见 fastboard/src/index.tschangeToStraight: l、changeToPencilEraser: e、changeToEraser: { key: E, shiftKey: true, altKey: false, ctrlKey: false }等与设置页表格一一对应。特别地copy与paste被显式置为undefined以禁用白板内置复制粘贴为从剪贴板粘贴图片让路见下文第 7 条。4. 用户列表显示实时在线人数教室侧边栏的用户列表现在会实时统计并展示当前在线人数。该数据来自白板房间成员状态回调在 fastboard/src/index.ts 中onRoomStateChanged监听state.roomMembers将每个成员的payload.uid收集为成员数组后通过this.events.emit(members, members)抛出。课堂 store classroom-store/index.ts 接收后维护成员集合用户面板即可基于该集合计算实时在线人数并渲染。5. 多种互动小插件例如答题器等v2.0.0 引入可嵌入白板的互动插件WindowManager / App其中答题器selector作为代表性插件随版本提供。国际化文案在 zh-CN.json 中以selector: 答题器定义。插件体系通过 fastboard 的invisiblePlugins: [WindowManager]挂载见 fastboard/src/index.tsstockedApps机制统一管理可用的应用集合答题器等插件可在白板中唤起、收集学生答案并实时汇总展示。6. 支持局部擦除笔迹新版橡皮从整笔删除升级为局部擦除可以像真实橡皮一样擦掉笔画的一部分。实现上fastboard 白板同时注册了两级擦除工具changeToPencilEraser: e按E进入笔画橡皮擦除整条笔画changeToEraser: { key: E, shiftKey: true }Shift E进入局部擦除模式参见 fastboard/src/index.ts。同时disableEraseImage: true保证擦除操作不会误伤图片课件仅作用于笔迹图层。7. 支持复制粘贴图片到白板老师可以从本地或浏览器复制任意图片直接Ctrl V粘贴到白板。为保证该行为fastboard 明确禁用了白板自带的文本复制粘贴快捷键源码注释说明了设计意图// disable builtin copy-paste hotkeys, they are used to paste images from user clipboard copy: undefined, paste: undefined,见 fastboard/src/index.ts。剪贴板事件由客户端统一接管图片以 File 形式插入白板场景从而打通了外部图片 → 白板课件的快捷路径无需先上传云盘再插入。8. 支持 OAuthv2.0.0 新增开发者 OAuth 能力让第三方应用可以在用户授权后读取 Flat 账号的基础资料。相关页面位于 UserSettingPage/OAuthPage包含新建NewOAuth、编辑EditOAuth.tsx与权限范围选择已授权应用的查看与撤销在 ApplicationsPage 中完成。服务端 API 封装于 application.ts核心接口包括listApplications(page, size)分页列出当前账号创建的 OAuth 应用applicationDetail(oauthUUID)查询应用详情名称、主页、Logo、授权范围revokeApplication(oauthUUID)撤销第三方应用访问权限createOAuthSecret/updateOAuth/deleteOAuthSecret管理应用的密钥与配置。OAuth 授权范围由枚举DeveloperOAuthScope定义当前提供三个最小化只读权限范围标识含义user.uuid:read读取用户 UUIDuser.name:read读取用户昵称user.avatar:read读取用户头像二、体验优化详解1. 学生举手通过后自动开麦此前老师通过举手后学生还需手动打开麦克风v2.0.0 改为通过即开麦。举手状态机实现在 classroom-store/index.ts通过 RTM 信令监听raise-hand事件this.rtm.events.on(raise-hand, ...)学生举手时把其userUUID加入raiseHandUsers数组取消举手时移除老师端批准后触发设备状态变更学生的mic自动置为可用成员状态同步时user.isRaiseHand raiseHandUsers.has(user.userUUID)用于在用户列表渲染举手标记见同文件handleUserJoinedChunk附近逻辑。若设备被老师关闭学生端会收到refuse-to-turn-on-mic提示避免权限冲突。2. 调整云盘空间大小限制为 10G云盘配额由服务端区域配置统一下发客户端仅读取展示。配置结构在 config.ts 中定义cloudStorage: { singleFileSize: number; // 单文件大小上限 totalSize: number; // 云盘总容量上限v2.0.0 调整为 10G allowFileSuffix: String[]; // 允许上传的文件后缀白名单 accessKey: string; }客户端通过getServerRegionConfigs()对应region/configs接口拉取该配置上传前依据totalSize校验剩余空间、依据singleFileSize校验单文件大小超过时给出明确错误提示。10G 属于服务端配额参数不同区域部署可通过配置独立调整。3. 画笔光标颜色和当前画笔颜色保持一致新版画笔、矩形、圆形、直线、箭头等工具的光标颜色会跟随当前画笔颜色实时变化。该能力由 inject-cursor.ts 注入实现监听app.memberState每当strokeColor变化时把 RGB 转成十六进制色值动态生成包含当前颜色的 SVG Data URI 光标并注册到.netless-whiteboard对应工具类上使光标与笔迹颜色视觉统一避免光标是红色、画出来是蓝色的割裂感。三、问题修复详解退出房间再次进入看不到屏幕分享v2.0.0 修复了退出房间后重新进入看不到他人屏幕分享画面的问题。该问题根因在于屏幕分享流的状态重建客户端在离开房间时未完整释放分享相关的音视频轨道与视图容器导致重进时远端分享流的绑定逻辑未触发。修复后重新进入房间会重新走分享流的订阅与挂载流程确保再次看到分享画面。相关展示组件可参考 ShareScreen 与 flat-stores/src/classroom-store/index.ts 中的成员/流状态管理逻辑。四、小结v2.0.0 的内容密度体现在三个层面备课体验云盘建目录、10G 配额、授课交互快捷键体系、局部擦除、剪贴板贴图、举手自动开麦、实时在线人数、答题器插件与开放能力多段录制回放、开发者 OAuth。这些能力在仓库中均有清晰的源码落点云盘与快捷键组件集中在flat-components/flat-pages白板能力集中在service-providers/fastboard录制与 OAuth 接口集中在flat-server-api。对希望二次开发或深度定制 Flat 的团队而言沿着上述路径即可快速定位并扩展对应功能。赞分享音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载相关推荐Agora Flat 开源教室 v2.0.0 发布说明深度解读云盘目录、多段录制、白板快捷键与课堂交互增强Agora Flat 开源教室 v2.0.0 发布说明深度解读云盘目录、多段录制、白板快捷键与课堂交互增强 导读 本文以 docs/releases/v2.音视频即时通讯教育前端桌面应用Agora Flat云录制功能实现原理音视频与白板同步录制Agora Flat云录制功能实现原理音视频与白板同步录制 Agora Flat是一款开源在线教室平台其云录制功能能够同时录制音视频和白板内容为在线教育提音视频即时通讯教育前端桌面应用Agora Flat v1.0.0-beta.3 发布详解GitHub 登录、白板文本快捷键与交互细节打磨Agora Flat v1.0.0 beta.3 发布详解GitHub 登录、白板文本快捷键与交互细节打磨 本文基于 v1.0.0 beta.3 发布说明 h音视频即时通讯教育前端桌面应用上一篇prism4cj实战应用如何用语法高亮库为Markdown围栏代码块快速渲染着色下一篇会话状态永不丢失opencode-dynamic-context-pruning持久化设计与compaction重置机制揭秘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 2:42:23 · 阅读 1.2k Agora Flat v2.0.0 版本解析：云盘目录、多段录制、白板快捷键与 OAuth 能力全景
音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载v2.0.0 是 Agora Flat 开源课堂客户端支持 Web、Windows、macOS的一次能力扩展型版本围绕备课—授课—复盘全链路新增了 8 项功能、优化 3 项、修复 1 项。本文以官方 v2.0.0 发布说明 为骨架结合仓库源码逐条还原每项能力的实现位置与工作原理帮助读者理解 Flat 在云盘、录制回放、白板交互与开发者开放能力上的真实落地方式。一、新增能力详解1. 云盘支持创建文件夹v2.0.0 之前云盘只能平铺上传文件现在支持在云盘中建立多级目录把课件、图片、音视频按课程结构归档整理。该能力在前端由 CloudStorageNewDirectory.tsx 实现组件内置一个Input输入框默认名称为new-directory可通过 zh-CN.json 国际化文案自定义确认按钮onConfirm会先调用checkInvalidDirectoryName(name)做目录名校验非法时通过message.error(t(invalid-directory-name-tips))给出提示合法时以{ directoryName, parentDirectoryPath }结构回传组件挂载后自动focus()并select()输入框支持回车onPressEnter快速确认该组件在 CloudStorageFileTitle/index.tsx 中被按需渲染配合目录导航即可实现任意层级的新建与进入。目录的存储与配额仍由服务端cloudStorage配置驱动见下文云盘空间限制小节。2. 支持多段录制和回放多段录制意味着一次课堂可以按时间切片产生多段录像学生课后可按片段回放而不是只能观看整场直播的单一录像。Flat 的录制基于 Agora 云录制 REST API在 agora.ts 中完整封装了录制生命周期acquireroom/record/agora/acquire获取录制资源声明recordingConfig与recordingFileConfigstartedroom/record/agora/started开始录制可选择aliyun_vod_service或web_recorder_service等存储服务queryroom/record/agora/query查询录制状态与分段信息updateLayoutroom/record/agora/update-layout动态更新录制布局stoppedroom/record/agora/stopped停止录制并生成录像文件。对应的服务端接口定义在 recording.ts并通过 index.ts 统一导出。回放侧则由 classroom-replay-store 负责配合 ReplayPage 提供录像列表、白板回放与视频回放两种模式多段录像可按片段逐一选择播放。3. 支持多种快捷键如快捷画直线v2.0.0 为白板工具与编辑操作引入了系统化快捷键体系并在设置页提供可视化表格。快捷键完整清单定义在 useHotKeyData.ts分为工具栏与编辑器两组分类功能快捷键工具栏选择工具S工具栏画笔P工具栏橡皮E工具栏圆形C工具栏矩形R工具栏箭头A工具栏直线L工具栏激光笔Z工具栏抓手H编辑器删除对象Backspace/Delete编辑器等比缩放Shift/⇧编辑器切换下一种颜色Alt Q/⌥ Q编辑器切换上一种颜色Alt Shift Q/⌥ Shift Q编辑器画笔拖拽画正圆Shift Mouse编辑器从中心画圆Ctrl Mouse/⌘ Mouse编辑器撤销Ctrl Z/⌘ Z编辑器重做Ctrl Y/⌘ Y编辑器复制Ctrl C/⌘ C编辑器粘贴Ctrl V/⌘ V其中快捷画直线即在白板按下L直接切换到直线工具。这些快捷键并非前端自造而是透传到 fastboard 白板服务的hotKeys配置中见 fastboard/src/index.tschangeToStraight: l、changeToPencilEraser: e、changeToEraser: { key: E, shiftKey: true, altKey: false, ctrlKey: false }等与设置页表格一一对应。特别地copy与paste被显式置为undefined以禁用白板内置复制粘贴为从剪贴板粘贴图片让路见下文第 7 条。4. 用户列表显示实时在线人数教室侧边栏的用户列表现在会实时统计并展示当前在线人数。该数据来自白板房间成员状态回调在 fastboard/src/index.ts 中onRoomStateChanged监听state.roomMembers将每个成员的payload.uid收集为成员数组后通过this.events.emit(members, members)抛出。课堂 store classroom-store/index.ts 接收后维护成员集合用户面板即可基于该集合计算实时在线人数并渲染。5. 多种互动小插件例如答题器等v2.0.0 引入可嵌入白板的互动插件WindowManager / App其中答题器selector作为代表性插件随版本提供。国际化文案在 zh-CN.json 中以selector: 答题器定义。插件体系通过 fastboard 的invisiblePlugins: [WindowManager]挂载见 fastboard/src/index.tsstockedApps机制统一管理可用的应用集合答题器等插件可在白板中唤起、收集学生答案并实时汇总展示。6. 支持局部擦除笔迹新版橡皮从整笔删除升级为局部擦除可以像真实橡皮一样擦掉笔画的一部分。实现上fastboard 白板同时注册了两级擦除工具changeToPencilEraser: e按E进入笔画橡皮擦除整条笔画changeToEraser: { key: E, shiftKey: true }Shift E进入局部擦除模式参见 fastboard/src/index.ts。同时disableEraseImage: true保证擦除操作不会误伤图片课件仅作用于笔迹图层。7. 支持复制粘贴图片到白板老师可以从本地或浏览器复制任意图片直接Ctrl V粘贴到白板。为保证该行为fastboard 明确禁用了白板自带的文本复制粘贴快捷键源码注释说明了设计意图// disable builtin copy-paste hotkeys, they are used to paste images from user clipboard copy: undefined, paste: undefined,见 fastboard/src/index.ts。剪贴板事件由客户端统一接管图片以 File 形式插入白板场景从而打通了外部图片 → 白板课件的快捷路径无需先上传云盘再插入。8. 支持 OAuthv2.0.0 新增开发者 OAuth 能力让第三方应用可以在用户授权后读取 Flat 账号的基础资料。相关页面位于 UserSettingPage/OAuthPage包含新建NewOAuth、编辑EditOAuth.tsx与权限范围选择已授权应用的查看与撤销在 ApplicationsPage 中完成。服务端 API 封装于 application.ts核心接口包括listApplications(page, size)分页列出当前账号创建的 OAuth 应用applicationDetail(oauthUUID)查询应用详情名称、主页、Logo、授权范围revokeApplication(oauthUUID)撤销第三方应用访问权限createOAuthSecret/updateOAuth/deleteOAuthSecret管理应用的密钥与配置。OAuth 授权范围由枚举DeveloperOAuthScope定义当前提供三个最小化只读权限范围标识含义user.uuid:read读取用户 UUIDuser.name:read读取用户昵称user.avatar:read读取用户头像二、体验优化详解1. 学生举手通过后自动开麦此前老师通过举手后学生还需手动打开麦克风v2.0.0 改为通过即开麦。举手状态机实现在 classroom-store/index.ts通过 RTM 信令监听raise-hand事件this.rtm.events.on(raise-hand, ...)学生举手时把其userUUID加入raiseHandUsers数组取消举手时移除老师端批准后触发设备状态变更学生的mic自动置为可用成员状态同步时user.isRaiseHand raiseHandUsers.has(user.userUUID)用于在用户列表渲染举手标记见同文件handleUserJoinedChunk附近逻辑。若设备被老师关闭学生端会收到refuse-to-turn-on-mic提示避免权限冲突。2. 调整云盘空间大小限制为 10G云盘配额由服务端区域配置统一下发客户端仅读取展示。配置结构在 config.ts 中定义cloudStorage: { singleFileSize: number; // 单文件大小上限 totalSize: number; // 云盘总容量上限v2.0.0 调整为 10G allowFileSuffix: String[]; // 允许上传的文件后缀白名单 accessKey: string; }客户端通过getServerRegionConfigs()对应region/configs接口拉取该配置上传前依据totalSize校验剩余空间、依据singleFileSize校验单文件大小超过时给出明确错误提示。10G 属于服务端配额参数不同区域部署可通过配置独立调整。3. 画笔光标颜色和当前画笔颜色保持一致新版画笔、矩形、圆形、直线、箭头等工具的光标颜色会跟随当前画笔颜色实时变化。该能力由 inject-cursor.ts 注入实现监听app.memberState每当strokeColor变化时把 RGB 转成十六进制色值动态生成包含当前颜色的 SVG Data URI 光标并注册到.netless-whiteboard对应工具类上使光标与笔迹颜色视觉统一避免光标是红色、画出来是蓝色的割裂感。三、问题修复详解退出房间再次进入看不到屏幕分享v2.0.0 修复了退出房间后重新进入看不到他人屏幕分享画面的问题。该问题根因在于屏幕分享流的状态重建客户端在离开房间时未完整释放分享相关的音视频轨道与视图容器导致重进时远端分享流的绑定逻辑未触发。修复后重新进入房间会重新走分享流的订阅与挂载流程确保再次看到分享画面。相关展示组件可参考 ShareScreen 与 flat-stores/src/classroom-store/index.ts 中的成员/流状态管理逻辑。四、小结v2.0.0 的内容密度体现在三个层面备课体验云盘建目录、10G 配额、授课交互快捷键体系、局部擦除、剪贴板贴图、举手自动开麦、实时在线人数、答题器插件与开放能力多段录制回放、开发者 OAuth。这些能力在仓库中均有清晰的源码落点云盘与快捷键组件集中在flat-components/flat-pages白板能力集中在service-providers/fastboard录制与 OAuth 接口集中在flat-server-api。对希望二次开发或深度定制 Flat 的团队而言沿着上述路径即可快速定位并扩展对应功能。赞分享音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载相关推荐Agora Flat 开源教室 v2.0.0 发布说明深度解读云盘目录、多段录制、白板快捷键与课堂交互增强Agora Flat 开源教室 v2.0.0 发布说明深度解读云盘目录、多段录制、白板快捷键与课堂交互增强 导读 本文以 docs/releases/v2.音视频即时通讯教育前端桌面应用Agora Flat云录制功能实现原理音视频与白板同步录制Agora Flat云录制功能实现原理音视频与白板同步录制 Agora Flat是一款开源在线教室平台其云录制功能能够同时录制音视频和白板内容为在线教育提音视频即时通讯教育前端桌面应用Agora Flat v1.0.0-beta.3 发布详解GitHub 登录、白板文本快捷键与交互细节打磨Agora Flat v1.0.0 beta.3 发布详解GitHub 登录、白板文本快捷键与交互细节打磨 本文基于 v1.0.0 beta.3 发布说明 h音视频即时通讯教育前端桌面应用上一篇prism4cj实战应用如何用语法高亮库为Markdown围栏代码块快速渲染着色下一篇会话状态永不丢失opencode-dynamic-context-pruning持久化设计与compaction重置机制揭秘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考