Twilioapp/TWILIO_SETUP.md

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 文件，替换以下配置：

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. 启动服务

# 启动移动端（端口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凭证
• 实施适当的用户认证机制

扩展功能

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