12 KiB
12 KiB
🎉 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：使用启动脚本（推荐）
# 双击运行
F:\Project\urbanLifeline\启动Jitsi视频会议服务.bat
方法B：手动启动
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后端
# 确保配置正确
# application-dev.yml 中的 jitsi 配置已自动添加
# 启动后端服务
# 使用你的IDE或命令行启动 workcase-service
验证：访问 http://localhost:8180/swagger-ui.html 查看会议接口
步骤3：启动前端并测试
Vue前端测试
# 启动Vue前端
npm run dev
# 在聊天室页面点击"发起会议"按钮
# 应该能看到Jitsi Meet会议界面
UniApp测试
# 使用HBuilderX打开项目
# 运行到小程序/App
# 在聊天室点击"发起会议"
# 跳转到全屏会议页面
🔑 核心特性
1. 安全性
- ✅ JWT Token身份验证（每个用户独立Token）
- ✅ 聊天室成员权限校验
- ✅ Token有效期控制（2小时）
- ✅ 主持人权限区分（客服=主持人）
2. 用户体验
- ✅ 页面刷新后会议不丢失（活跃会议检测）
- ✅ 会议创建loading状态
- ✅ 按钮禁用状态（会议进行中不可重复创建）
- ✅ 会议头部控制栏（显示状态+关闭按钮）
- ✅ UniApp独立会议页面（可切换聊天/会议）
3. 扩展性
- ✅ 支持主持人权限
- ✅ 支持Jitsi配置项扩展
- ✅ 预留会议参与者记录功能
- ✅ Docker部署，易于扩展
⚙️ 重要配置说明
JWT密钥配置
Docker配置（docker-compose.yml）：
JWT_APP_ID: urbanLifeline
JWT_APP_SECRET: your-secret-key-change-in-production
Java后端配置（application-dev.yml）：
jitsi:
app:
id: urbanLifeline # 必须与Docker一致
secret: your-secret-key-change-in-production # 必须与Docker一致
⚠️ 生产环境必须修改密钥：
- 生成强随机字符串（至少32位）
- 同时修改Docker和Java配置
- 重启Jitsi服务和Java后端
🧪 测试步骤
1. 测试Jitsi服务
# 访问Jitsi主页
http://localhost:8280/
# 测试创建房间（应被拦截，需要JWT）
http://localhost:8280/test-room
2. 测试后端接口
# 使用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状态
# 检查Docker
docker info
# 检查端口
netstat -ano | findstr "8280"
netstat -ano | findstr "10000"
# 查看日志
docker-compose logs jitsi-web
Q2: JWT验证失败？
A: 确保密钥一致
# 检查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
# Windows防火墙
netsh advfirewall firewall add rule name="Jitsi JVB" dir=in action=allow protocol=UDP localport=10000
# 或临时关闭防火墙测试
Q4: 前端iframe显示空白？
A: 检查跨域和URL
# 浏览器控制台查看错误
# 确保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
🎯 下一步建议
短期优化
-
会议录制功能
- 配置Jibri录制组件
- 存储录制文件到MinIO
- 提供录制回放功能
-
会议统计
- 记录参与者加入/离开时间
- 生成会议时长报告
- 导出会议数据
-
界面优化
- 自定义Jitsi Meet界面主题
- 添加品牌Logo
- 优化移动端体验
长期规划
-
生产部署
- 配置域名和SSL证书
- 配置公网IP和防火墙
- 负载均衡和高可用
-
功能增强
- 屏幕共享优化
- 虚拟背景
- 会议白板功能
- AI转录字幕
-
监控告警
- Prometheus监控
- Grafana仪表板
- 告警通知
✨ 总结
已实现功能
✅ 完整的Jitsi Meet视频会议功能 ✅ JWT认证和权限控制 ✅ Docker一键部署 ✅ 前后端完整集成 ✅ Vue和UniApp双端支持 ✅ 详细的文档和脚本
技术亮点
🌟 每个用户独立JWT Token（安全性高） 🌟 活跃会议检测（用户体验好） 🌟 Docker部署（易于维护） 🌟 微服务架构（易于扩展）
项目价值
💡 真正的企业级视频会议解决方案 💡 完全自主可控，无第三方依赖 💡 可扩展性强，支持二次开发 💡 开发效率高，5分钟即可部署
开发完成！祝使用愉快！ 🎉