# WebRTC

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

## Basic Information

- **Project Name**: WebRTC
- **Description**: webrtc实现的双向视频传输demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-05-24
- **Last Updated**: 2026-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebRTC 点对点视频通话示例

这是一个简洁的 WebRTC 视频通话示例，展示了如何使用 WebRTC 技术实现浏览器之间的点对点视频通话。

## 功能特性

- 实时视频通话（支持音视频）
- 房间系统（创建/加入房间）
- 信令交互日志
- 自动 ICE 候选处理
- 优雅的 UI 设计

## 项目结构

```
webrtc/
├── client/
│   ├── index.html           # 主页面
│   ├── css/
│   │   └── style.css        # 样式文件
│   └── js/
│       ├── main.js          # 主入口
│       ├── webrtc-handler.js    # WebRTC 核心逻辑
│       └── signaling-client.js  # 信令客户端
├── server/
│   └── signaling-server.js  # 信令服务器
├── package.json
└── README.md
```

## 快速开始

### 1. 安装依赖

```bash
cd webrtc
npm install
```

### 2. 启动信令服务器

```bash
npm start
```

服务器将监听 `ws://localhost:8080`

### 3. 启动客户端

由于使用 ES6 模块，需要通过 HTTP 服务器访问 HTML 文件。

#### 方式一：使用 Python（如果已安装）

```bash
cd client
python3 -m http.server 3000
```

然后访问 `http://localhost:3000`

#### 方式二：使用 Node.js 的 http-server

```bash
npm install -g http-server
cd client
http-server -p 3000
```

然后访问 `http://localhost:3000`

### 4. 使用方法

1. 打开两个浏览器窗口（或两台不同的设备）
2. 在第一个窗口输入房间ID，点击"创建房间"
3. 在第二个窗口输入相同的房间ID，点击"加入房间"
4. 等待连接建立，即可开始视频通话

## 技术原理

### WebRTC 连接流程

```
1. 获取本地媒体流 (getUserMedia)
   ↓
2. 创建 RTCPeerConnection
   ↓
3. 添加本地媒体轨道 (addTrack)
   ↓
4. 创建 Offer (createOffer) ← 仅呼叫方
   ↓
5. 设置本地描述 (setLocalDescription)
   ↓
6. 通过信令服务器交换 SDP
   ↓
7. 交换 ICE 候选 (icecandidate)
   ↓
8. 建立 P2P 连接
```

### 信令服务器职责

WebRTC 需要交换元数据才能建立连接，但 WebRTC 标准并未定义传输方式。信令服务器负责：

- 房间管理（创建、加入、离开）
- 转发 SDP Offer/Answer
- 转发 ICE Candidate

本示例使用 WebSocket 作为信令传输协议。

### STUN 服务器

本示例使用 Google 的公共 STUN 服务器：

- `stun:stun.l.google.com:19302`
- `stun:stun1.l.google.com:19302`

对于生产环境，建议部署自己的 STUN/TURN 服务器。

## 浏览器兼容性

- Chrome 56+
- Firefox 44+
- Safari 11+
- Edge 79+

注意：WebRTC 需要 HTTPS 或 localhost 环境。

## 常见问题

### 1. 无法获取摄像头/麦克风

检查浏览器权限设置，确保允许访问媒体设备。

### 2. 连接建立失败

- 检查信令服务器是否正常运行
- 确保防火墙允许相应端口
- 尝试使用不同的网络环境

### 3. 视频/音频质量问题

- 检查网络带宽
- 尝试关闭其他占用带宽的应用
- 考虑部署 TURN 服务器用于中继

## 扩展建议

1. **添加数据通道**：实现文字聊天功能
2. **屏幕共享**：添加屏幕共享功能
3. **录制功能**：实现本地录像
4. **多用户房间**：扩展为多人会议
5. **TURN 服务器**：添加中继服务器提高连通性

## 许可证

MIT License