mars/Twilioapp

Fork 0

mars 48d22a1e94 通话逻辑调整

2025-06-29 01:33:41 +08:00

4.8 KiB

Raw Permalink Blame History

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

🚀 快速开始

1. 环境准备

后端服务器

# 进入服务器目录
cd server

# 安装依赖
npm install

# 启动服务器
npm start

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

前端应用

# 在项目根目录
npm install

# 启动开发服务器
npm run dev

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

2. Twilio 配置

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

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

或者设置环境变量：

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 健康检查

curl http://localhost:3001/health

预期响应：

{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "service": "Twilio Token Server"
}

1.2 获取访问令牌

curl -X POST http://localhost:3001/api/twilio/token \
  -H "Content-Type: application/json" \
  -d '{
    "identity": "test-user",
    "roomName": "test-room"
  }'

预期响应：

{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0...",
  "identity": "test-user",
  "roomName": "test-room"
}

步骤 2: 前端功能测试

2.1 访问视频通话页面

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

2.2 设备测试面板

访问 /device-test 页面进行设备测试：

摄像头测试
- 点击"测试摄像头"按钮
- 确认能看到视频预览
- 检查视频质量
麦克风测试
- 点击"测试麦克风"按钮
- 说话并观察音频指示器
- 确认音频输入正常
扬声器测试
- 点击"测试扬声器"按钮
- 确认能听到测试音频

2.3 视频通话测试

创建房间
- 输入房间名称
- 输入用户身份
- 点击"加入房间"
多用户测试
- 在另一个浏览器标签页或设备上
- 使用不同的用户身份加入同一房间
- 测试双向视频通话

📱 设备兼容性测试

桌面浏览器

✅ Chrome (推荐)
✅ Firefox
✅ Safari
⚠️ Edge (部分功能)

移动设备

✅ iOS Safari
✅ Android Chrome
⚠️ 其他移动浏览器

测试检查清单

基础功能

摄像头权限请求
麦克风权限请求
视频预览显示
音频输入检测
房间创建和加入

视频通话功能

本地视频显示
远程视频接收
音频双向通信
视频质量自适应
网络断线重连

用户界面

控制按钮响应
设备切换功能
全屏模式
静音/取消静音
视频开启/关闭

🐛 常见问题排查

问题 1: 无法获取访问令牌

症状: API 返回 500 错误 解决方案:

检查 Twilio 凭证是否正确
确认网络连接正常
查看服务器日志

问题 2: 摄像头/麦克风权限被拒绝

症状: 浏览器显示权限被阻止 解决方案:

在浏览器设置中允许摄像头和麦克风权限
使用 HTTPS 连接（生产环境）
刷新页面重新请求权限

问题 3: 视频通话连接失败

症状: 无法看到远程视频 解决方案:

检查防火墙设置
确认 STUN/TURN 服务器配置
测试网络连接质量

问题 4: 音频质量差或有回音

症状: 音频断断续续或有回音 解决方案:

使用耳机减少回音
调整麦克风音量
检查网络带宽

📊 性能监控

关键指标

连接建立时间: < 3 秒
视频延迟: < 200ms
音频延迟: < 150ms
丢包率: < 1%

监控工具

浏览器开发者工具
Twilio Insights Dashboard
网络质量检测

🔧 高级配置

视频质量设置

const videoConfig = {
  width: { ideal: 1280 },
  height: { ideal: 720 },
  frameRate: { ideal: 30 }
};

音频设置

const audioConfig = {
  echoCancellation: true,
  noiseSuppression: true,
  autoGainControl: true
};

📞 技术支持

如果遇到问题，请：

查看浏览器控制台错误信息
检查服务器日志
参考 Twilio 官方文档
联系技术支持团队

🚀 生产环境部署

安全考虑

使用 HTTPS
实施用户认证
设置访问令牌过期时间
配置 CORS 策略

性能优化

使用 CDN 加速
启用 gzip 压缩
配置负载均衡
监控服务器性能

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

4.8 KiB Raw Permalink Blame History