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