本文将介绍如何用最短的时间完成TUIRoomKit组件的接入，跟随本文档，您将在一个小时内完成如下几个关键步骤，并最终得到一个包含完备 UI 界面的多人音视频房间功能。包括成员管理、屏幕分享、聊天、自由发言申请发言模式等功能,，如下图所示：

您可以单击在线体验链接： Mac OS版 及 Windows版 下载体验 TUIRoomKit Electron 更多功能。
您也可以单击 Github 下载 TUIRoomKit 代码，并参考 TUIRoomKit Electron 示例工程快速跑通 文档跑通 TUIRoomKit Electron 示例工程。
如需在现有业务中集成 Electron 端 TUIRoomKit 组件，请参考本文档。

支持的平台

Windows（PC）Mac

步骤一：开通服务

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

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

步骤二：准备 Vue 工程代码

Vue3 + Vite + TSVue2 + Webpack +TS1. 打开业务侧已有 Electron + Vue3 + TS 项目，如果无 Electron + Vue3 + TS 项目,可通过此模板 Github 生成 Electron + Vue3 + TS 的模板工程, nodejs 版本大于 14.17.0。注意：本文档介绍的集成步骤基于 electron-vite-vue 模板工程1.0.0版本。electron-vite-vue 模板工程最新版本目录结构有调整，如需使用最新版本，可参照本文档自行调整目录和配置。2. 克隆生成模板工程后，执行以下脚本：

git clone https://github.com/electron-vite/electron-vite-vue.gitcd electron-vite-vuegit checkout v1.0.0git switch -c TUIRoomKit-quick-startnpm installnpm run dev

// 安装 vue-cli，注意 Vue CLI 4.x 要求 Node.js 为 v10 以上版本npm install -g @vue/cli// 创建 Vue2 + Webpack + TS 模板工程vue create tuiroomkit-demo

注意：执行生成模板工程脚本的过程中，生成模板的方式选择 Manually select features，其余配置选项参考图片。
成功生成 Vue2 + Webpack + TS 模板工程后， 参考 Electron 无UI集成文档，往模版工程中集成 Electron。注意：由于 TUIRoom 组件内已经引入了 trtc-electron-sdk ， 在参考Electron 无UI集成文档时，可以忽略
这一步骤。

步骤三：下载并引用 TUIRoomkit 组件

1. 下载 TUIRoom 组件代码
单击 Github , 克隆或下载 TUIRoomKit 仓库代码。2. 引用 TUIRoom 组件Vue3 项目中引入 TUIRoom 组件Vue2 项目中引入 TUIRoom 组件1. 复制 TUIRoomKit/Electron/vue3/packages/renderer/src/TUIRoom 文件夹到已有项目 packages/renderer/src/ 目录下, 复制 TUIRoomKit/Electron/vue3/packages/renderer/index.html 文件夹到已有项目 packages/renderer/ 目录下。2. 在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。

    
    import { ref, onMounted } from 'vue';    // 引入 TUIRoom 组件，注意确认引入路径是否正确    import Room from './TUIRoom/index.vue';    // 获取 TUIRoom 组件元素，用于调用 TUIRoom 组件的方法    const TUIRoomRef = ref();
	 onMounted(async () => {        // 初始化 TUIRoom 组件        // 主持人在创建房间前需要先初始化 TUIRoom 组件        // 普通成员在进入房间前需要先初始化 TUIRoom 组件        await TUIRoomRef.value.init({            // 获取 sdkAppId 请您参考 步骤一            sdkAppId: 0,            // 用户在您业务中的唯一标示 Id            userId: '',            // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig            // 注意 userSig 与 userId 为一一对应关系            userSig: '',            // 用户在您业务中使用的昵称            userName: '',            // 用户在您业务中使用的头像链接            avatarUrl: '',            // 用户在您业务中需要的皮肤主题颜色及是否支持切换皮肤主题            theme: {              defaultTheme:'black',              isSupportSwitchTheme: true            }        })         // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法        await handleCreateRoom();    })
	// 主持人创建房间，该方法只在创建房间时调用    async function handleCreateRoom() {        // roomId 为用户进入的房间号, 要求 roomId 类型为 string        // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式        // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)        const roomId = '123456';        const roomMode = 'FreeToSpeak';        const roomParam = {            isOpenCamera: true,            isOpenMicrophone: true,        };        const createRoomInfo = {            roomId,            roomName: 'User defined room name' || roomId,            roomMode,            roomParam        };        await TUIRoomRef.value.createRoom(createRoomInfo);    }
	// 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用    async function handleEnterRoom() {        // roomId 为用户进入的房间号, 要求 roomId 类型为 number        // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)        const roomId = '123456';        const roomParam = {            isOpenCamera: true,            isOpenMicrophone: true,        };        const enterRoomInfo = {            roomId,            roomParam        };        await TUIRoomRef.value.enterRoom(enterRoomInfo);    }
html, body {    width: 100%;    height: 100%;    margin: 0;}
#app {    width: 100%;    height: 100%;}

1. 复制 TUIRoomKit/Electron/vue2/src/TUIRoom 文件夹到已有项目 src/ 目录下。2. 在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。注意：在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。

  
      

import RoomContainer from '@/TUIRoom/index.vue';export default {  name: 'App',  components: { RoomContainer },  data() {    return {};  },  async mounted() {    // 初始化 TUIRoom 组件    // 主持人在创建房间前需要先初始化 TUIRoom 组件    // 普通成员在进入房间前需要先初始化 TUIRoom 组件    await this.$refs.TUIRoomRef.init({      // 获取 sdkAppId 请您参考 步骤一      sdkAppId: 0,      // 用户在您业务中的唯一标示 Id      userId: '',      // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系      userSig: '',      // 用户在您业务中使用的昵称      userName: '',      // 用户在您业务中使用的头像链接      avatarUrl: '',    });    // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法    await this.handleCreateRoom();  },  methods: {    // 主持人创建房间，该方法只在创建房间时调用    async handleCreateRoom() {      // roomId 为用户进入的房间号, 要求 roomId 类型为 string      // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)      const roomId = '123456';      const roomMode = 'FreeToSpeak';      const roomParam = {          isOpenCamera: true,          isOpenMicrophone: true,      }      try {        await this.$refs.TUIRoomRef.createRoom({ roomId, roomName: roomId, roomMode, roomParam });      } catch (error) {        alert('TUIRoomKit.createRoom error: ' + error.message);      }    },    // 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用    async handleEnterRoom() {      // roomId 为用户进入的房间号, 要求 roomId 类型为 string      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)      const roomId = '123456';      const roomParam = {          isOpenCamera: true,          isOpenMicrophone: true,      }      try {        await this.$refs.TUIRoomRef.enterRoom({ roomId, roomParam });      } catch (error) {        alert('TUIRoomKit.enterRoom error: ' + error.message);      }    }  },};

html, body {  width: 100%;  height: 100%;  margin: 0;}
#app {  width: 100%;  height: 100%;  * {    box-sizing: border-box;  }}

参数说明这里详细介绍一下 init 函数中所需要用到的几个关键参数：SDKAppID：在 步骤一 中的第三步中您已经获取到，这里不再赘述。UserID：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。UserSig：使用 步骤一 的第三步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。注意：在页面中复制以上代码之后，需要修改 TUIRoom 接口的参数为实际数据。这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下：SDKAppID 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。UserSig 被错配成了加密密钥（SecretKey），UserSig 是用 SecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的，而不是直接把 SecretKey 配置成 UserSig。UserID 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。Github 中的示例代码使用了 getBasicInfo 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在 Electron 应用的代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 UserSig 的计算逻辑放在服务端进行，并由 app 在每次使用 TUIRoomKit 组件时向您的服务器请求实时计算出的 UserSig。

步骤四：配置开发环境

TUIRoom 组件引入之后，为了确保项目可以正常运行，需要进行以下配置：配置 Vue3 + Vite + TS 开发环境配置 Vue2 + Webpack + TS 开发环境配置 Vue2 + Webpack + JS 开发环境1. 安装依赖安装开发环境依赖

npm install sass typescript unplugin-auto-import unplugin-vue-components --save-dev

安装生产环境依赖

npm install element-plus events mitt pinia trtc-electron-sdk tim-js-sdk tsignaling vue-i18n @tencentcloud/tuiroom-engine-electron --save

2. 注册 PiniaTUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 packages/renderer/src/main.ts 文件。

// src/main.ts 文件import { createPinia } from 'pinia';
const app = createApp(App);// 注册PiniacreateApp(App)  .use(createPinia())  .mount('#app')  .$nextTick(window.removeLoading)

3. 配置 element-plus 按需引入TUIRoom 使用 element-plus UI 组件，为避免引入所有 element-plus组件，需要您在 packages/renderer/vite.config.ts 中配置 element-plus 组件按需加载, 可参考 packages/renderer/vite.config.ts 文件。注意：以下配置项为增量配置，不要删除已经存在的 Vite 配置项。

// vite.config.tsimport AutoImport from 'unplugin-auto-import/vite';import Components from 'unplugin-vue-components/vite';import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';import { createSvg } from './src/TUIRoom/assets/icons/index.js'const path = require('path');
export default defineConfig({  // ...  resolve: {    alias: {      '@': path.resolve(__dirname, 'src'),      '@TUIRoom': path.resolve(__dirname, 'src/TUIRoom'),    }  },  plugins: [    // ...    createSvg(path.join(path.resolve(__dirname, 'src/TUIRoom/assets/icons/svg/'), '/')),    AutoImport({      resolvers: [ElementPlusResolver()],    }),    Components({      resolvers: [ElementPlusResolver({        importStyle: 'sass',      })],    }), ], optimizeDeps: {   include: ['@tencentcloud/tuiroom-engine-electron'] }, build: {   // ...   commonjsOptions: {     exclude: ['@tencentcloud/tuiroom-engine-electron'],     include: [],   }, } // ...});

同时为了保证 element-plus 带 UI 组件能够正常显示样式，需要您在入口文件 packages/renderer/src/main.ts 中加载 element-plus 组件样式。

// src/main.tsimport 'element-plus/theme-chalk/el-message.css';import 'element-plus/theme-chalk/el-message-box.css';

4. 引入 trtc-electron-sdk为了在 UI 层以 import 方式引入 trtc-electron-sdk，统一代码风格，否则必须要以 require 的方式引入，需要您在 packages/renderer/vite.config.ts 中配置。以下配置项将 resolve 中的内容替换掉, 可参考 packages/renderer/vite.config.ts 文件。

// vite.config.ts
export default defineConfig({ // ... plugins: [ resolve(   {     "trtc-electron-sdk": `       const TRTCCloud = require("trtc-electron-sdk");       const TRTCParams = TRTCCloud.TRTCParams;       const TRTCAppScene = TRTCCloud.TRTCAppScene;       const TRTCVideoStreamType = TRTCCloud.TRTCVideoStreamType;       const TRTCScreenCaptureSourceType = TRTCCloud.TRTCScreenCaptureSourceType;       const TRTCVideoEncParam = TRTCCloud.TRTCVideoEncParam;       const Rect = TRTCCloud.Rect;       const TRTCAudioQuality = TRTCCloud.TRTCAudioQuality;       const TRTCScreenCaptureSourceInfo = TRTCCloud.TRTCScreenCaptureSourceInfo;       const TRTCDeviceInfo = TRTCCloud.TRTCDeviceInfo;       const TRTCVideoQosPreference = TRTCCloud.TRTCVideoQosPreference;       const TRTCQualityInfo = TRTCCloud.TRTCQualityInfo;       const TRTCQuality = TRTCCloud.TRTCQuality;       const TRTCStatistics = TRTCCloud.TRTCStatistics;       const TRTCVolumeInfo = TRTCCloud.TRTCVolumeInfo;       const TRTCDeviceType = TRTCCloud.TRTCDeviceType;       const TRTCDeviceState = TRTCCloud.TRTCDeviceState;       const TRTCBeautyStyle = TRTCCloud.TRTCBeautyStyle;       const TRTCVideoResolution = TRTCCloud.TRTCVideoResolution;       const TRTCVideoResolutionMode = TRTCCloud.TRTCVideoResolutionMode;       const TRTCVideoMirrorType = TRTCCloud.TRTCVideoMirrorType;       const TRTCVideoRotation = TRTCCloud.TRTCVideoRotation;       const TRTCVideoFillMode = TRTCCloud.TRTCVideoFillMode;       const TRTCRoleType = TRTCCloud.TRTCRoleType;       const TRTCScreenCaptureProperty = TRTCCloud.TRTCScreenCaptureProperty;       export {          TRTCParams,         TRTCAppScene,         TRTCVideoStreamType,         TRTCScreenCaptureSourceType,         TRTCVideoEncParam,         Rect,         TRTCAudioQuality,         TRTCScreenCaptureSourceInfo,         TRTCDeviceInfo,         TRTCVideoQosPreference,         TRTCQualityInfo,         TRTCStatistics,         TRTCVolumeInfo,         TRTCDeviceType,         TRTCDeviceState,         TRTCBeautyStyle,         TRTCVideoResolution,         TRTCVideoResolutionMode,         TRTCVideoMirrorType,         TRTCVideoRotation,         TRTCVideoFillMode,         TRTCRoleType,         TRTCQuality,         TRTCScreenCaptureProperty,       };       export default TRTCCloud.default;     `   } ), // ... ] // ...});

5. env.d.ts 文件配置env.d.ts 文件配置需要您在 packages/renderer/src/env.d.ts 中配置。以下配置项为增量配置，不要删除已经存在的 env.d.ts 文件配置。

// env.d.tsdeclare module '*.vue' {  import { DefineComponent } from 'vue'  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types  const component: DefineComponent  export default component}
declare module 'tsignaling/tsignaling-js' {  import TSignaling from 'tsignaling/tsignaling-js';  export default TSignaling;}
declare module 'tim-js-sdk' {  import TIM from 'tim-js-sdk';  export default TIM;}
declare const Aegis: any;

6. 配置中英文切换TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

// src/main.ts// 引入 locales/index.ts 文件，请确认引入路径是否正确import VueI18n from './TUIRoom/locales/index';
createApp(App)  .use(createPinia())  .use(VueI18n)  .mount('#app')  .$nextTick(window.removeLoading);

1. 安装依赖安装开发环境依赖

npm install sass sass-loader -S -D

安装生产环境依赖

npm install vue@^2.7 element-ui pinia trtc-electron-sdk tim-js-sdk tsignaling @tencentcloud/tuiroom-engine-electron vue-i18n@^8 vue-i18n-bridge -S

2. 注册 PiniaTUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。

import { createPinia, PiniaVuePlugin } from 'pinia';
Vue.use(PiniaVuePlugin);const pinia = createPinia();
new Vue({  pinia,  render: h => h(App),}).$mount('#app');

3. 配置 element-ui为了保证 element-ui 带 UI 组件能够正常显示样式，需要您在入口文件 src/main.ts 或src/main.js中注册 element-ui 组件并引用其样式文件。

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4. 配置中英文切换TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

import i18n from './TUIRoom/locales/';
Vue.use(i18n);

TUIRoom 默认支持环境为 Vue2 + Webpack + TS 环境，如果您想在Vu2 + Webpack + JS 环境中集成 TUIRoom 组件，您需要做如下配置。1. 配置 typescript 支持 TUIRoom 组件加载。

vue add typescript

配置 TS 开发环境的选项可参考图片2. 安装依赖安装开发环境依赖

npm install sass sass-loader -S -D

安装生产环境依赖

npm install vue@^2.7 element-ui pinia trtc-electron-sdk tim-js-sdk tsignaling @tencentcloud/tuiroom-engine-electron vue-i18n@^8 vue-i18n-bridge -S

3. 注册 PiniaTUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。

import { createPinia, PiniaVuePlugin } from 'pinia';
Vue.use(PiniaVuePlugin);const pinia = createPinia();
new Vue({  pinia,  render: h => h(App),}).$mount('#app');

4. 配置 element-ui为了保证 element-ui 带 UI 组件能够正常显示样式，需要您在入口文件 src/main.ts中注册 element-ui 组件并引用其样式文件。

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

5. 配置中英文切换TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

import i18n from './TUIRoom/locales/';
Vue.use(i18n);

步骤五：开发环境运行

Vue3 + Vite + TS 项目Vue2 + Webpack + TS 项目1. 执行开发环境命令

npm run dev

注意：因 TUIRoom 按需引入 element-plus 组件，会导致开发环境路由页面第一次加载时反应较慢，等待 element-plus 按需加载完成即可正常使用。element-plus 按需加载不会影响打包之后的页面加载。2. 体验 TUIRoom 组件功能1. 执行开发环境命令

npm run start

注意：Electron 默认监听端口号为 8080，若出现打包完成 UI 没有渲染的情况，可能是默认端口被占用，在main.electron.js 中修改对应端口号即可。2. 体验 TUIRoom 组件功能

步骤六：构建安装包、运行

Vue3 + Vite + TS 项目Vue2 + Webpack + TS 项目在命令行终端中，执行以下命令构建安装包，构建好的安装包位于 release 目录下，可以安装运行。

npm run build

在命令行终端中，执行 package.json 中对应的构建命令，构建好的安装包位于 bin 目录下，可以安装运行。注意：只能使用 Mac 电脑构建 Mac 安装包，使用 Windows 电脑构建 Windows 安装包, 暂不支持交叉编译。

其他文档

TUIRoomKitTUIRoomKit demo 快速跑通界面定制(TUIRoomKit)常见问题如果您在接入或使用过程有任何需要或者反馈，欢迎加入 TUIRoomKit 技术交流 QQ 群（群号：770645461）进行技术交流和问题反馈。

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

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

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

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