ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
0c1709d5892df82411a627b66e81c3ca1abea975
zyt/admin/TESTING_GUIDE.md
T
Your Name ab77f5488d 新增功能
2026-03-04 15:32:30 +08:00

9.4 KiB
Raw Blame History

音视频通话测试指南

问题说明

当前错误的根本原因：

目标用户 patient_1 没有在腾讯云 TRTC 中登录/初始化

为什么会出现这个错误？

  1. 医生端（当前系统）已经初始化：doctor_1
  2. 患者端需要呼叫：patient_1
  3. 问题：patient_1 没有登录 TRTC，无法接听

这就像打电话：

  • 你（医生）的手机已经开机 ✅
  • 对方（患者）的手机没开机 ❌
  • 所以无法接通

解决方案

方案 1: 双浏览器测试（推荐）

使用两个浏览器窗口模拟医生和患者：

步骤 1: 创建测试页面

创建一个简单的患者端测试页面：

<!-- public/patient-test.html -->
<!DOCTYPE html>
<html>
<head>
  <title>患者端测试</title>
  <script src="https://web.sdk.qcloud.com/trtc/webrtc/v5/TUICallKit.iife.js"></script>
</head>
<body>
  <h1>患者端 - 等待来电</h1>
  <div id="status">初始化中...</div>
  <div id="TUICallKit"></div>
  
  <script>
    // 配置信息（从后端获取）
    const config = {
      SDKAppID: 你的SDKAppID,  // 替换为实际值
      userID: 'patient_1',
      userSig: '从后端获取的userSig'  // 需要为 patient_1 生成
    };
    
    // 初始化
    TUICallKitServer.init({
      userID: config.userID,
      userSig: config.userSig,
      SDKAppID: config.SDKAppID
    }).then(() => {
      document.getElementById('status').textContent = '等待来电...';
      console.log('患者端初始化成功，等待来电');
    }).catch(error => {
      document.getElementById('status').textContent = '初始化失败: ' + error.message;
      console.error('初始化失败:', error);
    });
  </script>
</body>
</html>

步骤 2: 后端添加获取患者签名的接口

// server/app/adminapi/controller/tcm/DiagnosisController.php

/**
 * @notes 获取患者通话签名（用于测试）
 * @return \think\response\Json
 */
public function getPatientSignature()
{
    $params = $this->request->get();
    
    if (empty($params['patient_id'])) {
        return $this->fail('患者ID不能为空');
    }
    
    $result = DiagnosisLogic::getPatientSignature($params);
    if ($result) {
        return $this->data($result);
    }
    return $this->fail(DiagnosisLogic::getError());
}

// server/app/adminapi/logic/tcm/DiagnosisLogic.php

/**
 * @notes 获取患者通话签名
 * @param array $params
 * @return array|bool
 */
public static function getPatientSignature(array $params)
{
    try {
        $config = self::getTrtcConfig();
        
        if (!$config) {
            self::setError('请先配置腾讯云TRTC参数');
            return false;
        }
        
        // 患者的 userId
        $userId = 'patient_' . $params['patient_id'];
        
        // 生成 UserSig
        $userSig = self::generateUserSig($config['sdkAppId'], $config['secretKey'], $userId);
        
        if (!$userSig) {
            self::setError('生成签名失败');
            return false;
        }
        
        return [
            'sdkAppId' => $config['sdkAppId'],
            'userId' => $userId,
            'userSig' => $userSig,
            'expireTime' => 86400
        ];
    } catch (\Exception $e) {
        self::setError($e->getMessage());
        return false;
    }
}

步骤 3: 测试流程

  1. 打开患者端

    • 浏览器 1：访问 http://localhost/patient-test.html?patient_id=1
    • 获取签名并初始化
    • 等待来电

  2. 打开医生端

    • 浏览器 2：登录后台管理系统
    • 进入诊断列表
    • 点击"视频通话"
    • 发起通话

  3. 验证

    • 患者端应该收到来电提示
    • 点击接听
    • 双方可以进行视频通话

方案 2: 使用腾讯云 Demo（快速测试）

  1. 访问腾讯云官方 Demo：

    https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/official-demo/index.html

  2. 输入你的配置：

    • SDKAppID
    • SecretKey
    • UserID: patient_1

  3. 点击"进入房间"

  4. 在你的系统中发起通话

方案 3: 自测试（单用户测试）

如果只是想测试初始化是否成功，可以呼叫自己：

// 修改前端代码，呼叫自己
await TUICallKitServer.call({
  userID: res.userId,  // 呼叫自己
  type: TUICallType.VIDEO_CALL
})

这样可以验证：

  • ✅ 初始化是否成功
  • ✅ 签名是否正确
  • ✅ 配置是否正确
  • ❌ 但无法测试真实的通话流程

完整的测试方案

创建患者端测试组件

<!-- admin/src/views/test/patient-call.vue -->
<template>
  <div class="patient-test">
    <el-card>
      <h2>患者端测试 - 接听来电</h2>
      
      <el-form :model="form" label-width="100px">
        <el-form-item label="患者ID">
          <el-input v-model="form.patientId" placeholder="输入患者ID，如：1" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="initPatient" :loading="loading">
            初始化患者端
          </el-button>
        </el-form-item>
      </el-form>
      
      <div v-if="initialized" class="status">
        <el-alert type="success" :closable="false">
          患者端已初始化，等待来电...
          <br>
          患者ID: {{ currentUserId }}
        </el-alert>
      </div>
      
      <div id="TUICallKit" class="call-container"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue'
import { ElMessage } from 'element-plus'

const form = ref({
  patientId: '1'
})

const loading = ref(false)
const initialized = ref(false)
const currentUserId = ref('')

const initPatient = async () => {
  try {
    loading.value = true
    
    // 获取患者签名
    const response = await fetch(`/adminapi/tcm.diagnosis/getPatientSignature?patient_id=${form.value.patientId}`, {
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      }
    })
    
    const result = await response.json()
    
    if (result.code !== 1) {
      throw new Error(result.msg || '获取签名失败')
    }
    
    const { sdkAppId, userId, userSig } = result.data
    currentUserId.value = userId
    
    // 初始化
    await TUICallKitServer.init({
      userID: userId,
      userSig: userSig,
      SDKAppID: sdkAppId
    })
    
    // 等待初始化完成
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    initialized.value = true
    ElMessage.success('患者端初始化成功，等待来电...')
    
  } catch (error: any) {
    console.error('初始化失败:', error)
    ElMessage.error(error.message || '初始化失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.patient-test {
  padding: 20px;
}

.status {
  margin: 20px 0;
}

.call-container {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
</style>

添加路由

// admin/src/router/index.ts
{
  path: '/test/patient-call',
  name: 'PatientCallTest',
  component: () => import('@/views/test/patient-call.vue'),
  meta: { title: '患者端测试' }
}

测试步骤

完整测试流程

  1. 准备两个浏览器窗口

    • 窗口 1：Chrome（医生端）
    • 窗口 2：Chrome 无痕模式（患者端）

  2. 初始化患者端

    • 在窗口 2 中访问：http://localhost:5173/#/test/patient-call
    • 输入患者ID：1
    • 点击"初始化患者端"
    • 等待提示"患者端初始化成功"

  3. 发起通话

    • 在窗口 1 中进入诊断列表
    • 找到患者ID为1的诊单
    • 点击"视频通话"
    • 点击"开始通话"

  4. 接听通话

    • 窗口 2 应该收到来电提示
    • 点击"接听"
    • 开始视频通话

  5. 验证功能

    • ✅ 视频画面正常
    • ✅ 音频正常
    • ✅ 可以挂断
    • ✅ 通话记录保存

常见问题

Q1: 患者端没有收到来电

可能原因:

  1. 患者端没有初始化
  2. 患者ID不匹配
  3. 网络问题

解决方案:

// 在患者端控制台检查
console.log('当前用户ID:', TUICallKitServer.userID)
// 应该显示: patient_1

Q2: 提示用户不存在

原因: UserSig 生成的 userId 和呼叫的 userId 不一致

解决方案: 确保：

// 医生端
const doctorUserId = 'doctor_1'  // 医生登录时使用

// 患者端
const patientUserId = 'patient_1'  // 患者登录时使用

// 呼叫时
await TUICallKitServer.call({
  userID: 'patient_1'  // 必须和患者登录的 userId 一致
})

Q3: 两个窗口都是同一个用户

原因: 使用了相同的浏览器和相同的 localStorage

解决方案: 使用无痕模式或不同的浏览器

生产环境部署

在生产环境中，需要：

  1. 患者端应用

    • 开发患者端 H5/小程序/App
    • 集成 TUICallKit
    • 实现登录和来电监听

  2. 推送通知

    • 当医生发起通话时，推送通知给患者
    • 患者点击通知进入通话界面

  3. 在线状态管理

    • 检查患者是否在线
    • 如果不在线，提示医生

  4. 通话记录

    • 保存通话记录
    • 统计通话时长
    • 生成通话报表

参考资料

Reference in New Issue View Git Blame Copy Permalink