128 lines
2.6 KiB
Markdown
128 lines
2.6 KiB
Markdown
# 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凭证
|
||
- 实施适当的用户认证机制
|
||
|
||
## 扩展功能
|
||
- 屏幕共享
|
||
- 录制功能
|
||
- 聊天消息
|
||
- 用户权限管理
|
||
- 通话质量监控 |