166 lines
4.2 KiB
Markdown
166 lines
4.2 KiB
Markdown
# TUICallKit API 名称变更修复
|
||
|
||
## 问题描述
|
||
|
||
升级到 `@trtc/calls-uikit-vue` 4.2.2 后，出现编译错误：
|
||
```
|
||
模块"@trtc/calls-uikit-vue"没有导出的成员"TUICallKitServer"
|
||
```
|
||
|
||
## 根本原因
|
||
|
||
新版本的包有两个重要变更：
|
||
1. API 名称从 `TUICallKitServer` 改为 `TUICallKitAPI`
|
||
2. 发起通话的方法从 `call()` 改为 `calls()`，参数也有变化
|
||
|
||
## 解决方案
|
||
|
||
### 1. 更新导入语句
|
||
|
||
**旧版本 (4.0.12):**
|
||
```typescript
|
||
import { TUICallKitServer, TUICallKit, TUICallType, STATUS } from '@tencentcloud/call-uikit-vue'
|
||
```
|
||
|
||
**新版本 (4.2.2):**
|
||
```typescript
|
||
import { TUICallKitAPI, TUICallKit, TUICallType, STATUS } from '@trtc/calls-uikit-vue'
|
||
```
|
||
|
||
### 2. 更新发起通话的方法
|
||
|
||
**旧版本 (4.0.12):**
|
||
```typescript
|
||
// 一对一通话
|
||
await TUICallKitServer.call({
|
||
userID: 'user123',
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
```
|
||
|
||
**新版本 (4.2.2):**
|
||
```typescript
|
||
// 一对一通话 - 使用 calls 方法，参数改为 userIDList 数组
|
||
await TUICallKitAPI.calls({
|
||
userIDList: ['user123'],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
// 多人通话 - 同样使用 calls 方法
|
||
await TUICallKitAPI.calls({
|
||
userIDList: ['user1', 'user2', 'user3'],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
```
|
||
|
||
### 3. 更新其他 API 调用
|
||
|
||
将所有 `TUICallKitServer` 替换为 `TUICallKitAPI`：
|
||
|
||
```typescript
|
||
// 初始化
|
||
TUICallKitAPI.init({ ... })
|
||
|
||
// 发起通话（注意：方法名改为 calls，参数改为 userIDList）
|
||
TUICallKitAPI.calls({
|
||
userIDList: ['user123'],
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
|
||
// 挂断
|
||
TUICallKitAPI.hangup()
|
||
|
||
// 接听
|
||
TUICallKitAPI.accept()
|
||
|
||
// 拒绝
|
||
TUICallKitAPI.reject()
|
||
|
||
// 设置回调
|
||
TUICallKitAPI.setCallback({ ... })
|
||
|
||
// 浮窗设置
|
||
TUICallKitAPI.enableFloatWindow(false)
|
||
```
|
||
|
||
## 已修复的文件
|
||
|
||
1. ✅ `admin/src/components/video-call/index.vue`
|
||
2. ✅ `admin/src/views/test/patient-call.vue`
|
||
3. ✅ `UIKIT_UPGRADE_COMPLETE.md`
|
||
|
||
## 下一步操作
|
||
|
||
### 1. 重新安装依赖
|
||
|
||
```bash
|
||
cd admin
|
||
|
||
# 删除旧依赖
|
||
rm -rf node_modules package-lock.json
|
||
|
||
# 安装新依赖
|
||
npm install
|
||
```
|
||
|
||
### 2. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 3. 验证修复
|
||
|
||
- ✅ 编译成功，没有错误
|
||
- ✅ 可以正常登录
|
||
- ✅ 可以发起通话
|
||
- ✅ 可以接听通话
|
||
|
||
## API 对比表
|
||
|
||
| 功能 | 旧版本 (4.0.12) | 新版本 (4.2.2) |
|
||
|------|----------------|----------------|
|
||
| 包名 | @tencentcloud/call-uikit-vue | @trtc/calls-uikit-vue |
|
||
| API名称 | TUICallKitServer | TUICallKitAPI |
|
||
| 初始化 | TUICallKitServer.init() | TUICallKitAPI.init() |
|
||
| 发起通话 | TUICallKitServer.call({userID, type}) | TUICallKitAPI.calls({userIDList, type}) |
|
||
| 挂断 | TUICallKitServer.hangup() | TUICallKitAPI.hangup() |
|
||
| 接听 | TUICallKitServer.accept() | TUICallKitAPI.accept() |
|
||
| 拒绝 | TUICallKitServer.reject() | TUICallKitAPI.reject() |
|
||
| 设置回调 | TUICallKitServer.setCallback() | TUICallKitAPI.setCallback() |
|
||
| 浮窗设置 | TUICallKitServer.enableFloatWindow() | TUICallKitAPI.enableFloatWindow() |
|
||
|
||
## 重要变更说明
|
||
|
||
### 1. API 名称变更
|
||
- `TUICallKitServer` → `TUICallKitAPI`
|
||
|
||
### 2. 发起通话方法变更
|
||
- 方法名：`call()` → `calls()`
|
||
- 参数变化：
|
||
- 旧版本：`{ userID: string, type: TUICallType }`
|
||
- 新版本：`{ userIDList: string[], type: TUICallType }`
|
||
- 说明：新版本统一使用数组参数，一对一通话时数组只包含一个元素
|
||
|
||
## 注意事项
|
||
|
||
1. **API 名称变更**：`TUICallKitServer` → `TUICallKitAPI`
|
||
2. **发起通话方法变更**：
|
||
- 方法名：`call()` → `calls()`
|
||
- 参数：`userID` → `userIDList`（数组）
|
||
3. **组件名称不变**：`TUICallKit` 组件名称保持不变
|
||
4. **类型定义不变**：`TUICallType`、`STATUS` 等类型定义保持不变
|
||
5. **回调机制不变**：`statusChanged`、`afterCalling` 等回调保持不变
|
||
6. **其他方法不变**：`init()`、`hangup()`、`accept()`、`reject()` 等方法参数保持不变
|
||
|
||
## 参考文档
|
||
|
||
- [官方文档 - Web&H5 (Vue3)](https://www.tencentcloud.com/document/product/647/50993)
|
||
- [API 文档](https://web.sdk.qcloud.com/component/trtccalling/doc/web/zh-cn/)
|
||
|
||
---
|
||
|
||
**修复日期：** 2024-03-04
|
||
**修复版本：** 4.0.12 → 4.2.2
|
||
**状态：** ✅ 完成
|