实时音视频
有奖：腾讯混元大模型征文大赛邀您参加！> HOT
文档中心>实时音视频>多人会议（含 UI）>快速接入（TUIRoomKit）>Electron (Windows&Mac)

Electron (Windows&Mac)

最近更新时间：2024-09-14 10:47:01

我的收藏

本页目录：

TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理，音视频控制，屏幕共享，成员管理，麦位管理，即时聊天，自定义布局切换等丰富的功能交互，同时支持中英文切换，一键换肤等能力。
本文介绍 TUIRoomKit (Electron) 的接入指引，助力您快速上线企业会议、在线教育、医疗问诊、在线巡视、远程定损等业务场景。




TUIRoomKit Demo 体验

您可以单击下载 Mac OS版 或 Windows版 体验 TUIRoomKit（Electron）更多功能。

环境准备

Node.js 版本：Node.js ≥ 16.19.1（推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
Electron 版本: Electron < 24.8.8
npm 包集成
Vue3 开发环境，集成 @tencentcloud/room-electron-vue3 NPM 包。
Vue2.7 开发环境：集成 @tencentcloud/roomkit-electron-vue2.7 NPM 包。
源码集成
Vue3 + TypeScript 开发环境：从 @tencentcloud/room-electron-vue3 NPM 包拷贝源码。
Vue2.7 + TypeScript 开发环境：从 @tencentcloud/roomkit-electron-vue2.7 NPM 包拷贝源码。
模版工程
Electron + vite + vue3 electron-vite-vue


集成 TUIRoomKit 组件

如果您没有 Vue 项目，可以前往 Github 下载 TUIRoomKit 代码，并参考代码仓库 README.md 文档跑通 TUIRoomKit Electron 示例工程。另外您如果需要在已有项目中进行集成，请按照以下步骤进行接入。
注意：
若您通过下载模版工程 electron-vite-vue 的方式来进行集成，您需要切换模版工程至 v1.0.0，可参考如下指令：
git clone https://github.com/electron-vite/electron-vite-vue.git 
cd electron-vite-vue
git checkout v1.0.0

步骤一：安装依赖

Vue3
Vue2
npm install @tencentcloud/roomkit-electron-vue3 pinia --save
# 注意此处要求 vue版本 >= 2.7.16，如安装失败请检查您的 vue 版本是否支持
npm install @tencentcloud/roomkit-electron-vue2.7 pinia

步骤二：项目工程配置

注册pinia：TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。
Vue3
Vue2
// src/main.ts 文件
import { createPinia } from 'pinia';

const app = createApp(App);
// 注册 pinia
app.use(createPinia()); 
app.mount('#app')
// src/main.ts 文件
import { createPinia, PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app');
配置 vite.config.ts：为了统一代码风格并在 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;
        `,
    }),
 ]
});

步骤三：引用 TUIRoomKit 组件

说明：
引入 ConferenceMainView 组件，组件默认处于 常驻模式（组件始终显示，内部不控制组件的显示与隐藏，若业务端不进行控制，则组件一直保持显示状态）。
Vue3
Vue2
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-electron-vue3';
</script>
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script>
import { ConferenceMainView } from '@tencentcloud/roomkit-electron-vue2.7';
export default {
  components: {
    ConferenceMainView,
  },
};
</script>

步骤四：登录 TUIRoomKit 组件

开启会议前需要调用 login 接口进行登录。获取 sdkAppId、userId、userSig 可参见 开通服务。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
conference.login({    
    sdkAppId: 0,  // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
    userId: '',   // 用户在您业务中的唯一标示 Id
    userSig: '',  // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
});
参数
类型
说明
userID
String
客户根据自己的业务自定义用户 ID，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
sdkAppID
int
在 实时音视频 TRTC 控制台 创建的音视频应用的唯一标识 SDKAppID。
secretKey
String
在 实时音视频 TRTC 控制台 创建的音视频应用的 SDKSecretKey。
userSig
String
一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。
说明：
开发环境：如果您正在本地开发调试阶段，可以采用本地 GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。

步骤五：发起新的会议

会议主持人可以通过调用 start 接口来发起一场新的会议，其他参会议者可以参见 步骤六 的描述，调用 join 接口加入该会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
const startConference = async () => {
    await conference.login({    
      sdkAppId: 0,  // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
      userId: '',   // 用户在您业务中的唯一标示 Id
      userSig: '',  // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
    });
    await conference.start('123456', {
      roomName: 'TestRoom',
      isSeatEnabled: false,
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
startConference()

步骤六：进入已有会议

参与者可以通过调用 join 接口，填写对应的 roomId 参数，来加入由会议主持人在 步骤五 中发起的会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-electron-vue2.7
import { conference } from '@tencentcloud/roomkit-electron-vue3';
const joinConference = async () => {
    await conference.login({    
      sdkAppId: 0,  // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
      userId: '',   // 用户在您业务中的唯一标示 Id
      userSig: '',  // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
    });
    await conference.join('123456', {
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
joinConference()

开发环境运行

1. 执行开发环境命令。（此处以 vue3 + vite 默认项目为例，不同项目 dev 指令可能不同，请根据您自己的项目进行调整）
npm run dev
注意：
运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。
2. 体验 TUIRoomKit 组件功能。

生产环境部署

项目进行打包
npm run build
说明：
以模板工程接入为例，执行上述打包命令之后，会在您的项目根目录下生成 release 文件夹，其中包含您所需要的对应安装包。

常见问题

若您在步骤一安装依赖时出现 vue 版本不匹配等问题，如何解决？

需要在package.json 文件中将vue版本固定为 3.3.13

如果您在运行阶段产生了app crash，如何解决？

原因可能是获取不到摄像头和麦克风的权限而引起的。 解决方案：
1. 请检查您的摄像头或麦克风设备使用是否正常，有无被其他应用占用。
2. 在 /packages/main/index.ts 中，注释掉checkAndApplyDevicePrivilege方法的调用，即可跳过设备权限的检查。

若您在运行阶段或打包阶段遇到如下图报错，如何解决？




需要在 tsconfig.json 文件中启用 allowJs 选项：
// tsconfig.json
{  
  "compilerOptions": {  
    "allowJs": true
    // ...其他选项
  }  
  // ...其他配置
}

若您在运行或打包阶段遇到如下图报错，如何解决？




需要您在 index.html 文件中进行如下增加如下内容：
// index.html
<head>
  ....
  <script>const exports = module.exports;</script>
<head>

其他文档

TUIRoomKit
TUIRoom Demo 快速跑通
设置昵称、头像
预定会议
界面定制 (TUIRoomKit)
常见问题

交流与反馈

您在接入或使用过程有任何需要或者反馈，欢迎加入 腾讯云实时音视频 TRTC 技术交流群 进行技术交流和问题反馈。
中国站
文档反馈
文档活动
message-icon联系我们
目录