项目名称

• 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 -v
v12.18.0
npm -v
6.14.8
yarn -v
1.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";