# webrtc_app_h5

**Repository Path**: NativeBase/webrtc_app_h5

## Basic Information

- **Project Name**: webrtc_app_h5
- **Description**: 这是一个基于WebRTC的音视频通话应用，支持Web和移动端之间的相互通话。该项目包含三个部分：服务端、Web客户端和移动端应用。

- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-04-20
- **Last Updated**: 2025-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebRTC通话应用

这是一个基于WebRTC的音视频通话应用，支持Web和移动端之间的相互通话。该项目包含三个部分：服务端、Web客户端和移动端应用。

## 功能特点

- 支持一对一和一对多语音、视频通话
- Web端和移动端可以相互通话
- 支持创建和加入房间
- 支持用户在线状态显示
- 支持静音、关闭视频等通话控制
- 支持扬声器切换
- 自动挂断超时未接听的呼叫（1.5分钟）
- 通话质量监控和记录

## 项目结构

- `server/`: Node.js实现的信令服务器和业务逻辑
- `client/`: Web前端H5页面应用
- `VoiceApp/`: React Native实现的移动端应用

### 移动端应用结构

移动端采用模块化设计，将不同功能划分到不同目录中，使代码结构清晰、易于维护。

```
VoiceApp/
├── src/
│   ├── components/             # 组件目录
│   │   ├── index.ts            # 组件导出索引
│   │   ├── call/               # 通话相关组件
│   │   │   ├── CallView.tsx    # 通话界面组件
│   │   │   └── IncomingCallView.tsx  # 来电界面组件
│   │   └── room/               # 房间相关组件
│   │       ├── LoginForm.tsx   # 登录表单组件
│   │       └── RoomView.tsx    # 房间视图组件
│   ├── hooks/                  # 自定义钩子
│   │   ├── useCall.ts          # 通话功能钩子
│   │   ├── useCallTimer.ts     # 通话计时钩子
│   │   └── useMediaControls.ts # 媒体控制钩子
│   ├── services/               # 服务层
│   │   ├── socket.ts           # Socket服务
│   │   └── webrtc.ts           # WebRTC服务
│   ├── styles/                 # 样式定义
│   │   └── styles.ts           # 全局样式
│   ├── types/                  # 类型定义
│   │   └── index.ts            # 类型导出索引
│   ├── utils/                  # 工具函数
│   │   ├── config.ts           # 配置信息
│   │   ├── helpers.ts          # 辅助函数
│   │   └── permissions.ts      # 权限处理
│   └── App.tsx                 # 应用主组件
```

### 移动端模块职责

#### 1. 组件 (components)

- **call/** - 通话相关组件
  - **CallView.tsx** - 通话中界面，展示视频和通话控制按钮
  - **IncomingCallView.tsx** - 来电界面，展示接听和拒绝按钮

- **room/** - 房间相关组件
  - **LoginForm.tsx** - 登录表单组件，用户输入房间号和用户名
  - **RoomView.tsx** - 房间视图组件，展示房间内其他用户和通话功能按钮

#### 2. 钩子 (hooks)

- **useCall.ts** - 包含通话逻辑的自定义钩子，处理发起、接听、拒绝和结束通话等功能
- **useCallTimer.ts** - 通话计时器钩子，处理通话时长计时功能
- **useMediaControls.ts** - 媒体控制钩子，处理麦克风静音、视频开关和扬声器切换等功能

#### 3. 服务 (services)

- **socket.ts** - 封装Socket.IO通信服务，处理信令交换
- **webrtc.ts** - 封装WebRTC核心功能，处理媒体连接和传输

#### 4. 类型 (types)

- **index.ts** - 定义应用中使用的类型，包括User、CallType、各种数据结构等

#### 5. 工具 (utils)

- **config.ts** - 应用配置，包括服务器地址和WebRTC配置
- **helpers.ts** - 辅助函数，如格式化时间等
- **permissions.ts** - 权限处理功能，处理摄像头和麦克风权限请求

#### 6. 样式 (styles)

- **styles.ts** - 全局样式定义，包含应用中所有组件的样式

### 移动端数据流向

1. **用户界面层** (App.tsx) - 协调不同组件的显示和状态
2. **业务逻辑层** (hooks) - 封装业务逻辑和状态管理
3. **服务层** (services) - 提供WebRTC和Socket通信服务
4. **工具层** (utils) - 提供辅助功能和配置

### 移动端主要功能流程

1. **用户登录**
   - 用户输入房间号和用户名
   - 通过Socket连接到服务器
   - 加入指定房间

2. **房间内通信**
   - 显示房间内其他用户
   - 可以选择发起语音或视频通话

3. **通话流程**
   - 发起方创建WebRTC连接，发送提议
   - 接收方收到提议，显示来电界面
   - 接收方接听后，建立P2P连接
   - 双方可以进行语音/视频通话
   - 任一方可以结束通话

4. **媒体控制**
   - 可以切换麦克风静音状态
   - 可以开启/关闭视频
   - 可以切换扬声器/听筒模式

### 移动端设计优势

1. **高度模块化** - 各个功能模块独立，降低了代码耦合度
2. **可重用性** - 组件和钩子可以在其他页面或应用中重用
3. **可测试性** - 逻辑与UI分离，便于单元测试
4. **可维护性** - 清晰的代码结构使维护和扩展变得简单
5. **关注点分离** - 每个模块专注于特定功能，符合单一职责原则

## 技术栈

### 服务端
- Node.js + Express
- Socket.IO（WebSocket）
- MySQL数据库

### Web客户端
- HTML5/CSS3/JavaScript
- WebRTC API
- Socket.IO客户端

### 移动端
- React Native 0.72.5
- react-native-webrtc
- Socket.IO客户端

## 数据库设计

系统使用MySQL数据库存储通话记录和质量数据，主要表结构如下：

### 通话记录表 (call_logs)

| 字段名    | 类型        | 描述                            |
| --------- | ----------- | ------------------------------- |
| id        | INT         | 主键，自增                      |
| call_id   | VARCHAR(50) | 通话唯一标识符                  |
| user_id   | INT         | 用户ID                          |
| timestamp | TIMESTAMP   | 通话时间                        |
| room_id   | VARCHAR(50) | 房间ID                          |
| call_type | VARCHAR(10) | 通话类型(audio/video)           |
| duration  | INT         | 通话时长(秒)                    |
| status    | VARCHAR(20) | 状态(missed/rejected/completed) |

### 通话质量记录表 (call_quality)

| 字段名      | 类型        | 描述                    |
| ----------- | ----------- | ----------------------- |
| id          | INT         | 主键，自增              |
| call_id     | VARCHAR(50) | 通话ID，关联call_logs表 |
| user_id     | INT         | 用户ID                  |
| timestamp   | TIMESTAMP   | 记录时间                |
| bandwidth   | FLOAT       | 带宽使用(kbps)          |
| latency     | FLOAT       | 延迟(ms)                |
| packet_loss | FLOAT       | 丢包率(%)               |
| jitter      | FLOAT       | 抖动(ms)                |
| audio_level | FLOAT       | 音频电平                |
| frame_rate  | INT         | 视频帧率                |
| resolution  | VARCHAR(20) | 视频分辨率              |

### 房间日志表 (room_logs)

| 字段名      | 类型        | 描述                                 |
| ----------- | ----------- | ------------------------------------ |
| id          | INT         | 主键，自增                           |
| room_id     | VARCHAR(50) | 房间ID                               |
| user_id     | INT         | 用户ID                               |
| action      | VARCHAR(20) | 动作(join/leave/create/close)        |
| timestamp   | TIMESTAMP   | 操作时间                             |
| client_info | TEXT        | 客户端信息(浏览器/设备类型/操作系统) |

## 安装和运行

### 服务端

```bash
# 进入服务端目录
cd server

# 安装依赖
npm install

# 运行服务
npm run dev
```

### Web客户端

```bash
# 进入客户端目录
cd client

# 安装依赖
npm install

# 运行开发服务器
npm start
```

### 移动端应用

```bash
# 进入移动端应用目录
cd VoiceApp

# 安装依赖
npm install

# 安装iOS依赖（仅macOS）
cd ios && pod install && cd ..

# 运行iOS应用（仅macOS）
npm run ios

# 运行Android应用
npm run android
```

## 部署说明

### 服务端部署

服务端推荐使用PM2进行部署和管理：

```bash
# 安装PM2
npm install -g pm2

# 进入服务端目录
cd server

# 安装生产环境依赖
npm install --production

# 使用PM2启动服务
pm2 start app.js --name "webrtc-server"

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

### Web前端部署

Web前端需要构建后部署到Web服务器：

```bash
# 进入客户端目录
cd client

# 构建生产环境版本
npm run build
```

构建完成后，将生成的`build`目录中的静态文件部署到服务器：

1. **使用Nginx部署（推荐）**：

   创建Nginx配置文件：

   ```nginx
   server {
       listen 80;
       server_name your-domain.com;
       root /path/to/web/root;  # 静态文件存放路径
       index index.html;

       location / {
           try_files $uri $uri/ /index.html;  # 支持SPA路由
       }

       # WebSocket代理配置
       location /socket.io/ {
           proxy_pass http://localhost:5000;  # 信令服务器地址
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_set_header Host $host;
       }
   }
   ```

2. **使用Apache部署**：

   创建`.htaccess`文件处理SPA路由：

   ```apache
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
   ```

   配置WebSocket代理：

   ```apache
   ProxyPass /socket.io/ ws://localhost:5000/socket.io/
   ProxyPassReverse /socket.io/ ws://localhost:5000/socket.io/
   ```

3. **HTTPS配置（重要）**：

   为确保WebRTC在所有浏览器中正常工作，强烈建议配置HTTPS。可使用Let's Encrypt免费证书：

   ```bash
   # 安装certbot
   sudo apt install certbot python3-certbot-nginx

   # 获取并配置证书
   sudo certbot --nginx -d your-domain.com
   ```

### 移动端应用部署

移动端应用需要在各自的应用商店发布：

1. **Android应用**:
   ```bash
   cd VoiceApp
   cd android
   ./gradlew assembleRelease
   ```
   生成的APK文件位于`android/app/build/outputs/apk/release/`目录。

2. **iOS应用**:
   在Xcode中配置发布证书后，使用Archive功能打包并上传至App Store。

## 移动端权限配置

### Android 权限

在 `android/app/src/main/AndroidManifest.xml` 文件中添加以下权限：

```xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
```

### iOS 权限

在 `ios/VoiceApp/Info.plist` 文件中添加以下描述：

```xml
<key>NSCameraUsageDescription</key>
<string>需要使用摄像头进行视频通话</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要使用麦克风进行语音通话</string>
```

## 服务器配置

请确保将移动应用中的服务器地址配置正确。默认地址在 `VoiceApp/App.tsx` 文件中：

```javascript
// 服务器地址 - 请替换为您的实际服务器IP地址
const SERVER_URL = 'http://192.168.1.188:5000';
```

**注意:** 不能使用 `localhost` 或 `127.0.0.1`，因为这些地址在移动设备上指向设备自身，而不是您的开发服务器。

## 使用流程

1. 启动服务端
2. 启动Web客户端和/或移动端应用
3. 输入房间号和用户名加入房间
4. 选择在线用户发起语音或视频通话
5. 接听方可以接听或拒绝通话
6. 通话过程中可以控制麦克风、摄像头、扬声器等
7. 任一方可以结束通话

## 注意事项

- 确保在使用前安装了所有必要的依赖
- 在生产环境中，应配置HTTPS和TURN服务器，以便在复杂网络环境下使用
- 移动端应用需要麦克风和摄像头权限才能正常使用
- 确保移动设备和Web设备处于同一网络下，或能够相互访问
- 如果在真机上测试，请确保服务器IP地址是可从移动设备访问的

## 开发者

- 更多信息请参考源代码中的注释和文档