腾讯云多人音视频房间SDK快速接入（uni-app（小程序））_音视频解决方案_同尘科技

TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理、音视频控制、屏幕共享、成员管理、麦位管理、即时聊天、自定义布局切换等丰富的功能交互。同时支持中英文切换，一键换肤等能力。
本文介绍 TUIRoomKit (Uniapp) 的接入指引，助力您快速上线企业会议、在线教育、医疗问诊、在线巡视、远程定损等业务场景。您可以单击 Github/Gitee 下载 TUIRoomKit 代码，并参考代码仓库 README.md 文档跑通 TUIRoomKit Uniapp 示例工程。

小程序 Demo

如果您想要直接跑通一个新工程，请直接阅读 uni-app demo 快速跑通。如果您想要亲自集成 TUIRoomKit 组件，搭建一个多人音视频房间小程序，请跟随本文档。

开发环境要求

微信 App iOS 最低版本要求：7.0.9。微信 App Android 最低版本要求：7.0.8。小程序基础库最低版本要求：2.13.0。警告：由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。

步骤一：开发前准备

1. 开通小程序权限

由于 TUIRoomKit 所使用的小程序标签有更苛刻的权限要求，因此集成 TUIRoomKit 的第一步就是要开通小程序的类目和标签使用权限。否则无法使用，这包括如下步骤：小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业，如下图所示：
小程序推拉流标签使用权限暂时只开放给有限 类目。符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：


2. 在小程序控制台配置域名

在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名 和 socket 合法域名，如下图所示：request 合法域名：

https://official.opensso.tencent-cloud.comhttps://yun.tim.qq.comhttps://cloud.tencent.comhttps://webim.tim.qq.comhttps://query.tencent-cloud.comhttps://web.sdk.qcloud.com

socket 合法域名：

wss://wss.im.qcloud.comwss://wss.tim.qq.com



3. 开通服务

在使用 TUIRoomKit 发起会议前，您需要开通 TUIRoomKit 专属的多人音视频互动服务，详细步骤如下：1. 登录 实时音视频 TRTC 控制台，单击左侧应用管理页面，找到需要开通 TUIRoomKit 的应用（SDKAppID），单击详情，进入应用概览界面。2. 在应用概览页面找到含 UI 低代码集成接入 卡片，选择多人音视频（TUIRoomKit），单击领取体验，领取7天体验版 TUIRoomKit 进行接入测试。注意：领取体验版后仅开通 TUIRoomKit 7天的体验资格，测试过程中所产生的音视频时长等资源消耗，仍会按照实时音视频 TRTC 标准计费规则计费；新账号首次可前往 试用中心 免费领取10000分钟音视频时长；如果所选 SDKAppID 体验版领取次数已达上限，需要购买 TUIRoomKit 包月套餐才能开通服务，请单击场景套餐订阅或前往 购买页 购买；

3. 领取完成后，可以看到体验版的基本信息，包括服务状态、版本信息和功能详情、到期时间。
4. 单击集成指南，即可参照集成指南开始集成。至此 TUIRoomKit 服务开通完成。

步骤二：准备 Uniapp 工程代码

注意：目前只支持 ts + vite + vue3 工程如果您已有自己的 uni-app 工程，可跳过该步骤。如果没有，可选择以下方式生成模板工程。 在 HBuilder 中创建小程序项目。

步骤三：下载并导入 TUIRoom 组件

注意：因为小程序对主包大小的限制，这里 TUIRoom 默认使用分包方案，通过脚本自动配置。

3.1 npm 依赖安装

此处需在 uni-app 项目根目录下运行

# 在终端输入npm init -y，创建package.json文件。npm init -y# 安装项目依赖npm i @tencentcloud/tui-roomkit-uniapp

3.2 执行项目自动化脚本

# 此脚本会自动拷贝相关依赖到您的项目。并配置 vite.config.ts、tsconfig.json、mainfest.json、pages.json 文件# 同时创建一个空白页面 roomkitTest.vue 用于展示 roomKit 项目node ./node_modules/@tencentcloud/tui-roomkit-uniapp/configureProject.js

警告：此处如果没有特殊需求建议您选择 自动配置，如执行脚本的过程中您未选择自动配置，请结合 项目配置说明 手动进行修改。

3.3 手动修改项目配置

1. 修改./src/main.js（main.ts） ，引入VueI18n以及pinia。（注意此处为增量添加，根据自己项目选择添加位置）注意：如果项目使用 HbuilderX 创建，main.js 文件会有条件编译相关代码。需要您检查是否将配置正确填写在了 #ifdef VUE3 条件中。HbuilderXCLI

import App from './App'import { createPinia } from "pinia";import VueI18n from "./locales/index";
// #ifndef VUE3import Vue from 'vue'import './uni.promisify.adaptor'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({  ...App})app.$mount()app.use(createPinia());app.use(VueI18n);// #endif
// #ifdef VUE3import { createSSRApp } from 'vue'export function createApp() {  const app = createSSRApp(App)  app.use(createPinia());  app.use(VueI18n);  return {    app  }}// #endif

import { createPinia } from 'pinia';// locales 为 TUIRoom/locales，因为主包无法使用分包资源，此处拷贝了一份 locales 在 src 路径下import VueI18n from './locales/index';
app.use(createPinia());app.use(VueI18n);

2. 找到并打开./roomkit/config/basic-info-config.js文件，并修改basic-info-config.js文件中的相关参数：

3.4 运行到微信开发者工具

1. 运行到微信开发者工具，等待编译完成并打开微信开发者工具。
打开微信开发者工具后，在项目根目录（非编译后 dist 文件目录）install 相关依赖。

# 执行 bash ./wxmini_prod.sh 根据分包方案安装依赖# 此处使用的路径为默认路径，如果您对此路径进行了修改，需要手动对脚本路径进行调整bash ./wxmini_dev.sh# 若要进行 build 则执行 bash ./wxmini_prod.sh

说明：使用分包方案将@tencentcloud/tuiroom-engine-wx当作外部依赖， uniapp 并不会将此 npm 包编译进入vendor.js，因此需要我们进入编译后的小程序目录手动 install，以下脚本将自动进行上述步骤。构建 npm，微信开发者工具单击工具 > 构建 npm。具体如下图：
点击预览，扫描二维码，体验程序。单击清缓存 > 全部清除，避免开发者工具的缓存造成渲染异常。
编译小程序。 

步骤四：开始您的第一场会议

单击新建房间，开始您的第一场会议。

项目配置说明

警告：以下修改均为增量修改，需要根据自己项目配置进行添加。1. 修改./src/manifest.json小程序相关配置，开启分包并设置 node_modules 目录，参考文档 自定义 node-modules、miniprogram-npm 位置构建、uniapp 分包。

 /* 小程序特有相关 */ "mp-weixin": {   "setting": {     "urlCheck": false,     "packNpmManually": true,     "packNpmRelationList": [       {         "packageJsonPath": "./package.json",         "miniprogramNpmDistDir": "./"       },       {         "packageJsonPath": "./roomkit/package.json",         "miniprogramNpmDistDir": "./roomkit"       }     ]   },   "usingComponents": true,   "optimization": {     "subPackages": true   }},

2. 修改./src/pages.json，添加分包页面以及全局组件引入。

{  "pages": [    {      "path": "pages/roomkitTest",      "style": {        "navigationBarTitleText": ""      }    },  ],  "subpackages": [    {      "root": "roomkit",      "pages": [        {          "path": "pages/home",          "style": {            "navigationBarTitleText": "home"          }        },        {          "path": "pages/room",          "style": {            "navigationBarTitleText": "room"          }        }      ]    }  ],  "globalStyle": {    "usingComponents": {      "trtc-pusher": "@tencentcloud/trtc-component-wx/trtc-pusher",      "trtc-player": "@tencentcloud/trtc-component-wx/trtc-player"    }  },}

3. 修改./vite.config.ts，将@tencentcloud/tuiroom-engine-wx设置为外部依赖，用于分包减少主包体积。HBuliderX 创建CLI 创建

import { defineConfig } from 'vite';import uni from '@dcloudio/vite-plugin-uni';

import path from 'path';

function resolve(dir) {  return path.join(__dirname, dir);}

// https://vitejs.dev/config/export default defineConfig(({ mode }) => {  const isProd = mode === 'production';

  const commonConfig = {    optimizeDeps: {      include: ['@tencentcloud/tuiroom-engine-wx'],    },    plugins: [      uni(),    ],    resolve: {      alias: {        '@': resolve('./'),        '@TUIRoom': resolve('/roomkit/TUIRoom'),      },    },    build: {      rollupOptions: {        external: ['@tencentcloud/tuiroom-engine-wx'],      },    },  };  const devConfig = {    ...commonConfig,  };

  const prodConfig = {    ...commonConfig,  };

  return isProd ? prodConfig : devConfig;});

import { defineConfig } from 'vite';import uni from '@dcloudio/vite-plugin-uni';

import path from 'path';

function resolve(dir) {  return path.join(__dirname, dir);}

// https://vitejs.dev/config/export default defineConfig(({ mode }) => {  const isProd = mode === 'production';

  const commonConfig = {    optimizeDeps: {      include: ['@tencentcloud/tuiroom-engine-wx'],    },    plugins: [      uni(),    ],    resolve: {      alias: {        '@': resolve('src'),        '@TUIRoom': resolve('src/roomkit/TUIRoom'),      },    },    build: {      rollupOptions: {        external: ['@tencentcloud/tuiroom-engine-wx'],      },    },  };  const devConfig = {    ...commonConfig,  };

  const prodConfig = {    ...commonConfig,  };

  return isProd ? prodConfig : devConfig;});

4. 修改./tsconfig.json，项目使用 ts + vue3 开发，如不存在该文件，会产生编译错误。HBuliderX 创建CLI 创建

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致    "target": "es5",    // 这可以对 `this` 上的数据 property 进行更严格的推断    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:    "module": "es2015",    "moduleResolution": "node"  }}

// tsconfig.json{  "extends": "@vue/tsconfig/tsconfig.json",  "compilerOptions": {    "sourceMap": true,    "baseUrl": ".",    "paths": {      "@/*": ["./src/*"]    },    "lib": ["esnext", "dom"],    "types": ["@dcloudio/types"]  },  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]}

其他文档

TUIRoomKitTUIRoom demo 快速跑通

联系我们

如果您在接入或使用过程中有任何需要或者反馈，欢迎加入 TUIRoomKit 技术交流群 进行技术交流和问题反馈。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案