trtc-ai-conversation-utils

trtc-ai-conversation-utils 是一个配合TRTC AI实时对话相关demo使用的实用工具包， 主要用于web和小程序的运行环境。

主要提供以下能力

• 在浏览器环境计算trtc的进房userSig的能力
• 在浏览器调用腾讯云的云api相关签名算法的能力
• 封装一些简单的AI对话相关的云API调用
• 生成AI对话相关参数的二维码和解析二维码配置的能力

*** 该工具包只为快速体验demo， 请勿用作线上环境方案， 云api调用涉及很多秘钥，出于安全考虑需要放在服务端实现 ***

安装

使用 npm 安装：

npm install trtc-ai-conversation-utils

开始使用

设置网络请求的具体执行逻辑

web端（云api能跨域，需配合本地反向代理体验）

import {
  setupTaskHanlder,,
} from 'trtc-ai-conversation-utils';

setupTaskHanlder((url, headers, data) => {
  const body = JSON.stringify(data);
  console.log(url, headers, body);
  return fetch('/trtc-capi', {
    method: 'POST',
    headers,
    body: JSON.stringify(data),
  }).then(res => res.json())
    .then((json) => {
      console.info(json);
      return json;
    });
});

// 反向代理, 以vite举例
   server: {
        proxy: {
          '/trtc-capi': {
            target: 'https://trtc.tencentcloudapi.com',
            logLevel: 'debug',
            changeOrigin: true,
            followRedirects: false,
            secure: false, // 忽略证书验证
            prependPath: false,
            ignorePath: true,
            preserveHeaderKeyCase: true,
            protocolRewrite: 'https',
            configure: (proxy, options) => {
              proxy.on('proxyReq', (proxyReq, req, res) => {
                console.log(`[Proxy Request] ${req.method} ${req.url}`);
                proxyReq.removeHeader('Host');
                proxyReq.removeHeader('Origin');
                proxyReq.removeHeader('Referer');
                proxyReq.removeHeader('User-Agent');
                proxyReq.removeHeader('Accept');
                proxyReq.removeHeader('Accept-Encoding');
                proxyReq.removeHeader('Accept-Language');
                proxyReq.removeHeader('Connection');
                proxyReq.removeHeader('Sec-Fetch-Dest');
                proxyReq.removeHeader('Sec-Fetch-Mode');
                proxyReq.removeHeader('Sec-Fetch-Site');
                proxyReq.removeHeader('Sec-Fetch-User');
                proxyReq.removeHeader('Sec-Ch-Ua');
                proxyReq.removeHeader('Sec-Ch-Ua-Mobile');
                proxyReq.removeHeader('Sec-Ch-Ua-Platform');
                proxyReq.removeHeader('Cookie');

                proxyReq.setHeader('Host', 'trtc.tencentcloudapi.com');

                console.log('Request Headers:', proxyReq.getHeaders(), 'Request Body:', req.body);
              });
              proxy.on('proxyRes', (proxyRes, req, res) => {
                console.log(`[Proxy Response] ${req.method} ${req.url}`, req);
                console.log('Response Headers:', proxyRes.headers);
              });
            },
          },
        },
   },

小程序端

import { setupTaskHanlder } from 'trtc-ai-conversation-utils';

setupTaskHanlder((url, header, data) => {
  console.log(url, header, data);
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      header,
      success(res: any) {
        console.info('res', res);
        resolve(res.data);
      },
      method: 'POST',
      fail(err: any) {
        console.error(err);
        reject(err);
      }
    });
  });

解析扫描参数, 二维码由配置页面生成

小程序举例

import { AITask, UserSigGenerator, parseQRCodeData, setupCapiParams } from 'trtc-ai-conversation-utils';

    wx.scanCode({
      scanType: ['qrCode'],
      success: (res) => {
        console.log('Scan result:', res);
        try {
          const aiConfig = parseQRCodeData(res.rawData);
          console.log('aiConfig:', aiConfig);
          const { globalData } = getApp<IAppOption>();
          globalData.aiConfig = aiConfig;
          globalData.aiTask = new AITask(Number(aiConfig.trtcSdkAppId), aiConfig.roomId, true);
          globalData.userSigGenerator = new UserSigGenerator(Number(aiConfig.trtcSdkAppId), aiConfig.trtcSecret);
          // 设置云api全局参数
          setupCapiParams({
            region: aiConfig.region,
            secretKey: aiConfig.secretKey,
            secretId: aiConfig.secretId,
          });
          wx.navigateTo({
            url: '具体的demo页面'
          });
        } catch (e) {
          this.setData({
            errorMessage: '二维码内容不正确，或者已过期（配置页面生成的二维码当天有效）'
          });
        }
      },
      fail: (err) => {
        console.error('Scan failed:', err);
        this.setData({
          errorMessage: '扫码失败，请重试'
        });
      }
    });

调用ai对话相关接口

小程序

  // 开始ai对话任务
   startConversation() {
      const { aiConfig, aiTask, userSigGenerator } = getApp<IAppOption>().globalData;
      if (!aiConfig || !aiTask || !userSigGenerator) {
        return;
      }
      aiTask.startAIConversation({
        agentConfig: {
          UserId: aiConfig.robotId,
          UserSig: userSigGenerator.genUserSig(aiConfig.robotId, 60 * 60 * 30),
          TargetUserId: aiConfig.userId,
        },
        sttConfig: {
          Language: aiConfig.language,
          AlternativeLanguage: aiConfig.alternativeLanguage,
          VadSilenceTime: aiConfig.vadSilenceTime,
        },
        ttsConfig: JSON.parse(aiConfig.ttsConfig),
        llmConfig: JSON.parse(aiConfig.llmConfig),
      }).then(res => {
        if (res?.Response?.TaskId) {
          this.setData({
            taskId: res?.Response?.TaskId,
          });
        }
      });
    },

监听ai相关事件

以react举例

import {
  AIEventManagerTRTC, // web 端使用
  // AIEventManagerElectron, eletron端使用
  AIEventType,
  getAIStatusTextFromEvent,
} from '@tencent/trtc-ai-conversation-utils';


const trtc = TRTC.create(); // 业务使用的trtc实例

...

const aiEventManager = new AIEventManagerTRTC(trtc);

const [msgList, setMsgList] = useState<{ userId: string, msg: string, isEnd: boolean }[]>([]);
const msgListRef = useRef(msgList);
msgListRef.current = msgList;

aiEventManager.on(AIEventType.Status, (event) => {
  console.log(`AI状态: ${getAIStatusTextFromEvent(event)}`);
});
aiEventManager.on(AIEventType.Text, (event) => {
  const lastMsg = msgListRef.current[msgListRef.current.length - 1];
  if (!lastMsg || lastMsg.isEnd) {
    setMsgList(msgListRef.current.concat({
      userId: event.sender,
      msg: event.payload.text,
      isEnd: event.payload.end,
    }));
    return;
  }
  lastMsg.msg += event.payload.text;
  lastMsg.isEnd = event.payload.end;
  setMsgList([...msgListRef.current]);
});