uniapp中如何使用@tencentcloud/trtc-component-uniapp的trtcpusher组件

“在uniapp中引入@tencentcloud/trtc-component-uniapp的trtcpusher组件时遇到问题，按照官方文档配置后仍然无法正常使用。具体表现为组件渲染成功但无法推流，控制台没有报错信息。请问正确的集成步骤是什么？是否需要额外配置腾讯云参数？能否提供一个完整的示例代码？”

2 回复

在uniapp中使用trtcpusher组件：

  1. 安装依赖：
npm install @tencentcloud/trtc-component-uniapp
  1. 页面引入：
<template>
  <trtcpusher
    :config="pusherConfig"
    @pusher-event="onPusherEvent"
  />
</template>

<script>
import Trtcpusher from '@tencentcloud/trtc-component-uniapp/components/trtcpusher'

export default {
  components: { trtcpusher: Trtcpusher },
  data() {
    return {
      pusherConfig: {
        sdkAppId: '你的sdkAppId',
        userId: '用户ID',
        userSig: '用户签名'
      }
    }
  }
}
</script>
  1. 配置参数并监听事件即可使用。

在 UniApp 中使用 @tencentcloud/trtc-component-uniapp 的 trtcpusher 组件进行实时音视频推流，步骤如下：

1. 安装依赖

在项目根目录执行以下命令安装 TRTC 组件：

npm install @tencentcloud/trtc-component-uniapp

2. 引入组件

在需要使用推流功能的页面（如 live-push.vue）中引入组件：

<template>
  <view>
    <!-- TRTC 推流组件 -->
    <trtcpusher
      ref="trtcpusherRef"
      :config="pusherConfig"
      @pusher-event="onPusherEvent"
    ></trtcpusher>
  </view>
</template>

<script>
// 引入 TRTC 组件
import Trtcpusher from '@tencentcloud/trtc-component-uniapp/components/trtcpusher/trtcpusher.vue';

export default {
  components: {
    trtcpusher: Trtcpusher,
  },
  data() {
    return {
      // 推流配置参数
      pusherConfig: {
        sdkAppId: 0,        // 替换为您的 SDKAppID
        userId: '',         // 用户 ID
        userSig: '',        // 用户签名
        mode: 'RTC',        // 模式：RTC（实时通话）或 LIVE（直播）
        beauty: 5,          // 美颜级别（0-9）
        muted: false,       // 是否静音
        debug: false,       // 是否开启调试模式
      },
    };
  },
};
</script>

3. 配置推流参数

  • sdkAppId：从腾讯云 TRTC 控制台获取。
  • userId：自定义唯一用户 ID。
  • userSig：根据 userId 和 sdkAppId 生成的签名（需后台生成，前端测试可先用临时方案）。
  • mode：根据场景选择 RTC（低延迟通话）或 LIVE（直播模式）。

4. 开始推流

通过 ref 调用组件的 start 方法，传入推流地址（需后台生成）：

methods: {
  startPusher() {
    // 获取推流组件实例
    const pusher = this.$refs.trtcpusherRef;
    // 开始推流（streamId 由后台生成）
    pusher.start({
      streamId: 'your_stream_id', // 替换为实际流 ID
    });
  },
  
  // 处理推流事件
  onPusherEvent(event) {
    const { detail } = event;
    if (detail.code === 0) {
      console.log('推流成功');
    } else {
      console.error('推流失败:', detail);
    }
  },
}

5. 停止推流

stopPusher() {
  this.$refs.trtcpusherRef.stop();
}

注意事项：

  1. 用户签名（userSig）：正式环境需由服务端生成，避免泄露密钥。
  2. 推流地址：通过后台接口获取，格式如：trtc://cloud.tencent.com/push/streamId?sdAppId=xxx&userId=xxx&userSig=xxx。
  3. 权限：确保 App 已获取摄像头和麦克风权限。
  4. 平台支持：确认组件兼容当前平台（iOS/Android/微信小程序）。

通过以上步骤即可在 UniApp 中快速集成 TRTC 推流功能。

回到顶部