zyt/CHAT_VIDEO_INTEGRATION_FINAL.md

聊天与视频通话集成完成

解决方案

采用分离架构，避免 TUICallKit 与 Chat UIKit 的初始化冲突：

1. 聊天对话框 (admin/src/components/chat-dialog/index.vue)

   • 只初始化 Chat UIKit（IM 聊天系统）
   • 提供视频通话按钮
   • 通过事件通知父组件发起视频通话

2. 视频通话组件 (admin/src/components/video-call/index.vue)

   • 独立的浮动窗口
   • 独立初始化 TUICallKit
   • 可拖拽、可调整大小

功能特性

聊天功能

• ✅ 文字聊天
• ✅ 表情发送
• ✅ 图片上传
• ✅ 文件上传
• ✅ 视频上传
• ✅ 会话列表
• ✅ 消息历史

视频通话功能

• ✅ 1v1 视频通话
• ✅ 群组视频通话
• ✅ 通话状态监听
• ✅ 浮动窗口显示
• ✅ 窗口拖拽和调整大小

使用流程

1. 打开聊天界面

// 在预约列表点击"聊天"按钮
chatDialogRef.value?.open({
  patientId: row.patient_id,
  patientName: row.patient_name,
  diagnosisId: row.diagnosis_id || row.id
})

2. 在聊天界面发起视频通话

• 点击聊天界面右上角的"视频通话"按钮
• 触发 @video-call 事件
• 父组件接收事件并打开独立的视频通话窗口

3. 视频通话窗口

• 自动初始化 TUICallKit
• 发起视频通话
• 等待对方接听
• 通话中可以拖拽窗口位置
• 通话结束后自动关闭

技术实现

聊天对话框组件

<template>
  <el-dialog>
    <UIKitProvider>
      <div class="chat-layout">
        <ConversationList />
        <Chat>
          <!-- 自定义头部，包含视频通话按钮 -->
          <div class="chat-header">
            <el-button @click="handleVideoCall">
              视频通话
            </el-button>
          </div>
          <MessageList />
          <MessageInput />
        </Chat>
      </div>
    </UIKitProvider>
  </el-dialog>
</template>

<script setup>
// 只初始化 Chat UIKit
await login({
  sdkAppId: Number(res.sdkAppId),
  userId: res.userId,
  userSig: res.userSig,
  useUploadPlugin: true
})

// 通过事件通知父组件
const emit = defineEmits(['videoCall'])
const handleVideoCall = () => {
  emit('videoCall', {
    diagnosisId: diagnosisId.value,
    patientId: patientId.value,
    patientName: patientName.value,
    userId: patientUserId.value
  })
}
</script>

预约列表页面

<template>
  <!-- 聊天对话框 -->
  <chat-dialog 
    ref="chatDialogRef" 
    @video-call="handleChatVideoCall" 
  />
  
  <!-- 视频通话组件 -->
  <video-call ref="videoCallRef" />
</template>

<script setup>
// 监听聊天对话框的视频通话事件
const handleChatVideoCall = (data) => {
  // 打开独立的视频通话窗口
  videoCallRef.value?.open({
    diagnosisId: data.diagnosisId,
    patientId: data.patientId,
    patientName: data.patientName,
    userId: data.userId,
    isGroup: false
  })
}
</script>

架构优势

1. 避免冲突

• Chat UIKit 和 TUICallKit 在不同组件中初始化
• 互不干扰，各自独立运行

2. 职责分离

• 聊天对话框：专注于聊天功能
• 视频通话组件：专注于视频通话功能

3. 可维护性

• 每个组件功能单一，易于维护
• 可以独立测试和调试

4. 用户体验

• 聊天和视频通话可以同时进行
• 视频通话窗口可以自由拖拽
• 不影响聊天界面的使用

文件清单

修改的文件

1. admin/src/components/chat-dialog/index.vue

   • 添加视频通话按钮
   • 添加 videoCall 事件
   • 移除 TUICallKit 初始化

2. admin/src/views/tcm/appointment/list.vue

   • 监听 @video-call 事件
   • 添加 handleChatVideoCall 方法

现有文件（无需修改）

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

   • 独立的视频通话组件
   • 已完整实现所有功能

2. admin/src/assets/chat-uikit.css

   • Chat UIKit 样式文件

API 接口

获取签名

• 接口：/tcm.diagnosis/getCallSignature
• 参数：

  {
    patient_id: number
    diagnosis_id: number
  }
  

• 返回：

  {
    sdkAppId: number
    userId: string        // 医生ID，如 "doctor_1"
    userSig: string       // 签名
    patientUserId: string // 患者ID，如 "patient_4"
    expireTime: number
  }
  

后端配置

SDK_APP_ID = "1600127710"
SECRET_KEY = "8a6b3ce533b0e46b9d6e17d5c77bac240bc0ccdce4e3db93a0d6a1e55160c73d"
ENABLE = "true"

测试建议

聊天功能测试

1. ✅ 打开聊天对话框
2. ✅ 发送文字消息
3. ✅ 发送表情
4. ✅ 上传图片
5. ✅ 上传文件
6. ✅ 上传视频
7. ✅ 查看会话列表
8. ✅ 查看消息历史

视频通话测试

1. ✅ 在聊天界面点击"视频通话"按钮
2. ✅ 视频通话窗口弹出
3. ✅ 发起通话
4. ✅ 等待对方接听
5. ✅ 通话接通
6. ✅ 拖拽窗口
7. ✅ 调整窗口大小
8. ✅ 挂断通话
9. ✅ 窗口自动关闭

集成测试

1. ✅ 聊天时发起视频通话
2. ✅ 视频通话时继续聊天
3. ✅ 关闭聊天对话框，视频通话继续
4. ✅ 结束视频通话，聊天继续

注意事项

1. HTTPS 要求

   • 视频通话需要 HTTPS 环境
   • 或在 localhost 下测试

2. 浏览器权限

   • 需要授权摄像头和麦克风访问
   • 首次使用会弹出权限请求

3. 用户 ID 格式

   • 医生：doctor_{id}
   • 患者：patient_{id}

4. 表情功能

   • 可能需要腾讯云授权
   • 默认表情包有版权限制

故障排查

聊天界面无法加载

1. 检查后端签名接口是否正常
2. 查看浏览器控制台错误信息
3. 确认 SDK_APP_ID 配置正确

视频通话无法发起

1. 确认使用 HTTPS 或 localhost
2. 检查浏览器权限设置
3. 查看控制台是否有 TUICallKit 错误
4. 确认对方用户 ID 正确

视频通话窗口不显示

1. 检查 z-index 是否被其他元素遮挡
2. 确认 TUICallKit 初始化成功
3. 查看窗口位置是否在屏幕外

总结

通过分离架构，成功解决了 Chat UIKit 和 TUICallKit 的初始化冲突问题。现在系统同时支持：

• 完整的聊天功能（文字、表情、图片、文件、视频）
• 完整的视频通话功能（1v1、群组、浮动窗口）
• 两个功能互不干扰，可以同时使用

这种架构清晰、可维护，为后续功能扩展提供了良好的基础。