zyt/admin/QUICK_REFERENCE.md

TUICallKit 4.2.2 快速参考

📦 安装

npm install @trtc/calls-uikit-vue

📥 导入

import { TUICallKitAPI, TUICallKit, TUICallType, STATUS } from '@trtc/calls-uikit-vue'

🔧 常用 API

初始化

await TUICallKitAPI.init({
    userID: 'doctor_1',
    userSig: 'xxx',
    SDKAppID: 123456
})

发起通话

// 一对一通话
await TUICallKitAPI.calls({
    userIDList: ['patient_2'],
    type: TUICallType.VIDEO_CALL
})

// 多人通话
await TUICallKitAPI.calls({
    userIDList: ['patient_2', 'doctor_3'],
    type: TUICallType.VIDEO_CALL
})

接听/拒绝

// 接听
await TUICallKitAPI.accept()

// 拒绝
await TUICallKitAPI.reject()

挂断

await TUICallKitAPI.hangup()

设置回调

TUICallKitAPI.setCallback({
    statusChanged: ({ oldStatus, newStatus }) => {
        console.log('状态变化:', oldStatus, '->', newStatus)
    },
    afterCalling: () => {
        console.log('通话结束')
    }
})

浮窗设置

TUICallKitAPI.enableFloatWindow(false)

📊 状态常量

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

🎨 组件使用

<template>
    <TUICallKit 
        style="width: 650px; height: 500px"
        :allowedFullScreen="false"
        :allowedMinimized="false"
    />
</template>

<script setup>
import { TUICallKit } from '@trtc/calls-uikit-vue'
</script>

⚠️ 注意事项

1. userId 格式：必须是字符串，建议格式 prefix_number（如 doctor_1）
2. SDKAppID：必须是数字类型，使用 Number() 转换
3. HTTPS：Web 端必须使用 HTTPS（或 localhost）
4. userIDList：发起通话时使用数组，即使是一对一通话

🔄 从 4.0.12 迁移

项目	4.0.12	4.2.2
包名	@tencentcloud/call-uikit-vue	@trtc/calls-uikit-vue
API	TUICallKitServer	TUICallKitAPI
发起通话	call({ userID, type })	calls({ userIDList, type })

📚 完整文档

• 官方文档
• API 文档

---

版本： 4.2.2 更新日期： 2024-03-04