# WebRtc

**Repository Path**: FullStackPeng/web-rtc

## Basic Information

- **Project Name**: WebRtc
- **Description**: 本项目是基于 WebRTC 技术构建的实时音视频通信系统，采用前后端分离架构，前端以 Vue 为核心框架，结合 WebSocket 实现信令交互；后端基于 Spring Boot 开发，通过 WebSocket 与前端协同完成连接建立、媒体协商等关键流程，为用户提供低延迟、高可靠的实时通信能力。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-12-07
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webrtc 视频会议

## 介绍
![输入图片说明](img/home.png)
![输入图片说明](img/image.png)
本项目是基于 WebRTC 技术构建的实时音视频通信系统，采用前后端分离架构，前端以 Vue 为核心框架，结合 WebSocket 实现信令交互；后端基于 Spring Boot 开发，通过 WebSocket 与前端协同完成连接建立、媒体协商等关键流程，为用户提供低延迟、高可靠的实时通信能力。

项目可广泛应用于在线教育、远程办公、视频会议、即时通讯等场景，支持一对一音视频通话、基础媒体流控制（静音、关闭摄像头）等核心功能，具备良好的扩展性与可维护性。

## 软件架构

### 整体架构

采用“前端应用 + 后端服务 + 实时信令”的三层架构，各层职责清晰，通过标准化接口实现协同工作：

1. **前端层**：基于 Vue 生态构建用户交互界面，负责音视频流的采集、渲染、编码及 WebRTC 核心 API 调用，通过 WebSocket 与后端进行信令传输（如设备状态、SDP 协议、ICE 候选地址等）。

2. **后端层**：以 Spring Boot 为核心，提供用户认证、房间管理、信令转发、日志记录等基础服务，通过 Spring WebSocket 模块维护与前端的长连接，保障信令实时性。

3. **传输层**：WebRTC 负责音视频流的 P2P 传输，通过 ICE 协议实现 NAT 穿透，若 P2P 连接失败则可通过媒体服务器（如 Coturn）中转，确保通信稳定性。

### 核心技术栈

| 层面     | 技术                           | 作用                                                 |
| -------- | ------------------------------ | ---------------------------------------------------- |
| 前端     | Vue 3 + Vite                   | 构建高效、可扩展的前端应用，提升开发效率与页面性能   |
|          | WebRTC API                     | 实现音视频流采集、编码、传输及渲染，核心通信能力支撑 |
|          | WebSocket (vue-websocket-next) | 与后端建立长连接，传输信令数据，保障实时交互         |
|          | Element Plus                   | 提供标准化 UI 组件，快速搭建美观、易用的交互界面     |
| 后端     | Spring Boot 3.x                | 快速开发后端服务，集成各类生态组件，简化配置与部署   |
|          | Spring WebSocket               | 维护与前端的长连接，实现信令转发与实时消息推送       |
|          | Spring Security (可选)         | 提供用户认证与授权，保障系统安全                     |
| 依赖服务 | Coturn 服务器                  | 实现 NAT 穿透，解决 P2P 连接障碍，保障通信稳定性     |

## 安装教程

### 环境依赖

- JDK 17+（适配 Spring Boot 3.x）

- Maven 3.6+（后端依赖管理）

- Node.js 16+ & npm 7+（前端环境）

- MySQL 8.0+（可选，用于用户数据存储）

- Coturn 服务器（推荐部署，保障 NAT 穿透）

### 后端安装（Spring Boot）

1. **克隆仓库**`git clone [仓库地址]
   cd [项目目录]/backend`

2. **配置环境**修改 `src/main/resources/application.yml`，配置数据库、WebSocket 端口等信息：`server:
   port: 8080  # 后端服务端口

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/webrtc_db?useSSL=false&serverTimezone=UTC
    username: root
    password: your_password

websocket:
  endpoint: /ws/signaling  # WebSocket 连接端点
  allowed-origins: "*"  # 开发环境允许跨域，生产环境需指定具体域名`

3. **编译与启动**`mvn clean package -DskipTests
   java -jar target/webrtc-backend-0.0.1-SNAPSHOT.jar`启动成功后，访问 `http://localhost:8080/actuator/health` 可查看服务健康状态。

### 前端安装（Vue）

1. **进入前端目录**`cd [项目目录]/frontend`

2. **安装依赖**`npm install`

3. **配置后端地址**修改 `src/utils/websocket.js` 中的 WebSocket 连接地址，与后端配置保持一致：`const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8080/ws/signaling';`或在 `.env.development` 中配置环境变量：`VITE_WS_URL=ws://localhost:8080/ws/signaling
   VITE_API_URL=http://localhost:8080/api`

4. **启动开发服务**`npm run dev`启动成功后，根据控制台提示访问前端页面（默认通常为 `http://localhost:5173`）。

5. **构建生产版本（可选）**`npm run build`构建产物位于 `dist` 目录，可部署至 Nginx 等静态资源服务器。

### Coturn 服务器配置（可选但推荐）

1. 参考 [Coturn 官方文档](https://github.com/coturn/coturn) 部署服务器；

2. 在后端 `application.yml` 中配置 Turn 服务地址，供前端 WebRTC 调用。

## 使用说明

### 基础流程

1. 启动后端服务与前端应用，访问前端页面并完成登录（若开启认证）；

2. 创建通信房间或加入已有房间（房间 ID 可通过链接分享）；

3. 允许浏览器访问摄像头与麦克风权限；

4. 等待其他用户加入房间，建立 P2P 连接后即可进行实时音视频通信；

5. 通过页面控件实现静音、关闭摄像头、挂断通话等操作。

### 核心功能说明

- **房间管理**：支持创建、加入、退出房间，后端维护房间成员状态；

- **媒体控制**：实时切换麦克风/摄像头状态，调整音量；

- **信令交互**：后端转发 SDP 协商信息与 ICE 候选地址，助力 P2P 连接建立；

- **状态提示**：显示连接状态、设备权限、网络质量等信息。

### 接口调用示例（前端）

```javascript
// 初始化 WebSocket 连接
import { initWebSocket } from '@/utils/websocket';
initWebSocket({
  onMessage: (data) => {
    // 处理后端推送的信令（如 SDP 信息、ICE 候选等）
    handleSignaling(data);
  }
});

// 发起 WebRTC 连接
import { createPeerConnection } from '@/utils/webrtc';
const pc = createPeerConnection();
// 采集本地流并渲染
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
localVideo.value.srcObject = localStream;
pc.addStream(localStream);
```

## 参与贡献

1. **Fork 本仓库**：点击仓库页面右上角 Fork 按钮，创建个人分支仓库；

2. **新建开发分支**：基于 `develop` 分支创建特性分支，命名规范为 `Feat_功能名称` 或 `Fix_问题描述`；
       `git checkout develop
   git checkout -b Feat_VideoFilter`

3. **提交代码**：遵循规范提交代码，提交信息格式为 `[类型] 描述`（如 `Feat: 新增视频滤镜功能`）；

4. **同步分支**：提交前同步上游仓库 `develop` 分支代码，解决冲突；

5. **新建 Pull Request**：将个人分支推送到远程仓库，发起 PR 至上游 `develop` 分支，等待审核。

### 开发规范

- 前端遵循 Vue 官方代码风格指南，使用 ESLint + Prettier 格式化代码；

- 后端遵循 Spring Boot 开发规范，分层清晰（Controller/Service/Repository）；

- 新增功能需配套单元测试，确保代码可靠性。

## 特技

1. 多语言支持：通过 `Readme_zh.md`（中文）、`Readme_en.md`（英文）维护多语言文档；

2. API 文档：后端集成 SpringDoc-OpenAPI（Swagger），访问 `http://localhost:8080/swagger-ui.html` 可查看接口文档；

3. 日志监控：集成 Logback 记录系统日志，可通过 ELK 等工具实现日志分析；

4. 容器化部署：项目提供 Dockerfile 与 docker-compose.yml，支持通过 Docker 快速部署前后端服务及依赖组件。

## 联系方式

若有问题或建议，可通过以下方式联系：

- 项目负责人：[申云鹏]

- 邮箱：[2287674693@qq.com]

- Issue 跟踪：直接在仓库提交 Issue 描述问题

## 许可证

[Apache License]