音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载Agora Flat 是 Agora声网开源的在线教室客户端项目本仓库提供其 Web 端、Windows 与 macOS 桌面端的完整实现。本文以仓库中文 READMEdocs/readme/README-zh.md为主线系统讲解 Flat 的核心功能特性、无服务端本地构建流程、Electron 与 Web 双端启动/打包命令并结合仓库源码与配置文件说明每条命令背后的执行链路帮助你快速跑通整个客户端工程并理解其工程组织方式。图片说明Flat 客户端主界面展示涵盖互动白板、音视频课堂等核心场景来源docs/readme/README-zh.md 顶部展示图。一、项目概览一个 Monorepo 中的两类客户端Flat 项目采用 pnpm workspace 组织为单仓库Monorepo根目录的 pnpm-workspace.yaml 声明了desktop/**、web/**、packages/**、service-providers/**四类工作区将桌面端、Web 端、共享业务包与服务提供商service provider集中在同一仓库中维护。仓库内主要包含两个可独立构建的客户端工程Flat Electron 客户端desktop基于 Electron 的桌面实现主进程位于desktop/main-app渲染层位于desktop/renderer-app通过 esbuild / webpack 分别构建主进程与渲染进程Flat Web 客户端web基于 Vite 的 Web 实现具体工程位于 web/flat-web。共享业务逻辑集中在 packages 下的flat-componentsUI 组件库、flat-pages页面、flat-stores状态管理、flat-server-api服务端 API 封装、flat-i18n国际化文案、flat-types类型定义等包中底层音视频、白板等能力则通过 service-providers 下的各服务提供商如agora-rtc、agora-rtm、fastboard、file-convert-netless、file-preview-netless以插件化方式接入。根目录 package.json 还通过preinstall钩子执行npx only-allow pnpm强制使用 pnpm 作为包管理器prepare钩子执行husky install以启用 Git 提交钩子。二、核心特性全景实时课堂的六类能力README 将 Flat 的能力归纳为六大类下面逐项结合仓库代码给出对应的实现落点便于你在阅读源码时按图索骥。1. 实时交互多功能互动白板白板能力由service-providers/fastboard基于 Netless Whiteboard 的 fastboard 封装与service-providers/file-convert-netless课件转换、file-preview-netless/file-preview-netless-slide文档预览协同提供白板状态管理见 packages/flat-stores/src/whiteboard-store/index.ts实时音视频RTC桌面端通过 service-providers/agora-rtc/agora-rtc-electron 接入 Agora 音视频 SDKWeb 端通过 service-providers/agora-rtc/agora-rtc-web 接入即时消息RTM聊天由 service-providers/agora-rtm 与agora-rtm2提供信令与群聊能力课堂内的聊天状态管理见 packages/flat-stores/src/classroom-store/chat-store.ts。2. 登录方式支持微信与 GitHub 两种第三方登录桌面端与 Web 端的登录逻辑见 packages/flat-pages/src/LoginPage内含githubLogin.ts、googleLogin.ts、agoraLogin.ts、WeChatLogin.tsx等服务端登录协议封装见 packages/flat-server-api/src/login.ts。3. 房间管理支持加入、创建、预定房间并支持周期性房间周期课。房间相关 API 封装见 packages/flat-server-api/src/room.ts周期性房间页面见 packages/flat-pages/src/PeriodicRoomDetailPage 与ModifyPeriodicRoomPage。4. 课堂录制回放白板信令回放见 packages/flat-pages/src/ReplayPage/ReplayWhiteboard.tsx音视频云录制回放云录制服务由 service-providers/agora-cloud-recording 封装回放页面见 packages/flat-pages/src/ReplayPage/ReplayVideo.tsx群聊信令回放见 packages/flat-pages/src/ReplayPage/ReplayList.tsx 与回放状态管理 packages/flat-stores/src/classroom-replay-store。5. 多媒体课件云盘课件云盘支持上传、转换与预览UI 与容器见 packages/flat-components/src/components/CloudStorage 与 packages/flat-components/src/containers/CloudStorageContainer服务端 API 见 packages/flat-server-api/src/storage.ts。6. 屏幕共享屏幕共享能力由 RTC 服务提供商实现桌面端见 service-providers/agora-rtc/agora-rtc-electron/src/rtc-share-screen.tsWeb 端见 service-providers/agora-rtc/agora-rtc-web/src/rtc-share-screen.ts。三、环境准备pnpm 安装与依赖拉取Flat 使用 pnpm 作为包管理器且根目录 package.json 的preinstall钩子会强制校验。若本机尚未安装 pnpm先全局安装npm i -g pnpm克隆或 fork仓库后在项目根目录执行依赖安装pnpm ipnpm i会按照 pnpm-workspace.yaml 解析工作区为desktop、web、packages、service-providers下的所有子包统一安装依赖并建立软链接。桌面端依赖的坑Electron 镜像与 agora 原生插件构建 Electron 客户端涉及两个常见网络问题README 与仓库配置均有对应处理Electron 二进制下载失败若因网络问题无法下载 Electron可在项目目录新建.npmrc文件并写入如下内容后重新执行pnpm iELECTRON_MIRRORhttps://npmmirror.com/mirrors/electron/Agora 原生插件agora-electron-sdk该插件体积较大且通过 postinstall 脚本下载因此根目录 package.json 的pnpm.neverBuiltDependencies中声明了agora-electron-sdk注释明确说明我们会在netless/flat-service-provider-agora-rtc-electron的 postinstall 脚本中下载它。相关下载逻辑见 service-providers/agora-rtc/agora-rtc-electron/scripts/download-agora-addon。四、构建并运行 Flat Electron 客户端在仓库根目录执行pnpm start该命令在根目录 package.json 中定义为node scripts/launch/index.js。启动脚本 scripts/launch/index.js 会根据操作系统分发启动方式Windows调用scripts\launch\start.cmd见 scripts/launch/start.cmdmacOS先用 AppleScript 探测是否安装了 iTerm2scripts/launch/mac/exists_iTerm.scpt若存在则通过launch_iTerm.scpt打开 iTerm2 启动否则回退到系统终端launch_terminal.scpt相关脚本见 scripts/launch/mac。启动脚本还会读取环境变量FLAT_REGION并据此拼接启动后缀FLAT_REGION缺省时不追加后缀取值为CN或SG时分别追加:cn/:sg。这也解释了根目录为何同时存在start:cn与start:sgcross-env FLAT_REGIONCN node scripts/launch/index.js——用于指定接入不同区域的服务配置。真正驱动桌面端开发构建的是 desktop/main-app/package.json 中的脚本startcross-env NODE_ENVdevelopment esbuild-dev --cjs scripts/esbuild/esbuild.dev.ts通过 esbuild 增量编译主进程配置见 desktop/main-app/scripts/esbuild/esbuild.dev.tsbuildcross-env NODE_ENVproduction esbuild-dev --cjs scripts/esbuild/esbuild.prod.ts产出生产构建渲染进程则走 webpack 构建体系desktop/main-app/webpack其产物desktop/renderer-app/dist由主进程加载。打包为可执行文件README 给出了三种打包方式均需在仓库根目录执行pnpm ship # 根据当前系统打包 pnpm ship:mac # 针对 macOS 打包 pnpm ship:win # 针对 Windows 打包以根目录脚本定义看它们的实际执行链路为pnpm ship→pnpm -F renderer-app build pnpm -F flat ship即先构建渲染层再进入desktop/main-app执行shippnpm ship:mac→pnpm -F renderer-app build pnpm -F flat ship:macpnpm ship:win→pnpm -F renderer-app build pnpm -F flat ship:win。desktop/main-app侧对应脚本见 desktop/main-app/package.jsonshippnpm build node ./scripts/pack autoauto表示按当前系统选择平台ship:winpnpm build pnpm pack:winship:macpnpm build pnpm pack:mac。打包程序 desktop/main-app/scripts/pack/index.js 内部通过 electron-builder 完成构建关键流程包括读取FLAT_REGION缺省为CN见 scripts/utils/auto-choose-config.js 与 scripts/constants.js并从 desktop/main-app/electron-builder 下加载对应的CN.yml/SG.yml配置调用 Agora 原生插件下载脚本download-agora-addon按目标平台拉取对应的 Agora SDK 原生模块将渲染层产物desktop/renderer-app/dist作为extraResources拷入安装包macOS 额外打入resources/macOS/locals本地化资源若为 macOS 且SKIP_MAC_NOTARIZE不为no则挂接 desktop/main-app/scripts/pack/notarize.js 进行公证Windows 打包若设置了WINDOWS_CODE_SIGNING_SERVER或证书环境变量则启用 desktop/main-app/scripts/pack/sign.js 完成签名打包完成后若当前系统与目标平台不一致会恢复 Agora 原生插件到开发环境对应版本避免影响后续开发。以CN.ymldesktop/main-app/electron-builder/CN.yml为例可看到桌面安装包的关键产物配置通用appId: io.agora.flatproductName: Flat产物命名Flat-${arch}-${version}.${ext}启用asarmacOS同时产出zip与dmgarch 覆盖x64与arm64启用hardenedRuntime与公证所需的 entitlementsentitlements.mac.plist并注册x-agora-flat-clientURL SchemeWindows产出zip与nsisx64NSIS 安装器允许选择安装目录、创建桌面与开始菜单快捷方式协议注册x-agora-flat-client自定义协议用于唤起客户端。区域配置说明仓库 config 目录下按CN/SG划分部署环境打包与启动脚本通过FLAT_REGION环境变量选择对应配置因此同一份代码可以构建出接入不同区域服务的客户端根目录还提供了start:cn/start:sg/ship:cn:all/ship:sg:all等便捷命令。五、构建并运行 Flat Web 客户端README 提供了两条等价命令任选其一在仓库根目录执行pnpm start:web或cd ./web/flat-web/ pnpm start两条命令最终都进入 web/flat-web 工程pnpm start:web等价于pnpm -F flat-web start-F表示在指定 workspace 包内执行后者在 web/flat-web/package.json 中定义为vite --open即以 Vite 启动开发服务器并自动打开浏览器。Web 工程同样支持区域切换与生产构建start:cn/start:sgcross-env FLAT_REGIONCN pnpm start/FLAT_REGIONSGbuildcross-env NODE_OPTIONS--max-old-space-size8192 vite build扩容 Node 内存上限以支撑大型构建build:cn/build:sg分别以对应区域配置执行构建servevite preview预览生产构建产物。从依赖看Web 端通过 workspace 依赖引用了netless/flat-pages、netless/flat-stores、netless/flat-services及各flat-service-provider-*包RTC Web、RTM、云录制、课件转换与预览等其页面与业务逻辑集中在 packages/flat-pages/src入口初始化流程见 web/flat-web/src/tasks。六、UI 与业务逻辑分离用 Storybook 预览组件Flat 的 UI 与业务逻辑分离开发。README 建议通过 Storybook 快速查看与开发部分 UI本地启动方式为在仓库根目录执行pnpm storybook该命令在根目录 package.json 中定义为pnpm -F flat-components start进入 packages/flat-components 组件库包执行 Storybook 启动脚本。该包的 package.json 中startstart-storybook -p 6006 -s public --no-version-updates即在6006端口启动 Storybook 开发服务器buildbuild-storybook -s public可产出静态 Storybook 站点。组件库源码位于 packages/flat-components/src/components覆盖课堂ClassroomPage、登录LoginPage、主页HomePage、云盘CloudStorage、设置SettingPage等完整业务组件并配有 packages/flat-components/src/theme 下的主题与样式体系antd 定制、颜色变量等是快速理解 Flat UI 结构的最佳入口。七、继续深入参考文档与周边项目仓库内参考文档中文 README 指向的三份仓库内文档同样值得一读发布版本说明按版本号组织的发布记录v1.0.0至v2.3.6均提供中英文说明如 docs/releases/v2.3.6/zh.md调试 Flat其中 Electron 主进程调试指南见 docs/debugging/electron/README-zh.md贡献指南涵盖改进文档、改善问题、反馈问题等协作方式。周边项目README 列出的相关项目包括 Flat 安卓客户端、Flat 服务端与 Flat 主页其中服务端负责登录鉴权、房间与云盘等业务 API客户端仓库内的对应协议封装可参考 packages/flat-server-api/src 下的login.ts、room.ts、storage.ts、recording.ts等模块。开源许可与使用注意仓库采用 MIT 许可证见 LICENSE可自由用于学习与商业场景官方声明可以商用但官方不提供商业化需求定制、部署支持与客户服务项目仅用于学习与交流请遵守所在国法律法规勿用于政治、宗教、色情、犯罪等领域。八、常见问题速查问题解决方案依据未安装 pnpmnpm i -g pnpm全局安装README「安装」小节Electron 二进制下载失败项目根目录新建.npmrc写入ELECTRON_MIRRORhttps://npmmirror.com/mirrors/electron/重新pnpm iREADME「构建并运行 Flat Electron 客户端」小节想接入不同区域服务使用pnpm start:cn/pnpm start:sg或pnpm ship:cn:all/pnpm ship:sg:all根目录 package.json 脚本定义只想看 UI 组件根目录执行pnpm storybook访问http://localhost:6006packages/flat-components/package.json打包指定平台根目录执行pnpm ship:mac/pnpm ship:winREADME「构建并运行 Flat Electron 客户端」小节通过本文的命令与源码对照你已掌握 Flat 双端客户端的完整构建链路pnpm i安装依赖 →pnpm start/pnpm start:web本地开发 →pnpm ship/pnpm ship:mac/pnpm ship:win产物打包并理解了FLAT_REGION区域配置、Electron 镜像与 Agora 原生插件等关键工程细节。接下来即可基于 desktop 与 web 两个工程目录展开二次开发。赞分享音视频即时通讯教育前端桌面应用【免费下载链接】flatProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.项目地址https://gitcode.com/gh_mirrors/fl/flat点击查看免费下载相关推荐从慢查询到闪电执行SQLiteStudio查询执行计划完全解析从慢查询到闪电执行SQLiteStudio查询执行计划完全解析 一、SQL性能优化的痛点与解决方案 你是否曾遇到过这样的情况开发阶段运行流畅的SQLite数音视频即时通讯教育前端桌面应用终极Agora Flat桌面端打包指南Electron Builder配置详解想要将你的Agora Flat开源教室项目打包成专业的桌面应用程序吗这份完整的Electron Builder配置指南将带你从基础配置到高级优化全面掌握桌面音视频即时通讯教育前端桌面应用Agora Flat 开源课堂客户端完全指南从快速上手到源码级架构解析Agora Flat 开源课堂客户端完全指南从快速上手到源码级架构解析 本文是一份面向开发者的 Agora Flat 客户端实战指南。Agora Flat 是音视频即时通讯教育前端桌面应用上一篇CANN pyasc TBufPool 构造函数__init__详解Unified Buffer/L1 内存资源池的创建与初始化下一篇逆向工程实战深度解析Windows平台消息防撤回工具的实现原理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考