10 KiB
10 KiB
🧪 如何测试音视频通话功能
问题说明
当前错误的原因:患者端没有登录 TRTC
错误: patient_1 用户不存在
原因: 只有医生端登录了,患者端没有登录
这就像打电话:
- ✅ 你的手机开机了(医生端已初始化)
- ❌ 对方手机没开机(患者端未初始化)
- ❌ 所以无法接通
快速测试方案
方案 1: 使用测试页面(推荐)⭐
步骤 1: 准备两个浏览器窗口
- 窗口 1: Chrome 正常模式(医生端)
- 窗口 2: Chrome 无痕模式(患者端)
步骤 2: 初始化患者端
在窗口 2中:
-
访问测试页面(需要先添加路由):
http://localhost:5173/#/test/patient-call -
输入患者ID:
1 -
点击"初始化患者端"
-
等待提示"患者端初始化成功,等待来电..."
步骤 3: 发起通话
在窗口 1中:
-
登录后台管理系统
-
进入"中医诊单"页面
-
找到患者ID为1的诊单
-
点击"视频通话"按钮
-
点击"开始通话"
-
等待初始化完成(约3秒)
步骤 4: 接听通话
在窗口 2中:
-
应该会收到来电提示
-
点击"接听"按钮
-
开始视频通话
步骤 5: 验证功能
- ✅ 双方都能看到视频画面
- ✅ 双方都能听到声音
- ✅ 可以正常挂断
- ✅ 通话记录已保存
方案 2: 使用腾讯云官方 Demo
如果不想创建测试页面,可以使用腾讯云官方 Demo:
步骤 1: 打开 Demo
访问:https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/official-demo/index.html
步骤 2: 配置信息
-
输入你的 SDKAppID(从
.env文件获取) -
输入你的 SecretKey(从
.env文件获取) -
输入 UserID:
patient_1 -
点击"生成 UserSig"
-
点击"进入房间"
步骤 3: 发起通话
在你的系统中:
-
登录后台
-
进入诊断列表
-
点击"视频通话"
-
发起通话
步骤 4: 接听
在 Demo 页面中应该会收到来电提示。
方案 3: 自呼叫测试(仅测试初始化)
如果只想测试初始化是否成功,可以呼叫自己:
修改前端代码:
// 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: 创建路由文件
如果还没有测试路由,创建:
// 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: 导入路由
// 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)
- 两个窗口是否使用了不同的浏览器/无痕模式?
- 网络是否正常?
调试方法:
// 在患者端控制台执行
console.log('当前用户ID:', window.TUICallKitServer?.userID)
// 应该显示: patient_1
Q2: 提示用户不存在
原因: 患者端没有初始化
解决方案:
- 先初始化患者端
- 再发起通话
Q3: 两个窗口都是同一个用户
原因: 使用了相同的浏览器和 localStorage
解决方案:
- 使用无痕模式
- 或使用不同的浏览器
Q4: 初始化失败
检查:
- 后端配置是否正确?
- SDKAppID 和 SecretKey 是否正确?
- 网络是否正常?
- 浏览器是否支持 WebRTC?
生产环境部署
在生产环境中,需要开发完整的患者端应用:
1. 患者端 H5/小程序
- 集成 TUICallKit
- 实现登录功能
- 监听来电
- 推送通知
2. 在线状态管理
- 检查患者是否在线
- 如果不在线,提示医生
- 发送推送通知
3. 通话记录
- 保存通话记录
- 统计通话时长
- 生成通话报表
相关文档
快速命令
# 启动开发服务器
cd admin
npm run dev
# 访问测试页面
# http://localhost:5173/#/test/patient-call
# 查看后端日志
tail -f server/runtime/log/error.log
祝测试顺利! 🎉