# Twilio 视频通话服务完整测试指南

## 🚀 快速开始

### 1. 环境准备

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

# 安装依赖
npm install

# 启动服务器
npm start
```

服务器将在 `http://localhost:3001` 启动

#### 前端应用
```bash
# 在项目根目录
npm install

# 启动开发服务器
npm run dev
```

前端应用将在 `http://localhost:5173` 启动

### 2. Twilio 配置

在 `server/index.js` 中更新您的 Twilio 凭证：

```javascript
const TWILIO_CONFIG = {
  accountSid: 'YOUR_TWILIO_ACCOUNT_SID',
  apiKey: 'YOUR_TWILIO_API_KEY',
  apiSecret: 'YOUR_TWILIO_API_SECRET',
};
```

或者设置环境变量：
```bash
export TWILIO_ACCOUNT_SID=your_account_sid
export TWILIO_API_KEY=your_api_key
export TWILIO_API_SECRET=your_api_secret
```

## 🧪 测试步骤

### 步骤 1: 后端 API 测试

#### 1.1 健康检查
```bash
curl http://localhost:3001/health
```

预期响应：
```json
{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "service": "Twilio Token Server"
}
```

#### 1.2 获取访问令牌
```bash
curl -X POST http://localhost:3001/api/twilio/token \
  -H "Content-Type: application/json" \
  -d '{
    "identity": "test-user",
    "roomName": "test-room"
  }'
```

预期响应：
```json
{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0...",
  "identity": "test-user",
  "roomName": "test-room"
}
```

### 步骤 2: 前端功能测试

#### 2.1 访问视频通话页面
1. 打开浏览器访问 `http://localhost:5173`
2. 导航到视频通话相关页面
3. 查看设备检测是否正常工作

#### 2.2 设备测试面板
访问 `/device-test` 页面进行设备测试：

1. **摄像头测试**
   - 点击"测试摄像头"按钮
   - 确认能看到视频预览
   - 检查视频质量

2. **麦克风测试**
   - 点击"测试麦克风"按钮
   - 说话并观察音频指示器
   - 确认音频输入正常

3. **扬声器测试**
   - 点击"测试扬声器"按钮
   - 确认能听到测试音频

#### 2.3 视频通话测试

1. **创建房间**
   - 输入房间名称
   - 输入用户身份
   - 点击"加入房间"

2. **多用户测试**
   - 在另一个浏览器标签页或设备上
   - 使用不同的用户身份加入同一房间
   - 测试双向视频通话

## 📱 设备兼容性测试

### 桌面浏览器
- ✅ Chrome (推荐)
- ✅ Firefox
- ✅ Safari
- ⚠️ Edge (部分功能)

### 移动设备
- ✅ iOS Safari
- ✅ Android Chrome
- ⚠️ 其他移动浏览器

### 测试检查清单

#### 基础功能
- [ ] 摄像头权限请求
- [ ] 麦克风权限请求
- [ ] 视频预览显示
- [ ] 音频输入检测
- [ ] 房间创建和加入

#### 视频通话功能
- [ ] 本地视频显示
- [ ] 远程视频接收
- [ ] 音频双向通信
- [ ] 视频质量自适应
- [ ] 网络断线重连

#### 用户界面
- [ ] 控制按钮响应
- [ ] 设备切换功能
- [ ] 全屏模式
- [ ] 静音/取消静音
- [ ] 视频开启/关闭

## 🐛 常见问题排查

### 问题 1: 无法获取访问令牌
**症状**: API 返回 500 错误
**解决方案**: 
1. 检查 Twilio 凭证是否正确
2. 确认网络连接正常
3. 查看服务器日志

### 问题 2: 摄像头/麦克风权限被拒绝
**症状**: 浏览器显示权限被阻止
**解决方案**:
1. 在浏览器设置中允许摄像头和麦克风权限
2. 使用 HTTPS 连接（生产环境）
3. 刷新页面重新请求权限

### 问题 3: 视频通话连接失败
**症状**: 无法看到远程视频
**解决方案**:
1. 检查防火墙设置
2. 确认 STUN/TURN 服务器配置
3. 测试网络连接质量

### 问题 4: 音频质量差或有回音
**症状**: 音频断断续续或有回音
**解决方案**:
1. 使用耳机减少回音
2. 调整麦克风音量
3. 检查网络带宽

## 📊 性能监控

### 关键指标
- **连接建立时间**: < 3 秒
- **视频延迟**: < 200ms
- **音频延迟**: < 150ms
- **丢包率**: < 1%

### 监控工具
1. 浏览器开发者工具
2. Twilio Insights Dashboard
3. 网络质量检测

## 🔧 高级配置

### 视频质量设置
```javascript
const videoConfig = {
  width: { ideal: 1280 },
  height: { ideal: 720 },
  frameRate: { ideal: 30 }
};
```

### 音频设置
```javascript
const audioConfig = {
  echoCancellation: true,
  noiseSuppression: true,
  autoGainControl: true
};
```

## 📞 技术支持

如果遇到问题，请：
1. 查看浏览器控制台错误信息
2. 检查服务器日志
3. 参考 Twilio 官方文档
4. 联系技术支持团队

## 🚀 生产环境部署

### 安全考虑
1. 使用 HTTPS
2. 实施用户认证
3. 设置访问令牌过期时间
4. 配置 CORS 策略

### 性能优化
1. 使用 CDN 加速
2. 启用 gzip 压缩
3. 配置负载均衡
4. 监控服务器性能

---

**注意**: 这是一个测试环境配置，生产环境需要额外的安全和性能优化措施。