# Twilio 视频通话服务配置指南

## 概述
本项目集成了Twilio视频通话服务，支持移动端和Web端的实时视频通话功能。

## 前置条件
1. 注册Twilio账户：https://www.twilio.com/
2. 获取必要的API凭证

## 配置步骤

### 1. 获取Twilio凭证
登录Twilio控制台，获取以下信息：
- Account SID
- API Key
- API Secret

### 2. 更新配置文件
编辑 `src/config/twilio.ts` 文件，替换以下配置：

```typescript
export const twilioConfig: TwilioConfig = {
  apiKey: 'YOUR_API_KEY',           // 替换为您的API Key
  apiSecret: 'YOUR_API_SECRET',     // 替换为您的API Secret
  accountSid: 'YOUR_ACCOUNT_SID',   // 替换为您的Account SID
  videoServiceSid: '',              // 可选
  conversationServiceSid: '',       // 可选
};
```

### 3. 启动服务
```bash
# 启动移动端（端口3000）
npm run dev

# 启动后端管理系统（端口3001）
cd Twilioapp-admin && npm start
```

## 功能特性

### 移动端功能
- 视频通话页面：`/mobile/video-call`
- 支持房间名称和用户身份输入
- 音频/视频开关控制
- 实时参与者显示

### 后端管理功能
- Token服务器：生成访问令牌
- 通话记录管理
- 用户管理

## 使用方法

### 1. 访问视频通话
- 移动端：http://localhost:3000/mobile/video-call
- 输入房间名称和用户身份
- 点击"加入通话"

### 2. 多人通话
- 多个用户使用相同房间名称即可加入同一通话
- 支持音频/视频开关控制
- 实时显示参与者状态

## 技术架构

### 前端技术栈
- React 18
- TypeScript
- Ant Design
- Twilio Video SDK
- React Router

### 后端技术栈
- Express.js
- JWT Token生成
- Twilio REST API

## API接口

### Token生成接口
```
POST /api/twilio/token
Content-Type: application/json

{
  "identity": "用户身份",
  "roomName": "房间名称"
}

Response:
{
  "token": "访问令牌",
  "identity": "用户身份",
  "roomName": "房间名称"
}
```

## 故障排除

### 常见问题
1. **无法连接到房间**
   - 检查API凭证是否正确
   - 确认Token服务器正常运行

2. **音视频无法正常工作**
   - 检查浏览器权限设置
   - 确认摄像头和麦克风可用

3. **Token验证失败**
   - 检查API Key和Secret是否匹配
   - 确认Account SID正确

### 调试模式
开启浏览器开发者工具查看控制台日志，所有Twilio相关错误都会在控制台显示。

## 安全注意事项
- 不要在客户端代码中暴露API Secret
- 生产环境请使用HTTPS
- 定期更新API凭证
- 实施适当的用户认证机制

## 扩展功能
- 屏幕共享
- 录制功能
- 聊天消息
- 用户权限管理
- 通话质量监控