# WebRTC

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

## Basic Information

- **Project Name**: WebRTC
- **Description**: 这是一个基于WebRTC技术的实时视频会议系统，支持多人视频通话功能。
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-04-20
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5RTC 视频通话系统

这是一个基于WebRTC技术的实时视频通话系统，支持多人视频通话功能。

## 功能特性

- 创建和加入视频通话房间
- 实时音视频通话
- 多人视频通话支持
- 自动重连机制
- 通话时长计时
- 支持离开房间和结束通话
- 视频质量优化（720p支持）
- 音频优化（回声消除、噪声抑制）
- 操作日志记录与显示
- 断开连接状态显示

## 技术栈

- WebRTC
- WebSocket
- JavaScript (ES6+)
- HTML5/CSS3
- Node.js
- Express

## 安装步骤

1. 克隆项目

```bash
git clone [项目地址]
cd h5rtc
```

2. 安装依赖

```bash
npm install
```

3. 启动服务器

```bash
npm start
```

4. 访问应用
打开浏览器访问 `http://localhost:3000`

## 部署指南

### 本地部署

#### HTTP 部署
1. 确保已安装Node.js环境（建议v14.0.0或更高版本）
2. 安装依赖：`npm install`
3. 启动服务器：`npm start`
4. 访问 `http://localhost:3000`

#### HTTPS 部署（本地开发环境）
1. 生成自签名SSL证书
```bash
mkdir -p server/ssl
cd server/ssl
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes
```

2. 配置环境变量（可选）
```bash
# 设置自定义端口
export HTTP_PORT=3000
export HTTPS_PORT=3001
```

3. 启动服务器
```bash
npm start
```

4. 访问 `https://localhost:3001`
   - 注意：自签名证书会在浏览器中显示警告，需要手动接受

### 远程服务器部署

#### 前置要求
- 一台具有公网IP的服务器（推荐使用云服务如阿里云、腾讯云等）
- 已安装Node.js运行环境
- 域名（可选，但推荐用于HTTPS配置）
- 开放相应端口（默认3000和3001）

#### 基本部署步骤
1. 将代码上传到服务器
```bash
# 使用Git
git clone [项目地址]

# 或使用scp等工具上传
scp -r ./h5rtc user@your-server-ip:/path/to/deploy
```

2. 安装依赖并启动服务
```bash
cd /path/to/deploy/h5rtc
npm install
npm start
```

3. 配置防火墙开放端口
```bash
# Ubuntu/Debian
sudo ufw allow 3000
sudo ufw allow 3001

# CentOS
sudo firewall-cmd --permanent --add-port=3000/tcp
sudo firewall-cmd --permanent --add-port=3001/tcp
sudo firewall-cmd --reload
```

#### HTTPS配置（生产环境）

1. 使用Let's Encrypt免费SSL证书
```bash
# 安装certbot
sudo apt-get update
sudo apt-get install certbot

# 获取证书（假设域名为example.com）
sudo certbot certonly --standalone -d example.com

# 复制证书到项目目录
mkdir -p server/ssl
sudo cp /etc/letsencrypt/live/example.com/privkey.pem server/ssl/key.pem
sudo cp /etc/letsencrypt/live/example.com/fullchain.pem server/ssl/cert.pem
sudo chmod 644 server/ssl/*.pem
```

2. 修改应用配置（如需要）
```javascript
// 在server/app.js中可以根据需要调整以下参数：
const options = {
  key: fs.readFileSync(path.join(__dirname, 'ssl/key.pem')),
  cert: fs.readFileSync(path.join(__dirname, 'ssl/cert.pem')),
  // 其他HTTPS配置
};
```

3. 使用PM2持久化运行
```bash
# 安装PM2
npm install -g pm2

# 启动应用
pm2 start server/app.js --name "h5rtc"

# 设置开机自启
pm2 startup
pm2 save
```

4. 配置Nginx作为反向代理（可选但推荐）
```nginx
server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    
    # SSL配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';
    
    # WebSocket支持
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

### 注意事项

1. **WebRTC和HTTPS**：在生产环境中，WebRTC要求使用HTTPS协议。自签名证书仅适用于开发环境。

2. **NAT穿透**：如果服务器或客户端在NAT后面，可能需要配置额外的TURN服务器：
```javascript
// 在client/js/webrtc.js中配置TURN服务器
this.configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { 
            urls: 'turn:your-turn-server.com:3478',
            username: 'username',
            credential: 'password'
        }
    ]
};
```

3. **证书续期**：Let's Encrypt证书有效期为90天，设置自动续期：
```bash
# 创建定时任务
sudo crontab -e

# 添加以下行（每月尝试续期）
0 0 1 * * certbot renew --quiet && systemctl reload nginx
```

4. **性能优化**：对于高流量场景，考虑使用负载均衡和多实例部署。

## 使用说明

### 创建房间

1. 打开应用首页
2. 点击"创建房间"按钮
3. 允许浏览器访问摄像头和麦克风
4. 系统会自动生成房间ID并开始通话

### 加入房间

1. 打开应用首页
2. 在输入框中输入房间ID
3. 点击"加入房间"按钮
4. 允许浏览器访问摄像头和麦克风
5. 自动连接到通话

### 通话控制

- 结束通话：点击"结束通话"按钮
- 静音/取消静音：点击"静音"按钮
- 关闭/开启摄像头：点击"关闭摄像头"按钮
- 查看操作日志：通话过程中的操作记录会显示在"操作日志"区域
- 清除日志：点击"清除日志"按钮
- 显示/隐藏日志：切换"显示日志"开关

### 注意事项

- 确保浏览器允许访问摄像头和麦克风
- 建议使用最新版本的Chrome或Firefox浏览器
- 确保网络连接稳定
- 如果视频没有显示，请检查浏览器的媒体权限设置
- 当对方结束通话后，将显示"对方已结束通话"提示
- 当用户离开房间后，将显示"用户已离开房间"提示

## 技术实现细节

### 架构设计

系统采用前后端分离的架构：
- 前端：基于原生JavaScript实现的WebRTC客户端
- 后端：基于Node.js的信令服务器

### 核心模块

#### WebRTCManager 类

负责管理WebRTC连接和媒体流处理：

```javascript
class WebRTCManager {
    constructor() {
        // 核心状态管理
        this.localStream = null;             // 本地媒体流
        this.remoteStreams = new Map();      // 远程媒体流集合
        this.peerConnections = new Map();    // WebRTC对等连接集合
        this.roomId = null;                  // 当前房间ID
        this.selfId = null;                  // 自身用户ID
        this.isHost = false;                 // 是否为房主
        // ...
    }
    // 各种方法实现...
}
```

#### 视频通话流程

1. 用户创建或加入房间
2. 建立WebSocket连接
3. 通过信令服务器交换SDP和ICE候选者
4. 建立P2P连接
5. 交换音视频流
6. 显示远程视频
7. 通话结束后清理资源

#### 连接管理

- 自动检测连接状态
- 断线自动重连（最多尝试5次）
- ICE连接失败自动重启
- 支持动态加入/离开房间
- 连接状态变化事件通知

#### 媒体流处理

- 支持1280x720分辨率
- 音频优化：
  - 回声消除
  - 噪声抑制
- 视频控制：
  - 静音/取消静音
  - 开启/关闭摄像头
  - 断开连接状态显示

#### 事件系统

采用基于CustomEvent的事件系统，支持的事件包括：
- connectionStateChange：连接状态变化
- error：错误发生
- joined：加入房间
- userJoined：新用户加入
- userLeft：用户离开
- callStarted：通话开始
- callEnded：通话结束
- peerConnected：点对点连接建立

#### 日志系统

- 操作日志记录
- 不同类型日志（信息、成功、警告、错误）
- 日志显示/隐藏控制
- 日志清除功能

### 文件结构

- `client/`
  - `js/`
    - `webrtc.js` - WebRTC核心管理类
    - `main.js` - 主应用逻辑和UI交互
    - `controls.js` - 控制按钮事件处理
  - `css/`
    - `style.css` - 应用样式
  - `index.html` - 主页面
- `server/`
  - `app.js` - 服务器入口
  - `signaling.js` - 信令服务器实现

## 故障排除

### 常见问题

1. 视频无法显示
   - 检查摄像头权限
   - 确认设备正常工作
   - 检查浏览器控制台错误信息

2. 音频问题
   - 检查麦克风权限
   - 确认音频设备正常工作
   - 检查系统音量设置

3. 连接问题
   - 确保网络连接稳定
   - 检查防火墙设置
   - 确认STUN服务器可访问

### 调试信息

系统会在浏览器控制台输出详细的调试信息，包括：
- 连接状态变化
- ICE候选者处理
- 媒体流状态
- 错误信息

同时，UI界面上的操作日志区域会显示关键操作和状态变化。

## 未来计划

- 添加屏幕共享功能
- 支持聊天功能
- 实现录制功能
- 提供更多视频滤镜和效果
- 添加房间密码保护
- 优化移动设备兼容性

## 贡献指南

欢迎提交问题报告和功能请求。如需贡献代码，请遵循以下步骤：

1. Fork项目
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建Pull Request

## 许可证

本项目采用MIT许可证 - 详见LICENSE文件