开源软件名称：

开源软件地址：

开源软件介绍：

项目名称

• mCloud-rtc-app (electron-vue-rtc)
• 简会云实时音视频应用系统
• mCloud Real-Time Audio/Video Communication Conference/Meeting Application System

产品名称

• Meeting Cloud RTC
• 简会云视频会议

界面UI

登录

用户中心

公共

视频会议

在线直播

设置

前端框架及技术栈

1. Electron JS 框架
   • electron-builder构建、electron-store存储、electron-updater更新、electron-node-loader加载、asar打包等
2. TRTCCloud 腾讯音视频 SDK（trtc-electron-sdk npmjs下载）
3. Vue JS 框架及全家桶
   • Vue-cli3 构建、Vue-router 路由、Vuex 前端持久化状态存储
   • 开发工具 vue-cli（脚手架）+ vue-devtools（Chrome扩展）
4. Element UI 框架
5. 其他扩展及插件
   • OAuth2 授权登录模式
   • sns login 微信、支付宝、App扫码登录
   • crypto-js 客户端加解密
   • better-scroll 滚动条
   • nprogress 加载进度
   • Mock JS 模拟数据，无后台支持时或前端开发，可使用mock数据
   • webpack-iconfont-plugin-nodejs 自动生成svg字体图标
   • sass/scss 样式表

后端框架及技术栈

• 参见 mCloud-saas 平台，基于 Spring Cloud + OAuth2 微服务框架

功能特点

• 基于 Electron/TRTC/Vue/ElementUI 客户端应用，支持发布 Mac/Windows
• 极简UI界面，去除默认菜单栏，自定义标题栏
• 主体、登录、设置、自动更新四组主进程，主进程间及渲染进程通讯
• 多人视频会议

多人实时音视频、会议加密、线下会议室同步预约会议等候室、提前进会、虚拟背景、美颜参会人话筒、摄像头权限，举手发言、互动弹幕会议签到、共享屏幕、自动水印、 会议白板等

• 在线直播会议

在线直播、导播台控制、直播转录直播等候室、参会等候室、提前进会参会人话筒、摄像头权限，参会观众权限，互动弹幕自定义带宽、分辨率码流，共享屏幕、自动水印等

• OAuth2 登录和注销
• 自动更新检测，自动升级
• 应用配置功能及本地存储配置文件
• 路由、菜单分离设置，支持路由权限
• localStorage 应用数据存储
• Cookie 会话封装
• 视图加载等待动画，加载进度条
• 视频全屏模式
• 自动生成 SVG 字体图标
• 时间日期计算工具
• 导入 Excel (xlsx+csv)
• 数据导出 Excel (xlsx/csv/txt)和文本txt
• 富文本编辑器、Markdown编辑器
• E-Chart 图表库
• 公用样式抽离，方便的主题定制
• 日志记录和错误捕捉
• 详细的文档

目录结构

├─ bin 应用发布目录（自动生成）│  ├─ win-unpacked 未打包非正式发布的应用程序，不需安装可直接运行│  ├─ 以下三个文件上传，上传到服务器供下载和自动升级检测│  ├─ MeetingCloudRTC[version | 1.0.0].exe 打包应用，用于正式发布│  ├─ builder-effective-config 最新版配置文件，与latest.yml对应│  └─ latest.yml 最新版属性文件├─ dist_electron electron+vue 项目代码发布目录（自动生成）├─ docs 使用帮助及参考文档├─ electron 主进程资源│  ├─ event 事件库│  ├─ installer nsis安装配置│  ├─ window 窗体主进程│  └─ background.js 主进程启动文件├─ public 静态资源│  ├─ download 下载中心静态站，需上传到服务器│  │  └─ app 服务器端应用存放目录│  ├─ image 资源图片 │  ├─ favicon.ico 站点收藏夹自定义图标│  └─ index.html Vue挂载主页├─ src│  ├─ api 接口│  │  ├─ components 组件（RESTFUL/markdown）│  │  ├─ mock 模拟数据（mockdata）│  │  ├─ *** 其他应用接口，对应后端微服务│  │  └─ login 登录接口│  ├─ assets 资源│  │  ├─ icon 字体图标│  │  └─ svg 矢量图标，自动检测新文件并更新icon/font-mcloud等样式字体库[仅开发模式下]│  ├─ components 组件│  ├─ layout 布局│  ├─ lib 通用库│  │  ├─ mixin 共用混合函数│  │  └─ trtc 实时音视频工具类库│  ├─ menu 菜单│  ├─ mock 模拟数据│  ├─ plugin 插件│  ├─ ├─ axios 基于 promise 的 HTTP 库│  │  └─ locales i18n多国语言│  ├─ router 路由│  ├─ store 全局状态│  ├─ views 视图页面│  ├─ App.vue 启动视图│  ├─ main.js 启动入口文件│  └─ setting.js 设置├─ tests 单元测试├─ .env 环境变量├─ .env.development 开发环境变量├─ .env.production 生产环境变量├─ .eslintignore ESLINT忽略文件├─ .eslintrc.js 管理检测JS代码风格的工具设置├─ .gitignore GIT忽略文件├─ .npmrc 仓库镜像├─ .yarnrc 仓库镜像├─ .postcssrc.js 使用插件转换CSS的工具设置├─ babel.config.js BALEL编译器配置├─ package.json 依赖库管理配置└─ vue.config.js Vue配置文件

安装使用

• 推荐使用yarn，如使用npm自行替换命令

开发安装

1. 安装 Nodejs、npm、yarn
2. 版本检测及推荐配置

node -vv12.18.0npm -v6.14.8yarn -v1.22.4

3. 自动安装依赖库

• electron 安装比较慢（FQ科学上网）

yarn install

运行与发布

• [开发模式] 运行

yarn electron:serve

• [生产环境] 发布

yarn electron:build

生产环境自定义快捷键

• 禁用默认快捷键，并自定义快捷键

ctrl + shift + i + t 打开调试工具

参考资料及示例

• Nodejs 官网 下载 node.js。
• Electron 官网
• Vue 官网 渐进式 JavaScript 框架, One Page 单页应用
• Element UI 饿了么UI框架
• TRTCCloud 文档与资源 文档与资源
• TRTCCloud API API接口文档

约定与规则

• 统一前端代码风格及格式化

使用 eslint 和 prettier 代码格式化工具，并遵循常用风格尽可能减少配置、少数服从多数、使用IDE工具统一风格。

安装 eslint、beautify（辅助）、prettier 扩展支持js、ts、css、less、scss、json、jsx，集成vscode、vim、WebStorm、sublime text插件

* 默认缩进2个字符* 行尾不加分号* 数组元素前加空格* 数据元素不换行* 函数名与括号中间加空格* 使用单引号替代双引号* 强制使用全等===

• 相对单位与组合字体

使用相对单位rem，基准值：16px"PingFang SC", "Microsoft YaHei", "微软雅黑", "Arial", "黑体", "宋体", "sans-serif";