OmniMeetProTrack 全维会议链智能追录系统——山东大学软件学院创新实训项目博客（二）

撰稿人：wjz

智能视频会议系统的框架与实现

OmniMeetProTrack 是一款智能、多模态的视频会议系统，旨在提升团队协作与会议管理效率。通过集成 WebRTC 实现实时音视频通信，并结合 Vue.js 和 Spring Boot 的强大架构，该系统不仅提供流畅的视频会议功能，还支持智能会议助手、知识图谱生成等高级功能。后续深入探讨项目的框架设计以及核心视频会议功能的实现过程，并分享开发过程中遇到的挑战与解决方案。

项目框架

OmniMeetProTrack 采用前后端分离的现代化架构，注重模块化设计与可扩展性，利用业界标准技术栈实现快速开发与易维护性。

前端架构

• 框架：Vue.js
• 作用：提供响应式、组件化的开发方式，构建直观的用户界面。
• 实现细节：
  • 使用 Vue CLI 初始化项目，搭建模块化的目录结构，包含组件、路由和状态管理模块。
  • 设计了可复用的 UI 组件，例如导航栏、侧边栏和内容展示区，为后续功能开发奠定基础。
  • 配置了 WebSocket 代理，支持实时通信，确保会议页面加载前 WebSocket 连接成功建立。
  • 通过 beforeEnter 路由守卫，异步检查 WebSocket 连接状态，优化用户体验。

后端架构

• 框架：Spring Boot
• 作用：提供快速开发与微服务架构支持，简化后端逻辑实现。
• 实现细节：
  • 使用 Spring Initializr 生成项目骨架，集成了 Web、JPA 和 Security 等模块。
  • 配置 WebSocket 信令服务，支持多种消息类型（如连接成功、失败、OFFER、ANSWER、CANDIDATE 等），实现实时通信。
  • 设计统一的数据库模型，解决数据库表结构冲突问题，确保数据交互一致性。
    

技术要点

• WebRTC：实现浏览器间的点对点音视频传输，支持多人视频会议。
• WebSocket：用于信令传输，处理成员加入、离开、OFFER/ANSWER 交换等消息。
• 前后端分离：通过清晰的接口规范实现高效协作，前端与后端通过 RESTful API 和 WebSocket 交互。
• 多模态融合：为后续集成 ASR（自动语音识别）和 CLIP（视觉识别）奠定基础。
  

视频会议功能实现

视频会议功能是 OmniMeetProTrack 的核心模块，基于 WebRTC 和 WebSocket 技术实现。以下是主要功能的实现过程及优化措施。

1. WebRTC 视频通话

• 摄像头访问：
  • 使用 navigator.mediaDevices.getUserMedia({ video: true }) 异步请求视频流，处理权限授予和拒绝的异常情况。
  • 通过 enumerateDevices 获取设备列表，判断摄像头状态，动态更新 UI。
  • 实现 handleOpenVideo 函数，检查屏幕共享状态，避免重复开启视频流，并通过 changeVideoStream 函数将视频轨道添加到 baseStream 和 RTCPeerConnection 实例中。
• 多人会议：
  • 创建 RTCPeerConnection 实例管理每个参会者的连接，处理 OFFER、ANSWER 和 ICE CANDIDATE 消息。
  • 监听成员加入、离开事件，动态更新 memberList 和 UI 展示。
  • 优化 createRTCPeerConnection 函数，支持视频和音频轨道的高效管理。

2. WebSocket 信令服务

• 功能封装：
  • 每 10 秒发送一次 ping 消息，防止 WebSocket 连接自动断开。
  • 定义 useEvent 函数，处理成员连接、音视频流管理和数据通道创建。
• 消息处理：
  • 监听成员进入会议，更新成员列表并创建对应的 RTCPeerConnection 实例。
  • 处理 OFFER 和 ANSWER 消息，完成 WebRTC 连接协商。
  • 接收和处理 ICE CANDIDATE，确保点对点连接的稳定性。

3. 麦克风控制与音量动画

• 麦克风状态管理：
  • 使用 enumerateDevices 获取麦克风设备状态，处理用户拒绝授权等异常。
  • 实现打开/关闭麦克风功能，动态更新按钮状态。
• 音量动画：
  • 使用 AudioContext 创建分析器节点，通过 requestAnimationFrame 实时获取时域数据。
  • 计算音量平均值，动态调整 UI 元素的偏移值，呈现音频波动动画效果。
    

4. 前端页面设计

• 会议前页面：
  • 提供会议创建和加入入口，支持通过按钮入会，优化用户体验。
  • 添加权限验证，限制非授权用户加入会议。
• 会议中页面：
  • 右侧显示参会成员列表，下方提供麦克风、摄像头等功能开关。
  • 支持查看会议信息、增删改查会议记录等操作，界面美观且操作流畅。

5. 多设备入会问题解决

• 问题描述：初期测试发现同一设备可在多个浏览器加入会议，但不同设备无法同时入会。
• 原因分析：网络防火墙限制了 WebRTC 的 ICE 候选交换。
• 解决方案：
  • 调整网络配置，优化防火墙规则。
  • 增强 WebSocket 信令服务的鲁棒性，确保多设备间的消息同步。
  • 测试验证多设备入会功能，确保稳定性和兼容性。

开发过程中遇到的问题与解决方案

1. JDK 版本冲突

• 问题：会议管理系统与视频会议系统的 JDK 版本不统一，导致依赖冲突。
• 解决方案：
  • 查阅大量资料，决定降低会议管理系统的 JDK 版本。
  • 逐一检查并更新相关依赖，确保兼容性。
  • 统一项目构建工具（如 Maven）配置，避免后续冲突。

2. 接口兼容性问题

• 问题：两个系统的接口在参数格式、请求方法和返回数据结构上存在差异，导致数据交互失败。
• 解决方案：
  • 重新梳理接口文档，制定统一的 API 规范（如 RESTful 风格）。
  • 调整前端和后端的请求与响应格式，确保数据一致性。
  • 添加接口适配层，兼容旧接口，逐步迁移到新规范。

3. 数据库冲突

• 问题：两个系统的数据库表结构、字段命名和数据类型不一致，数据合并时出现冲突。
• 解决方案：
  • 分析两个系统的数据库 schema，设计统一的数据库模型。
  • 使用 JPA 映射新模型，迁移旧数据到新表结构。
  • 添加数据校验和转换逻辑，确保数据完整性。

4. 业务逻辑整合

• 问题：会议管理系统与视频会议系统的业务逻辑存在差异，合并后功能衔接不畅。
• 解决方案：
  • 根据业务需求，重新设计用户权限逻辑，区分会议发起人和普通参会者的操作权限。
  • 整合前后端代码，统一会议信息的管理入口（如增删改查）。
  • 优化前端交互逻辑，确保操作直观且美观。

总结

OmniMeetProTrack 的框架搭建与视频会议功能的实现，为后续智能化功能的开发打好基础。通过 WebRTC 和 WebSocket 技术，我们成功实现了多人视频会议、麦克风控制和音量动画等核心功能，同时解决了多设备入会等关键问题。开发过程中遇到的 JDK 冲突、接口兼容性和数据库整合等问题，也通过系统化的分析和优化得以解决。