zyt/UIKIT_UPGRADE_COMPLETE.md

TUICallKit 升级完成

✅ 已完成的更新

1. Web 端（admin）

更新的文件

1. admin/package.json

   • ✅ 更新包名：@trtc/calls-uikit-vue": "^4.2.2

2. admin/src/components/video-call/index.vue

   • ✅ 更新导入语句：TUICallKitServer → TUICallKitAPI
   • ✅ 更新所有API调用

3. admin/src/views/test/patient-call.vue

   • ✅ 更新导入语句：TUICallKitServer → TUICallKitAPI
   • ✅ 更新所有API调用

重要变更

• 包名变更：@tencentcloud/call-uikit-vue → @trtc/calls-uikit-vue
• API名称变更：TUICallKitServer → TUICallKitAPI
• 发起通话方法变更：call() → calls()，参数从 userID 改为 userIDList（数组）
• 版本升级：4.0.12 → 4.2.2

2. 小程序端（wx）

当前状态

• ✅ 使用本地 TUICallKit 源码
• ✅ 版本：4.2.7
• ✅ 无需更新

📦 包版本对比

Web 端

项目	旧版本	新版本
包名	@tencentcloud/call-uikit-vue	@trtc/calls-uikit-vue
版本	4.0.12	4.2.2

小程序端

项目	版本
本地源码	4.2.7

🔄 API 兼容性

API 变更说明

1. API 名称变更

• TUICallKitServer → TUICallKitAPI

2. 发起通话方法变更

• 方法名：call() → calls()
• 参数变化：

  // 旧版本
  TUICallKitServer.call({
    userID: 'user123',
    type: TUICallType.VIDEO_CALL
  })
  
  // 新版本
  TUICallKitAPI.calls({
    userIDList: ['user123'],  // 改为数组
    type: TUICallType.VIDEO_CALL
  })
  

完全兼容的 API

// 初始化
TUICallKitAPI.init({
  userID: string,
  userSig: string,
  SDKAppID: number
})

// 发起通话（注意：方法名和参数都有变化）
TUICallKitAPI.calls({
  userIDList: string[],  // 改为数组
  type: TUICallType.VIDEO_CALL | TUICallType.AUDIO_CALL
})

// 挂断
TUICallKitAPI.hangup()

// 设置回调
TUICallKitAPI.setCallback({
  statusChanged: (params) => void,
  afterCalling: () => void
})

// 浮窗设置
TUICallKitAPI.enableFloatWindow(boolean)

状态常量

STATUS.IDLE                    // 空闲
STATUS.DIALING_C2C            // 一对一呼叫中
STATUS.DIALING_GROUP          // 群组呼叫中
STATUS.CALLING_C2C_VIDEO      // 一对一视频通话中
STATUS.CALLING_C2C_AUDIO      // 一对一音频通话中
STATUS.CALLING_GROUP_VIDEO    // 群组视频通话中
STATUS.CALLING_GROUP_AUDIO    // 群组音频通话中

🧪 测试计划

Web 端测试

测试 1：基本功能

• 安装依赖成功
• 编译成功
• 启动成功
• 登录成功

测试 2：通话功能

• 可以发起通话
• 可以接听通话
• 可以挂断通话
• 视频显示正常
• 音频传输正常

测试 3：状态管理

• 状态回调正常
• 界面状态同步
• 错误处理正常

测试 4：跨平台互通

• Web → 小程序通话正常
• 小程序 → Web 通话正常
• userId 格式匹配
• 双向通话稳定

小程序端测试

测试 1：基本功能

• 编译成功
• 登录成功
• 状态监听正常

测试 2：通话功能

• 可以接收来电
• 可以发起通话
• 可以挂断通话
• 视频显示正常
• 音频传输正常

📋 部署步骤

Web 端部署

# 1. 进入 admin 目录
cd admin

# 2. 清除旧依赖
rm -rf node_modules package-lock.json

# 3. 安装新依赖
npm install

# 4. 构建生产版本
npm run build

# 5. 部署到服务器
# 将 dist 目录上传到服务器

小程序端部署

# 1. 进入小程序目录
cd wx/TUICallKit

# 2. 清除缓存
# 微信开发者工具 → 工具 → 清除缓存

# 3. 重新编译
# 点击"编译"按钮

# 4. 上传代码
# 微信开发者工具 → 上传

⚠️ 注意事项

1. 依赖安装

• 必须删除 node_modules 和 package-lock.json
• 重新运行 npm install
• 确保安装的是新版本

2. 缓存清理

• 清除浏览器缓存
• 清除 Vite 缓存（node_modules/.vite）
• 清除微信开发者工具缓存

3. userId 格式

• 确保 Web 端和小程序端使用相同的 userId 格式
• 格式：prefix_number（如：doctor_1, patient_2）
• 类型：必须是字符串

4. HTTPS 要求

• Web 端必须使用 HTTPS（或 localhost）
• 小程序端自动使用 HTTPS

5. 权限设置

• 浏览器：允许摄像头和麦克风
• 小程序：允许摄像头和麦克风

🔧 故障排除

问题 1：安装失败

症状：

npm ERR! code ERESOLVE

解决：

npm install --legacy-peer-deps

问题 2：编译错误

症状：

Cannot find module '@trtc/calls-uikit-vue'

解决：

# 1. 删除依赖
rm -rf node_modules package-lock.json

# 2. 清除缓存
npm cache clean --force

# 3. 重新安装
npm install

问题 3：运行时错误

症状：

TUICallKitAPI is undefined

解决：

1. 检查导入语句是否正确
2. 检查包是否正确安装
3. 重启开发服务器

问题 4：通话失败

症状：

Error code: 60011 (对方不在线)

解决：

1. 检查 userId 格式是否一致
2. 检查 SDKAppID 是否一致
3. 检查对方是否已登录

📊 版本兼容性

浏览器兼容性

• ✅ Chrome 56+
• ✅ Edge 79+
• ✅ Safari 11+
• ✅ Firefox 52+

小程序兼容性

• ✅ 微信小程序基础库 2.10.0+
• ✅ uni-app Vue 2
• ✅ uni-app Vue 3

互通兼容性

• ✅ Web 4.2.x ↔ 小程序 4.2.x
• ✅ Web 4.2.x ↔ Web 4.2.x
• ✅ 小程序 4.2.x ↔ 小程序 4.2.x

📞 技术支持

官方文档

• Web 端：https://cloud.tencent.com/document/product/647/78742
• 小程序端：https://cloud.tencent.com/document/product/647/78731

常见问题

• FAQ：https://cloud.tencent.com/document/product/647/78769
• API 文档：https://web.sdk.qcloud.com/component/trtccalling/doc/web/zh-cn/

联系方式

• 腾讯云工单系统
• 技术支持论坛

✅ 验收标准

Web 端

• 编译无错误
• 启动无错误
• 可以正常登录
• 可以发起通话
• 可以接听通话
• 视频音频正常
• 状态管理正常

小程序端

• 编译无错误
• 可以正常登录
• 可以接收来电
• 可以发起通话
• 视频音频正常
• 状态监听正常

互通测试

• Web → 小程序正常
• 小程序 → Web 正常
• 双向通话稳定
• 无掉线问题

🎉 升级完成

所有代码已更新完成，可以开始测试了！

---

升级日期： 2024-03-04 升级版本： 4.0.12 → 4.2.2 状态： ✅ 完成