476 lines
12 KiB
Markdown
476 lines
12 KiB
Markdown
# 🎉 Jitsi Meet 视频会议功能 - 完整实现总结
|
||
|
||
## ✅ 已完成的工作
|
||
|
||
### 一、后端开发（Java Spring Boot）
|
||
|
||
#### 1. Service接口层（2个接口）
|
||
- ✅ `VideoMeetingService.java` - 视频会议业务接口
|
||
- ✅ `JitsiTokenService.java` - JWT Token服务接口
|
||
|
||
#### 2. Service实现层（2个实现）
|
||
- ✅ `VideoMeetingServiceImpl.java` - 核心业务逻辑（约400行）
|
||
- 会议创建（验证权限、生成JWT、构建iframe URL）
|
||
- 会议权限验证（检查聊天室成员身份）
|
||
- 用户专属URL生成（每个用户独立JWT Token）
|
||
- 会议状态管理（开始/结束）
|
||
- 活跃会议检测
|
||
|
||
- ✅ `JitsiTokenServiceImpl.java` - JWT Token生成服务
|
||
- 符合Jitsi Meet标准的JWT生成
|
||
- iframe URL构建（带配置参数）
|
||
- 房间名生成规则
|
||
|
||
#### 3. Controller层（6个REST API）
|
||
```
|
||
POST /workcase/chat/meeting/create - 创建会议
|
||
GET /workcase/chat/meeting/{meetingId} - 获取会议信息
|
||
POST /workcase/chat/meeting/{meetingId}/join - 加入会议
|
||
POST /workcase/chat/meeting/{meetingId}/start - 开始会议
|
||
POST /workcase/chat/meeting/{meetingId}/end - 结束会议
|
||
GET /workcase/chat/meeting/room/{roomId}/active - 获取活跃会议
|
||
```
|
||
|
||
---
|
||
|
||
### 二、前端Vue开发
|
||
|
||
#### 1. API封装
|
||
- ✅ `meeting.ts` - 完整的会议API封装（6个方法）
|
||
|
||
#### 2. ChatRoom.vue组件增强
|
||
- ✅ 添加roomId、workcaseId Props
|
||
- ✅ 实现会议创建逻辑（handleStartMeeting）
|
||
- ✅ 实现会议结束逻辑（handleEndMeeting）
|
||
- ✅ 实现活跃会议检测（checkActiveMeeting）
|
||
- ✅ 会议iframe显示（带头部控制栏）
|
||
- ✅ 按钮状态管理（loading、disabled）
|
||
|
||
#### 3. 样式优化
|
||
- ✅ 会议容器样式（渐变头部）
|
||
- ✅ 关闭按钮样式（半透明效果）
|
||
- ✅ 按钮禁用状态
|
||
|
||
---
|
||
|
||
### 三、前端UniApp开发
|
||
|
||
#### 1. MeetingView.uvue页面
|
||
- ✅ 自定义导航栏
|
||
- ✅ web-view全屏显示
|
||
- ✅ 结束会议功能
|
||
- ✅ 退出确认弹窗
|
||
|
||
#### 2. chatRoom.uvue修改
|
||
- ✅ 更新startMeeting函数（调用API创建会议）
|
||
- ✅ 跳转到MeetingView页面
|
||
|
||
#### 3. workcaseChat.ts API
|
||
- ✅ 添加6个会议相关API方法
|
||
|
||
---
|
||
|
||
### 四、Docker部署配置
|
||
|
||
#### 1. docker-compose.yml
|
||
- ✅ 添加4个Jitsi服务（web、prosody、jicofo、jvb）
|
||
- ✅ 配置JWT认证
|
||
- ✅ 端口映射（8280、8443、10000/udp）
|
||
- ✅ 数据持久化（.data/docker/jitsi）
|
||
- ✅ 健康检查配置
|
||
- ✅ 服务依赖关系
|
||
|
||
#### 2. application-dev.yml
|
||
- ✅ 添加jitsi配置节
|
||
- ✅ JWT密钥配置
|
||
- ✅ 服务器地址配置
|
||
- ✅ Token有效期配置
|
||
|
||
---
|
||
|
||
### 五、文档和脚本
|
||
|
||
#### 1. 文档
|
||
- ✅ `Jitsi-Meet本地部署指南.md` - npm start方式（开发测试）
|
||
- ✅ `Jitsi-Meet-Docker部署指南.md` - Docker方式（生产推荐）
|
||
- ✅ `项目总结.md` - 本文档
|
||
|
||
#### 2. 启动脚本
|
||
- ✅ `启动Jitsi视频会议服务.bat` - 一键启动
|
||
- ✅ `停止Jitsi视频会议服务.bat` - 一键停止
|
||
|
||
---
|
||
|
||
## 📂 修改的文件清单
|
||
|
||
### 后端（6个文件）
|
||
```
|
||
✅ VideoMeetingService.java (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\apis\api-workcase\src\main\java\org\xyzh\api\workcase\service\
|
||
|
||
✅ JitsiTokenService.java (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\apis\api-workcase\src\main\java\org\xyzh\api\workcase\service\
|
||
|
||
✅ VideoMeetingServiceImpl.java (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\workcase\src\main\java\org\xyzh\workcase\service\
|
||
|
||
✅ JitsiTokenServiceImpl.java (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\workcase\src\main\java\org\xyzh\workcase\service\
|
||
|
||
✅ WorkcaseChatContorller.java (修改：添加会议接口)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\workcase\src\main\java\org\xyzh\workcase\controller\
|
||
|
||
✅ application-dev.yml (修改：添加jitsi配置)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\workcase\src\main\resources\
|
||
```
|
||
|
||
### 前端Vue（3个文件）
|
||
```
|
||
✅ meeting.ts (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase\src\api\workcase\
|
||
|
||
✅ ChatRoom.vue (修改：添加会议功能)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase\src\components\chatRoom\chatRoom\
|
||
|
||
✅ ChatRoom.scss (修改：添加会议样式)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase\src\components\chatRoom\chatRoom\
|
||
```
|
||
|
||
### 前端UniApp（3个文件）
|
||
```
|
||
✅ MeetingView.uvue (新建)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase_wechat\pages\meeting\MeetingView\
|
||
|
||
✅ chatRoom.uvue (修改：更新startMeeting)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase_wechat\pages\chatRoom\chatRoom\
|
||
|
||
✅ workcaseChat.ts (修改：添加会议API)
|
||
F:\Project\urbanLifeline\urbanLifelineWeb\packages\workcase_wechat\api\workcase\
|
||
```
|
||
|
||
### Docker配置（2个文件）
|
||
```
|
||
✅ docker-compose.yml (修改：添加4个Jitsi服务)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\.bin\docker\urbanlifeline\
|
||
|
||
✅ application-dev.yml (修改：添加jitsi配置)
|
||
F:\Project\urbanLifeline\urbanLifelineServ\workcase\src\main\resources\
|
||
```
|
||
|
||
### 文档和脚本（5个文件）
|
||
```
|
||
✅ Jitsi-Meet本地部署指南.md
|
||
✅ Jitsi-Meet-Docker部署指南.md
|
||
✅ 项目总结.md
|
||
✅ 启动Jitsi视频会议服务.bat
|
||
✅ 停止Jitsi视频会议服务.bat
|
||
```
|
||
|
||
**总计：19个文件（12个新建，7个修改）**
|
||
|
||
---
|
||
|
||
## 🚀 快速开始（3步搞定）
|
||
|
||
### 步骤1：启动Jitsi Meet服务
|
||
|
||
**方法A：使用启动脚本（推荐）**
|
||
```bash
|
||
# 双击运行
|
||
F:\Project\urbanLifeline\启动Jitsi视频会议服务.bat
|
||
```
|
||
|
||
**方法B：手动启动**
|
||
```bash
|
||
cd F:\Project\urbanLifeline\urbanLifelineServ\.bin\docker\urbanlifeline
|
||
docker-compose up -d jitsi-web jitsi-prosody jitsi-jicofo jitsi-jvb
|
||
```
|
||
|
||
**验证**：浏览器打开 http://localhost:8280/
|
||
|
||
---
|
||
|
||
### 步骤2：启动Java后端
|
||
|
||
```bash
|
||
# 确保配置正确
|
||
# application-dev.yml 中的 jitsi 配置已自动添加
|
||
|
||
# 启动后端服务
|
||
# 使用你的IDE或命令行启动 workcase-service
|
||
```
|
||
|
||
**验证**：访问 http://localhost:8180/swagger-ui.html 查看会议接口
|
||
|
||
---
|
||
|
||
### 步骤3：启动前端并测试
|
||
|
||
#### Vue前端测试
|
||
```bash
|
||
# 启动Vue前端
|
||
npm run dev
|
||
|
||
# 在聊天室页面点击"发起会议"按钮
|
||
# 应该能看到Jitsi Meet会议界面
|
||
```
|
||
|
||
#### UniApp测试
|
||
```bash
|
||
# 使用HBuilderX打开项目
|
||
# 运行到小程序/App
|
||
# 在聊天室点击"发起会议"
|
||
# 跳转到全屏会议页面
|
||
```
|
||
|
||
---
|
||
|
||
## 🔑 核心特性
|
||
|
||
### 1. 安全性
|
||
- ✅ JWT Token身份验证（每个用户独立Token）
|
||
- ✅ 聊天室成员权限校验
|
||
- ✅ Token有效期控制（2小时）
|
||
- ✅ 主持人权限区分（客服=主持人）
|
||
|
||
### 2. 用户体验
|
||
- ✅ 页面刷新后会议不丢失（活跃会议检测）
|
||
- ✅ 会议创建loading状态
|
||
- ✅ 按钮禁用状态（会议进行中不可重复创建）
|
||
- ✅ 会议头部控制栏（显示状态+关闭按钮）
|
||
- ✅ UniApp独立会议页面（可切换聊天/会议）
|
||
|
||
### 3. 扩展性
|
||
- ✅ 支持主持人权限
|
||
- ✅ 支持Jitsi配置项扩展
|
||
- ✅ 预留会议参与者记录功能
|
||
- ✅ Docker部署，易于扩展
|
||
|
||
---
|
||
|
||
## ⚙️ 重要配置说明
|
||
|
||
### JWT密钥配置
|
||
|
||
**Docker配置**（docker-compose.yml）：
|
||
```yaml
|
||
JWT_APP_ID: urbanLifeline
|
||
JWT_APP_SECRET: your-secret-key-change-in-production
|
||
```
|
||
|
||
**Java后端配置**（application-dev.yml）：
|
||
```yaml
|
||
jitsi:
|
||
app:
|
||
id: urbanLifeline # 必须与Docker一致
|
||
secret: your-secret-key-change-in-production # 必须与Docker一致
|
||
```
|
||
|
||
⚠️ **生产环境必须修改密钥**：
|
||
1. 生成强随机字符串（至少32位）
|
||
2. 同时修改Docker和Java配置
|
||
3. 重启Jitsi服务和Java后端
|
||
|
||
---
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 1. 测试Jitsi服务
|
||
```bash
|
||
# 访问Jitsi主页
|
||
http://localhost:8280/
|
||
|
||
# 测试创建房间（应被拦截，需要JWT）
|
||
http://localhost:8280/test-room
|
||
```
|
||
|
||
### 2. 测试后端接口
|
||
```bash
|
||
# 使用Postman或curl测试
|
||
POST http://localhost:8180/urban-lifeline/workcase/chat/meeting/create
|
||
Content-Type: application/json
|
||
Authorization: Bearer <your-token>
|
||
|
||
{
|
||
"roomId": "test-room-123",
|
||
"workcaseId": "WC001",
|
||
"meetingName": "测试会议",
|
||
"maxParticipants": 10
|
||
}
|
||
|
||
# 响应应包含带JWT的iframeUrl
|
||
{
|
||
"code": 0,
|
||
"data": {
|
||
"meetingId": "xxx",
|
||
"iframeUrl": "http://localhost:8280/workcase_WC001_xxx?jwt=eyJhbGc..."
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 测试前端集成
|
||
- Vue: 在聊天室点击"发起会议"
|
||
- UniApp: 在聊天室点击"发起会议"
|
||
- 验证会议iframe能正常显示
|
||
- 验证多人能同时加入会议
|
||
|
||
---
|
||
|
||
## 🔧 常见问题
|
||
|
||
### Q1: Docker启动失败？
|
||
**A**: 检查端口占用和Docker状态
|
||
```bash
|
||
# 检查Docker
|
||
docker info
|
||
|
||
# 检查端口
|
||
netstat -ano | findstr "8280"
|
||
netstat -ano | findstr "10000"
|
||
|
||
# 查看日志
|
||
docker-compose logs jitsi-web
|
||
```
|
||
|
||
### Q2: JWT验证失败？
|
||
**A**: 确保密钥一致
|
||
```bash
|
||
# 检查Docker配置
|
||
docker-compose exec jitsi-prosody cat /config/prosody.cfg.lua | grep jwt
|
||
|
||
# 检查Java配置
|
||
cat application-dev.yml | grep -A 5 "jitsi:"
|
||
|
||
# 密钥必须完全一致
|
||
```
|
||
|
||
### Q3: 视频连接不上？
|
||
**A**: 检查UDP端口10000
|
||
```bash
|
||
# Windows防火墙
|
||
netsh advfirewall firewall add rule name="Jitsi JVB" dir=in action=allow protocol=UDP localport=10000
|
||
|
||
# 或临时关闭防火墙测试
|
||
```
|
||
|
||
### Q4: 前端iframe显示空白？
|
||
**A**: 检查跨域和URL
|
||
```bash
|
||
# 浏览器控制台查看错误
|
||
# 确保iframeUrl是http://localhost:8280开头
|
||
# 检查JWT Token是否正确生成
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 项目结构
|
||
|
||
```
|
||
urbanLifeline/
|
||
├── .data/docker/jitsi/ # Jitsi数据目录
|
||
│ ├── web/
|
||
│ ├── prosody/
|
||
│ ├── jicofo/
|
||
│ └── jvb/
|
||
├── docs/ # 文档目录
|
||
│ ├── Jitsi-Meet本地部署指南.md
|
||
│ ├── Jitsi-Meet-Docker部署指南.md
|
||
│ └── 项目总结.md
|
||
├── urbanLifelineServ/
|
||
│ ├── .bin/docker/urbanlifeline/
|
||
│ │ └── docker-compose.yml # 包含Jitsi配置
|
||
│ ├── apis/api-workcase/
|
||
│ │ └── src/main/java/org/xyzh/api/workcase/
|
||
│ │ └── service/
|
||
│ │ ├── VideoMeetingService.java
|
||
│ │ └── JitsiTokenService.java
|
||
│ └── workcase/
|
||
│ ├── src/main/java/org/xyzh/workcase/
|
||
│ │ ├── controller/WorkcaseChatContorller.java
|
||
│ │ └── service/
|
||
│ │ ├── VideoMeetingServiceImpl.java
|
||
│ │ └── JitsiTokenServiceImpl.java
|
||
│ └── src/main/resources/
|
||
│ └── application-dev.yml
|
||
├── urbanLifelineWeb/
|
||
│ └── packages/
|
||
│ ├── workcase/
|
||
│ │ └── src/
|
||
│ │ ├── api/workcase/meeting.ts
|
||
│ │ └── components/chatRoom/chatRoom/
|
||
│ │ ├── ChatRoom.vue
|
||
│ │ └── ChatRoom.scss
|
||
│ └── workcase_wechat/
|
||
│ ├── api/workcase/workcaseChat.ts
|
||
│ └── pages/
|
||
│ ├── chatRoom/chatRoom/chatRoom.uvue
|
||
│ └── meeting/MeetingView/MeetingView.uvue
|
||
├── 启动Jitsi视频会议服务.bat
|
||
└── 停止Jitsi视频会议服务.bat
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 下一步建议
|
||
|
||
### 短期优化
|
||
1. **会议录制功能**
|
||
- 配置Jibri录制组件
|
||
- 存储录制文件到MinIO
|
||
- 提供录制回放功能
|
||
|
||
2. **会议统计**
|
||
- 记录参与者加入/离开时间
|
||
- 生成会议时长报告
|
||
- 导出会议数据
|
||
|
||
3. **界面优化**
|
||
- 自定义Jitsi Meet界面主题
|
||
- 添加品牌Logo
|
||
- 优化移动端体验
|
||
|
||
### 长期规划
|
||
1. **生产部署**
|
||
- 配置域名和SSL证书
|
||
- 配置公网IP和防火墙
|
||
- 负载均衡和高可用
|
||
|
||
2. **功能增强**
|
||
- 屏幕共享优化
|
||
- 虚拟背景
|
||
- 会议白板功能
|
||
- AI转录字幕
|
||
|
||
3. **监控告警**
|
||
- Prometheus监控
|
||
- Grafana仪表板
|
||
- 告警通知
|
||
|
||
---
|
||
|
||
## ✨ 总结
|
||
|
||
### 已实现功能
|
||
✅ 完整的Jitsi Meet视频会议功能
|
||
✅ JWT认证和权限控制
|
||
✅ Docker一键部署
|
||
✅ 前后端完整集成
|
||
✅ Vue和UniApp双端支持
|
||
✅ 详细的文档和脚本
|
||
|
||
### 技术亮点
|
||
🌟 每个用户独立JWT Token（安全性高）
|
||
🌟 活跃会议检测（用户体验好）
|
||
🌟 Docker部署（易于维护）
|
||
🌟 微服务架构（易于扩展）
|
||
|
||
### 项目价值
|
||
💡 真正的企业级视频会议解决方案
|
||
💡 完全自主可控，无第三方依赖
|
||
💡 可扩展性强，支持二次开发
|
||
💡 开发效率高，5分钟即可部署
|
||
|
||
---
|
||
|
||
**开发完成！祝使用愉快！** 🎉
|