新增功能
This commit is contained in:
Your Name
@@ -0,0 +1,390 @@
|
||||
# 小程序端无法接听来电 - 问题诊断与修复
|
||||
|
||||
## 问题现象
|
||||
Web 端发起视频通话后，小程序端没有任何反应，无法接听来电。
|
||||
|
||||
## 根本原因分析
|
||||
|
||||
### 1. TUICallKit 组件未正确挂载
|
||||
**问题：** 小程序端的 TUICallKit 组件在登录前就已经挂载，但可能没有正确初始化监听。
|
||||
|
||||
**修复：**
|
||||
- 改为登录后才挂载 TUICallKit 组件
|
||||
- 确保组件在登录状态下一直保持挂载
|
||||
|
||||
### 2. 事件监听未正确设置
|
||||
**问题：** 初始化后没有设置来电事件监听，导致收到来电时没有响应。
|
||||
|
||||
**修复：**
|
||||
- 在初始化成功后立即设置事件监听
|
||||
- 添加详细的日志输出
|
||||
|
||||
### 3. IM 账号可能未导入
|
||||
**问题：** 患者账号可能没有成功导入到腾讯云 IM 系统。
|
||||
|
||||
**修复：**
|
||||
- 后端在生成签名时自动导入账号
|
||||
- 添加日志记录导入结果
|
||||
|
||||
## 已实施的修复
|
||||
|
||||
### 修复 1：条件渲染 TUICallKit 组件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<!-- 只在登录后才挂载 TUICallKit -->
|
||||
<TUICallKit v-if="isLogin"></TUICallKit>
|
||||
<view class="loginBox">
|
||||
<!-- 登录界面 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 修复 2：完善事件监听
|
||||
|
||||
```javascript
|
||||
// 初始化成功后设置事件监听
|
||||
await TUICallKitAPI.init({
|
||||
sdkAppID: Number(sdkAppId),
|
||||
userID: userId,
|
||||
userSig: userSig,
|
||||
});
|
||||
|
||||
// 等待初始化完成
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 设置所有必要的事件监听
|
||||
TUICallKitAPI.on('onCallReceived', (data) => {
|
||||
console.log('=== 收到来电 ===', data);
|
||||
uni.showToast({
|
||||
title: '收到来电',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
TUICallKitAPI.on('onCallCancelled', (data) => {
|
||||
console.log('=== 来电已取消 ===', data);
|
||||
});
|
||||
|
||||
TUICallKitAPI.on('onCallEnd', (data) => {
|
||||
console.log('=== 通话已结束 ===', data);
|
||||
});
|
||||
|
||||
TUICallKitAPI.on('onUserVideoAvailable', (data) => {
|
||||
console.log('=== 用户视频状态变化 ===', data);
|
||||
});
|
||||
|
||||
TUICallKitAPI.on('onUserAudioAvailable', (data) => {
|
||||
console.log('=== 用户音频状态变化 ===', data);
|
||||
});
|
||||
|
||||
console.log('=== 事件监听已设置 ===');
|
||||
```
|
||||
|
||||
### 修复 3：增强日志输出
|
||||
|
||||
在关键步骤添加详细日志：
|
||||
- 登录信息
|
||||
- 初始化状态
|
||||
- 事件监听设置
|
||||
- 来电接收
|
||||
|
||||
## 测试步骤
|
||||
|
||||
### 步骤 1：清除缓存重新测试
|
||||
|
||||
1. 微信开发者工具：点击"清缓存" → "全部清除"
|
||||
2. 真机测试：删除小程序后重新打开
|
||||
|
||||
### 步骤 2：小程序端登录
|
||||
|
||||
1. 输入患者ID：`2`
|
||||
2. 点击"登录"
|
||||
3. 查看控制台输出：
|
||||
|
||||
```
|
||||
获取签名成功: { userId: "patient_2", sdkAppId: "1400xxxxxx", ... }
|
||||
=== 小程序端登录信息 ===
|
||||
sdkAppId: 1400xxxxxx
|
||||
userId: patient_2
|
||||
userSig 长度: xxx
|
||||
TUICallKit 初始化成功, userId: patient_2
|
||||
=== 事件监听已设置 ===
|
||||
```
|
||||
|
||||
4. 确认界面显示：
|
||||
- "当前登录: patient_2"
|
||||
- 输入框提示变为"输入医生ID或完整userId"
|
||||
|
||||
### 步骤 3：Web 端发起呼叫
|
||||
|
||||
1. Web 端打开患者详情页
|
||||
2. 点击"视频通话"按钮
|
||||
3. 查看浏览器控制台：
|
||||
|
||||
```
|
||||
=== 发起一对一通话 ===
|
||||
后端返回的 patientUserId: patient_2
|
||||
最终使用的 targetUserId: patient_2
|
||||
通话已发起，目标用户: patient_2
|
||||
```
|
||||
|
||||
### 步骤 4：小程序端应该收到来电
|
||||
|
||||
小程序端控制台应该输出：
|
||||
|
||||
```
|
||||
=== 收到来电 ===
|
||||
{
|
||||
inviter: "doctor_1",
|
||||
inviteeList: ["patient_2"],
|
||||
callType: 2,
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
同时：
|
||||
- 弹出 Toast 提示"收到来电"
|
||||
- TUICallKit 界面自动显示
|
||||
- 显示"接听"和"拒绝"按钮
|
||||
|
||||
## 如果仍然无法接听
|
||||
|
||||
### 检查点 1：确认 IM 账号已导入
|
||||
|
||||
查看后端日志（`runtime/log/`）：
|
||||
|
||||
```
|
||||
小程序获取患者签名成功 - patient_id: 2, user_id: patient_2
|
||||
确保患者IM账号存在 - patient_id: 2, user_id: patient_2, nick: 张三
|
||||
```
|
||||
|
||||
如果看到"导入患者IM账号失败"，说明 IM 账号导入有问题。
|
||||
|
||||
### 检查点 2：确认 SDKAppID 一致
|
||||
|
||||
对比 Web 端和小程序端的 SDKAppID：
|
||||
|
||||
```javascript
|
||||
// Web 端
|
||||
console.log('Web 端 SDKAppID:', res.sdkAppId)
|
||||
|
||||
// 小程序端
|
||||
console.log('小程序端 SDKAppID:', sdkAppId)
|
||||
```
|
||||
|
||||
必须完全一致！
|
||||
|
||||
### 检查点 3：确认 userId 格式一致
|
||||
|
||||
对比呼叫目标和登录用户：
|
||||
|
||||
```javascript
|
||||
// Web 端呼叫
|
||||
console.log('最终使用的 targetUserId:', targetUserId) // 应该是 patient_2
|
||||
|
||||
// 小程序端登录
|
||||
console.log('userId:', userId) // 应该是 patient_2
|
||||
```
|
||||
|
||||
必须完全一致！
|
||||
|
||||
### 检查点 4：确认网络连接
|
||||
|
||||
小程序端应该能连接到腾讯云服务器：
|
||||
|
||||
```javascript
|
||||
// 检查 WebSocket 连接
|
||||
console.log('IM SDK 连接状态:', TUICallKitAPI.getConnectionStatus())
|
||||
```
|
||||
|
||||
如果返回 `DISCONNECTED`，说明网络连接有问题。
|
||||
|
||||
### 检查点 5：确认权限已授予
|
||||
|
||||
小程序需要以下权限：
|
||||
- 摄像头权限
|
||||
- 麦克风权限
|
||||
- 网络权限
|
||||
|
||||
在小程序设置中检查：
|
||||
设置 → 权限管理 → 允许摄像头和麦克风
|
||||
|
||||
## 常见错误及解决方案
|
||||
|
||||
### 错误 1：控制台没有"收到来电"日志
|
||||
|
||||
**原因：**
|
||||
- 事件监听未正确设置
|
||||
- TUICallKit 组件未挂载
|
||||
- IM 连接断开
|
||||
|
||||
**解决：**
|
||||
1. 确认登录后 `isLogin.value = true`
|
||||
2. 确认控制台有"事件监听已设置"日志
|
||||
3. 重新登录小程序
|
||||
|
||||
### 错误 2：提示"对方不在线"
|
||||
|
||||
**原因：**
|
||||
- userId 格式不匹配
|
||||
- 小程序端未登录
|
||||
- IM 账号未导入
|
||||
|
||||
**解决：**
|
||||
1. 检查 userId 格式是否一致
|
||||
2. 确认小程序端已登录
|
||||
3. 查看后端日志确认账号已导入
|
||||
|
||||
### 错误 3：小程序闪退或卡死
|
||||
|
||||
**原因：**
|
||||
- 内存不足
|
||||
- 组件初始化失败
|
||||
- 权限未授予
|
||||
|
||||
**解决：**
|
||||
1. 重启微信
|
||||
2. 清除小程序缓存
|
||||
3. 授予所有必要权限
|
||||
|
||||
## 调试技巧
|
||||
|
||||
### 技巧 1：使用真机调试
|
||||
|
||||
开发者工具可能与真机表现不同，建议：
|
||||
1. 使用真机调试功能
|
||||
2. 查看真机控制台日志
|
||||
3. 测试实际通话效果
|
||||
|
||||
### 技巧 2：双向测试
|
||||
|
||||
不仅测试 Web → 小程序，也测试小程序 → Web：
|
||||
|
||||
**小程序呼叫 Web：**
|
||||
1. 小程序端登录为 `patient_2`
|
||||
2. 输入 `1` 或 `doctor_1`
|
||||
3. 点击"呼叫"
|
||||
4. Web 端应该收到来电
|
||||
|
||||
### 技巧 3：查看腾讯云控制台
|
||||
|
||||
登录腾讯云控制台：
|
||||
1. 进入"即时通信 IM"
|
||||
2. 查看"用户管理"
|
||||
3. 确认 `patient_2` 和 `doctor_1` 都已导入
|
||||
4. 查看"实时监控"了解通话状态
|
||||
|
||||
### 技巧 4：抓包分析
|
||||
|
||||
使用微信开发者工具的网络面板：
|
||||
1. 切换到 Network 标签
|
||||
2. 筛选 WebSocket 连接
|
||||
3. 查看信令消息
|
||||
4. 确认收到 INVITE 消息
|
||||
|
||||
## 成功标志
|
||||
|
||||
当一切正常时，你应该看到：
|
||||
|
||||
### 小程序端控制台
|
||||
```
|
||||
获取签名成功: { userId: "patient_2", ... }
|
||||
=== 小程序端登录信息 ===
|
||||
sdkAppId: 1400xxxxxx
|
||||
userId: patient_2
|
||||
TUICallKit 初始化成功, userId: patient_2
|
||||
=== 事件监听已设置 ===
|
||||
登录成功
|
||||
|
||||
[Web 端发起呼叫后]
|
||||
=== 收到来电 ===
|
||||
{
|
||||
inviter: "doctor_1",
|
||||
inviteeList: ["patient_2"],
|
||||
callType: 2
|
||||
}
|
||||
```
|
||||
|
||||
### 小程序界面
|
||||
- 自动弹出通话界面
|
||||
- 显示来电者信息
|
||||
- 显示"接听"和"拒绝"按钮
|
||||
- 可以正常接听通话
|
||||
|
||||
## 后端日志检查
|
||||
|
||||
查看 `server/runtime/log/` 目录下的日志文件：
|
||||
|
||||
### 成功的日志示例
|
||||
```
|
||||
[info] 小程序获取患者签名成功 - patient_id: 2, user_id: patient_2
|
||||
[info] 确保患者IM账号存在 - patient_id: 2, user_id: patient_2, nick: 张三
|
||||
[info] 医生获取通话签名成功 - admin_id: 1, patient_id: 2
|
||||
```
|
||||
|
||||
### 失败的日志示例
|
||||
```
|
||||
[error] 获取患者签名失败 - patient_id: 2, error: xxx
|
||||
[warning] 导入患者IM账号失败 - patient_id: 2, error: xxx
|
||||
```
|
||||
|
||||
如果看到错误日志，需要检查：
|
||||
1. 腾讯云配置是否正确
|
||||
2. SDKAppID 和 SecretKey 是否有效
|
||||
3. 网络连接是否正常
|
||||
|
||||
## 终极解决方案
|
||||
|
||||
如果以上所有方法都无效，尝试以下步骤：
|
||||
|
||||
### 1. 完全重置
|
||||
|
||||
```bash
|
||||
# 小程序端
|
||||
1. 删除小程序
|
||||
2. 清除微信缓存
|
||||
3. 重启微信
|
||||
4. 重新打开小程序
|
||||
|
||||
# Web 端
|
||||
1. 清除浏览器缓存
|
||||
2. 退出登录
|
||||
3. 重新登录
|
||||
4. 刷新页面
|
||||
```
|
||||
|
||||
### 2. 检查腾讯云配置
|
||||
|
||||
```php
|
||||
// server/config/trtc.php
|
||||
return [
|
||||
'sdkAppId' => '1400xxxxxx', // 确保正确
|
||||
'secretKey' => 'xxxxxxxx', // 确保正确
|
||||
'expireTime' => 86400
|
||||
];
|
||||
```
|
||||
|
||||
### 3. 手动导入 IM 账号
|
||||
|
||||
使用腾讯云控制台手动导入：
|
||||
1. 登录腾讯云控制台
|
||||
2. 进入"即时通信 IM"
|
||||
3. 用户管理 → 导入用户
|
||||
4. 导入 `patient_2` 和 `doctor_1`
|
||||
|
||||
### 4. 联系技术支持
|
||||
|
||||
提供以下信息：
|
||||
1. 小程序端完整控制台日志
|
||||
2. Web 端完整控制台日志
|
||||
3. 后端日志文件
|
||||
4. 腾讯云 SDKAppID
|
||||
5. 测试环境信息
|
||||
|
||||
---
|
||||
|
||||
**最后更新：** 2024-03-04
|
||||
**版本：** 2.0
|
||||
Reference in New Issue
Block a user