335 lines
10 KiB
Markdown
335 lines
10 KiB
Markdown
# 🧪 如何测试音视频通话功能
|
||
|
||
## 问题说明
|
||
|
||
当前错误的原因：**患者端没有登录 TRTC**
|
||
|
||
```
|
||
错误: patient_1 用户不存在
|
||
原因: 只有医生端登录了，患者端没有登录
|
||
```
|
||
|
||
这就像打电话：
|
||
- ✅ 你的手机开机了（医生端已初始化）
|
||
- ❌ 对方手机没开机（患者端未初始化）
|
||
- ❌ 所以无法接通
|
||
|
||
## 快速测试方案
|
||
|
||
### 方案 1: 使用测试页面（推荐）⭐
|
||
|
||
#### 步骤 1: 准备两个浏览器窗口
|
||
|
||
- **窗口 1**: Chrome 正常模式（医生端）
|
||
- **窗口 2**: Chrome 无痕模式（患者端）
|
||
|
||
#### 步骤 2: 初始化患者端
|
||
|
||
在**窗口 2**中：
|
||
|
||
1. 访问测试页面（需要先添加路由）：
|
||
```
|
||
http://localhost:5173/#/test/patient-call
|
||
```
|
||
|
||
2. 输入患者ID：`1`
|
||
|
||
3. 点击"初始化患者端"
|
||
|
||
4. 等待提示"患者端初始化成功，等待来电..."
|
||
|
||
#### 步骤 3: 发起通话
|
||
|
||
在**窗口 1**中：
|
||
|
||
1. 登录后台管理系统
|
||
|
||
2. 进入"中医诊单"页面
|
||
|
||
3. 找到患者ID为1的诊单
|
||
|
||
4. 点击"视频通话"按钮
|
||
|
||
5. 点击"开始通话"
|
||
|
||
6. 等待初始化完成（约3秒）
|
||
|
||
#### 步骤 4: 接听通话
|
||
|
||
在**窗口 2**中：
|
||
|
||
1. 应该会收到来电提示
|
||
|
||
2. 点击"接听"按钮
|
||
|
||
3. 开始视频通话
|
||
|
||
#### 步骤 5: 验证功能
|
||
|
||
- ✅ 双方都能看到视频画面
|
||
- ✅ 双方都能听到声音
|
||
- ✅ 可以正常挂断
|
||
- ✅ 通话记录已保存
|
||
|
||
---
|
||
|
||
### 方案 2: 使用腾讯云官方 Demo
|
||
|
||
如果不想创建测试页面，可以使用腾讯云官方 Demo：
|
||
|
||
#### 步骤 1: 打开 Demo
|
||
|
||
访问：https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/official-demo/index.html
|
||
|
||
#### 步骤 2: 配置信息
|
||
|
||
1. 输入你的 **SDKAppID**（从 `.env` 文件获取）
|
||
|
||
2. 输入你的 **SecretKey**（从 `.env` 文件获取）
|
||
|
||
3. 输入 **UserID**: `patient_1`
|
||
|
||
4. 点击"生成 UserSig"
|
||
|
||
5. 点击"进入房间"
|
||
|
||
#### 步骤 3: 发起通话
|
||
|
||
在你的系统中：
|
||
|
||
1. 登录后台
|
||
|
||
2. 进入诊断列表
|
||
|
||
3. 点击"视频通话"
|
||
|
||
4. 发起通话
|
||
|
||
#### 步骤 4: 接听
|
||
|
||
在 Demo 页面中应该会收到来电提示。
|
||
|
||
---
|
||
|
||
### 方案 3: 自呼叫测试（仅测试初始化）
|
||
|
||
如果只想测试初始化是否成功，可以呼叫自己：
|
||
|
||
修改前端代码：
|
||
|
||
```typescript
|
||
// admin/src/components/video-call/index.vue
|
||
// 在 startCall 方法中
|
||
|
||
// 修改前
|
||
await TUICallKitServer.call({
|
||
userID: callInfo.value.userId, // patient_1
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
// 修改后（呼叫自己）
|
||
await TUICallKitServer.call({
|
||
userID: res.userId, // doctor_1（自己）
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
```
|
||
|
||
这样可以验证：
|
||
- ✅ 初始化是否成功
|
||
- ✅ 签名是否正确
|
||
- ✅ 配置是否正确
|
||
|
||
但无法测试真实的双向通话。
|
||
|
||
---
|
||
|
||
## 添加测试页面路由
|
||
|
||
### 步骤 1: 创建路由文件
|
||
|
||
如果还没有测试路由，创建：
|
||
|
||
```typescript
|
||
// admin/src/router/modules/test.ts
|
||
export default {
|
||
path: '/test',
|
||
name: 'Test',
|
||
meta: { title: '测试' },
|
||
children: [
|
||
{
|
||
path: 'patient-call',
|
||
name: 'PatientCallTest',
|
||
component: () => import('@/views/test/patient-call.vue'),
|
||
meta: { title: '患者端测试' }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 步骤 2: 导入路由
|
||
|
||
```typescript
|
||
// admin/src/router/index.ts
|
||
import testRoutes from './modules/test'
|
||
|
||
const routes = [
|
||
// ... 其他路由
|
||
testRoutes
|
||
]
|
||
```
|
||
|
||
### 步骤 3: 访问测试页面
|
||
|
||
```
|
||
http://localhost:5173/#/test/patient-call
|
||
```
|
||
|
||
---
|
||
|
||
## 完整测试流程图
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 测试准备 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 1. 打开两个浏览器窗口 │
|
||
│ - 窗口1: Chrome（医生端） │
|
||
│ - 窗口2: Chrome 无痕模式（患者端） │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 窗口2: 初始化患者端 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 1. 访问 /test/patient-call │
|
||
│ 2. 输入患者ID: 1 │
|
||
│ 3. 点击"初始化患者端" │
|
||
│ 4. 等待提示"初始化成功" │
|
||
│ 5. 状态: 在线，等待来电 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 窗口1: 发起通话 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 1. 登录后台管理系统 │
|
||
│ 2. 进入"中医诊单"页面 │
|
||
│ 3. 找到患者ID=1的诊单 │
|
||
│ 4. 点击"视频通话" │
|
||
│ 5. 点击"开始通话" │
|
||
│ 6. 等待初始化（约3秒） │
|
||
│ 7. 通话发起成功 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 窗口2: 接听通话 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 1. 收到来电提示 │
|
||
│ 2. 点击"接听" │
|
||
│ 3. 开始视频通话 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 验证功能 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ ✅ 视频画面正常 │
|
||
│ ✅ 音频正常 │
|
||
│ ✅ 可以挂断 │
|
||
│ ✅ 通话记录保存 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 患者端没有收到来电
|
||
|
||
**检查清单**:
|
||
- [ ] 患者端是否已初始化？
|
||
- [ ] 患者ID是否匹配？（patient_1）
|
||
- [ ] 两个窗口是否使用了不同的浏览器/无痕模式？
|
||
- [ ] 网络是否正常？
|
||
|
||
**调试方法**:
|
||
```javascript
|
||
// 在患者端控制台执行
|
||
console.log('当前用户ID:', window.TUICallKitServer?.userID)
|
||
// 应该显示: patient_1
|
||
```
|
||
|
||
### Q2: 提示用户不存在
|
||
|
||
**原因**: 患者端没有初始化
|
||
|
||
**解决方案**:
|
||
1. 先初始化患者端
|
||
2. 再发起通话
|
||
|
||
### Q3: 两个窗口都是同一个用户
|
||
|
||
**原因**: 使用了相同的浏览器和 localStorage
|
||
|
||
**解决方案**:
|
||
- 使用无痕模式
|
||
- 或使用不同的浏览器
|
||
|
||
### Q4: 初始化失败
|
||
|
||
**检查**:
|
||
- [ ] 后端配置是否正确？
|
||
- [ ] SDKAppID 和 SecretKey 是否正确？
|
||
- [ ] 网络是否正常？
|
||
- [ ] 浏览器是否支持 WebRTC？
|
||
|
||
---
|
||
|
||
## 生产环境部署
|
||
|
||
在生产环境中，需要开发完整的患者端应用：
|
||
|
||
### 1. 患者端 H5/小程序
|
||
|
||
- 集成 TUICallKit
|
||
- 实现登录功能
|
||
- 监听来电
|
||
- 推送通知
|
||
|
||
### 2. 在线状态管理
|
||
|
||
- 检查患者是否在线
|
||
- 如果不在线，提示医生
|
||
- 发送推送通知
|
||
|
||
### 3. 通话记录
|
||
|
||
- 保存通话记录
|
||
- 统计通话时长
|
||
- 生成通话报表
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [测试指南](./admin/TESTING_GUIDE.md) - 详细的测试说明
|
||
- [关键修复](./admin/CRITICAL_FIX.md) - 初始化问题修复
|
||
- [故障排查](./admin/TROUBLESHOOTING.md) - 常见问题解决
|
||
|
||
---
|
||
|
||
## 快速命令
|
||
|
||
```bash
|
||
# 启动开发服务器
|
||
cd admin
|
||
npm run dev
|
||
|
||
# 访问测试页面
|
||
# http://localhost:5173/#/test/patient-call
|
||
|
||
# 查看后端日志
|
||
tail -f server/runtime/log/error.log
|
||
```
|
||
|
||
---
|
||
|
||
**祝测试顺利！** 🎉
|