uniapp微信小程序如何接入腾讯云音视频sdk

在uniapp开发的微信小程序中，如何正确接入腾讯云音视频SDK？需要具体步骤说明，包括SDK的引入方式、权限配置、初始化参数设置以及常见问题的解决方案。官方文档看得不太明白，希望能有详细的实操指导，最好附带代码示例。另外，小程序端和云端对接时有哪些需要特别注意的地方？

2 回复

在uniapp项目中，通过npm安装trtc-wx-sdk，然后在页面中引入并使用。需配置微信小程序后台的服务器域名，并获取腾讯云SDKAppID和密钥。具体步骤参考官方文档。


在 UniApp 中接入腾讯云音视频 SDK（TRTC）需通过微信小程序原生方式集成，步骤如下：

1. 获取 SDK 和密钥

  • 在腾讯云 TRTC 控制台创建应用，获取 SDKAppID 和密钥。
  • 下载微信小程序版 TRTC SDK（文件通常为 trtc-wx.js）。

2. 引入 SDK 到 UniApp 项目

  • 将 trtc-wx.js 放置在 UniApp 项目的 static 目录下（或其他静态资源目录）。
  • 在需要使用 TRTC 的页面中通过 require 引入：
    const TRTC = require('@/static/trtc-wx.js');

3. 配置微信小程序权限

在 manifest.json 的 mp-weixin 部分添加所需权限：

{
  "mp-weixin": {
    "appid": "你的小程序AppID",
    "permission": {
      "scope.record": {
        "desc": "用于音频通话"
      },
      "scope.camera": {
        "desc": "用于视频通话"
      }
    }
  }
}

4. 初始化 TRTC 并加入房间

在页面逻辑中初始化并进入音视频房间：

const trtc = new TRTC({
  sdkAppId: '你的SDKAppID',
  userId: '当前用户ID',
  userSig: '通过SDKAppID和密钥生成的用户签名', // 需在服务端生成
});

// 进入房间
trtc.enterRoom({
  roomId: 房间号,
  role: 'anchor', // 主播角色
}).then(() => {
  console.log('进入房间成功');
}).catch(error => {
  console.error('进入房间失败:', error);
});

// 监听远程流事件
trtc.on('remote-user-join', (event) => {
  console.log('远程用户加入:', event.userId);
});

5. 渲染本地和远程视频

在页面模板中使用 <live-pusher> 和 <live-player> 组件：

<!-- 本地视频 -->
<live-pusher
  url="trtc://cloud.tencent.com/..."
  mode="RTC"
  autopush
  class="local-video"
/>

<!-- 远程视频 -->
<live-player
  :src="remoteVideoUrl"
  mode="RTC"
  autoplay
  class="remote-video"
/>

6. 关键注意事项

  • 用户签名（userSig）：必须在服务端生成，避免泄露密钥。
  • 域名配置：在微信小程序后台将 https://yun.tim.qq.com 加入 request 合法域名。
  • 测试限制：微信小程序需开启直播权限，并通过审核才能正式使用。

示例代码摘要

完整示例可参考腾讯云官方文档或 GitHub 上的 TRTC 小程序 Demo。确保测试前在真机上运行（部分功能开发者工具不支持）。

通过以上步骤即可在 UniApp 微信小程序中实现基础的音视频通话功能。

回到顶部