# electron-vue-rtc

**Repository Path**: lorron/electron-vue-rtc

## Basic Information

- **Project Name**: electron-vue-rtc
- **Description**: Meeting Cloud RTC 简会云实时音视频应用系统，基于 Electron/TRTC/Vue/ElementUI 客户端应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2020-09-30
- **Last Updated**: 2025-04-23

## Categories & Tags

**Categories**: multimedia

**Tags**: None

## README

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

### 产品名称
- Meeting Cloud RTC
- 简会云视频会议

### 界面UI
#### 登录
![登录](./public/capture/login.png)
#### 用户中心
![用户中心](./public/capture/my.png)
#### 公共
![公共](./public/capture/public.png)
#### 视频会议
![视频会议](./public/capture/conf-rtc.png)
#### 在线直播
![在线直播](./public/capture/conf-live.png)
#### 设置
![设置](./public/capture/setting.png)

### 前端框架及技术栈
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 官网](https://nodejs.org/en/download/) 下载 node.js。
- [Electron 官网](https://www.electronjs.org/docs/api)
- [Vue 官网](https://cn.vuejs.org/) 渐进式 JavaScript 框架, One Page 单页应用
- [Element UI](http://element-cn.eleme.io/#/zh-CN) 饿了么UI框架
- [TRTCCloud 文档与资源](https://cloud.tencent.com/product/trtc/developer) 文档与资源
- [TRTCCloud API](https://trtc-1252463788.file.myqcloud.com/electron_sdk/docs/TRTCCloud.html) 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";