wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2e84282424ce640485f32667b4074bf7c5fa8192
urbanLifeline/docs/项目总结-Jitsi-Meet视频会议功能.md
wangys 0658b82f39 jisti-meet服务开启
2025-12-26 18:55:54 +08:00

12 KiB
Raw Blame History

🎉 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一致

⚠️ 生产环境必须修改密钥：

  1. 生成强随机字符串（至少32位）
  2. 同时修改Docker和Java配置
  3. 重启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

🎯 下一步建议

短期优化

  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分钟即可部署

开发完成！祝使用愉快！ 🎉