Electron (Windows&Mac)

最近更新时间：2024-04-03 13:35:02
我的收藏
本页目录：

TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理、音视频控制、屏幕共享、成员管理、麦位管理、即时聊天、自定义布局切换等丰富的功能交互，同时支持中英文切换，一键换肤等能力。
﻿
﻿
﻿
您可以单击在线体验链接： Mac OS版 及 Windows版 下载体验 TUIRoomKit Electron 更多功能。
您也可以单击 Github 下载 TUIRoomKit 代码，并参考 TUIRoomKit Electron 示例工程快速跑通 文档跑通 TUIRoomKit Electron 示例工程。
如需在现有业务中集成 Electron 端 TUIRoomKit 组件，请参考本文档。
支持的平台
Windows（PC）
Mac
步骤一：开通服务
在使用 TUIRoomKit 发起会议前，您需要前往控制台开通 TUIRoomKit 专属的多人音视频互动服务，具体步骤请参见 开通服务。
步骤二：准备 Vue 工程代码
Vue3 + Vite + TS
Vue2 + Webpack +TS
1. 打开业务侧已有 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.git﻿
cd electron-vite-vue
git checkout v1.0.0
git switch -c TUIRoomKit-quick-start
npm install
npm 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 方法加入主持人已经创建好的房间。
<template>
  <room ref="TUIRoomRef"></room>
</template>
﻿
<script setup lang="ts">
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,
  }
  try {
    await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
  } catch (error: any) {
    alert('TUIRoomKit.createRoom error: ' + error.message);
  }
}
﻿
// 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用
async function handleEnterRoom() {
  // roomId 为用户进入的房间号, 要求 roomId 类型为 string
  // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)
  const roomId = '123456';
  const roomParam = {
    isOpenCamera: true,
    isOpenMicrophone: true,
  }
  try {
    await TUIRoomRef.value.enterRoom({ roomId, roomParam });
  } catch (error: any) {
    alert('TUIRoomKit.enterRoom error: ' + error.message);
  }
}
</script>
﻿
<style lang="scss">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
﻿
#app {
  width: 100%;
  height: 100%;
}
</style>
﻿
1. 复制 TUIRoomKit/Electron/vue2/src/TUIRoom 文件夹到已有项目 src/ 目录下。
2. 在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。
TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。
主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
注意：
在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。
<template>
  <div id="app">
    <room-container ref="TUIRoomRef"></room-container>
  </div>
</template>
﻿
<script>
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);
      }
    }
  },
};
﻿
</script>
﻿
<style lang="scss">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
﻿
#app {
  width: 100%;
  height: 100%;
}
</style>
参数说明
这里详细介绍一下 init 函数中所需要用到的几个关键参数：
SDKAppID：在 步骤一 中的第三步中您已经获取到，这里不再赘述。
UserID：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
UserSig：使用 步骤一 的第三步中获取的 SDKSecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。
注意：
在页面中复制以上代码之后，需要修改 TUIRoom 接口的参数为实际数据。
这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下：
SDKAppID 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。
UserSig 被错配成了加密密钥（SDKSecretKey），UserSig 是用 SDKSecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的，而不是直接把 SDKSecretKey 配置成 UserSig。
UserID 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。
Github 中的示例代码使用了 getBasicInfo 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SDKSecretKey 暴露在 Electron 应用的代码当中，这并不利于您后续升级和保护您的 SDKSecretKey，所以我们强烈建议您将 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 events mitt pinia trtc-electron-sdk tim-js-sdk tsignaling vue-i18n @tencentcloud/tuiroom-engine-electron --save
2. 注册 Pinia
TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 packages/renderer/src/main.ts 文件。
// src/main.ts 文件
import { createPinia } from 'pinia';
﻿
const app = createApp(App);
// 注册Pinia
createApp(App)
  .use(createPinia())
  .mount('#app')
  .$nextTick(window.removeLoading)
3. 引入 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;
     `
   }
 ),
 // ...
 ]
 // ...
});
4. env.d.ts 文件配置
env.d.ts 文件配置需要您在 packages/renderer/src/env.d.ts 中配置。以下配置项为增量配置，不要删除已经存在的 env.d.ts 文件配置。
// env.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  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;
5. 配置中英文切换
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 pinia trtc-electron-sdk tim-js-sdk tsignaling @tencentcloud/tuiroom-engine-electron vue-i18n@^8 vue-i18n-bridge -S
2. 注册 Pinia
TUIRoom 使用 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. 配置中英文切换
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 pinia trtc-electron-sdk tim-js-sdk tsignaling @tencentcloud/tuiroom-engine-electron vue-i18n@^8 vue-i18n-bridge -S
3.  注册 Pinia
TUIRoom 使用 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. 配置中英文切换
TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。
import i18n from './TUIRoom/locales/';
﻿
Vue.use(i18n);
步骤五：开发环境运行
Vue3 + Vite + TS 项目
Vue2 + Webpack + TS 项目
1. 执行开发环境命令
npm run dev
2. 体验 TUIRoom 组件功能
注意：
运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。
1. 执行开发环境命令
npm run start
注意：
Electron 默认监听端口号为 8080，若出现打包完成 UI 没有渲染的情况，可能是默认端口被占用，在main.electron.js 中修改对应端口号即可。
2. 体验 TUIRoom 组件功能
注意：
运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。
步骤六：构建安装包、运行
Vue3 + Vite + TS 项目
Vue2 + Webpack + TS 项目
在命令行终端中，执行以下命令构建安装包，构建好的安装包位于 release 目录下，可以安装运行。
npm run build
在命令行终端中，执行 package.json  中对应的构建命令，构建好的安装包位于 bin 目录下，可以安装运行。
注意：
只能使用 Mac 电脑构建 Mac 安装包，使用 Windows 电脑构建 Windows 安装包，暂不支持交叉编译。
常见问题
1. 运行时报错："does not provide an export named 'createBlock' "？
若按照上述步骤接入后，运行时出现以下错误，请您务必将 vite 版本固定在 3.0.0 以下，将 vue 版本固定在 3.4.9 以下。
﻿
﻿
﻿
原因是项目提供的 electron 工程模版支持的 vite 版本指定在3.0.0以下，但是 vue 的 3.4.9 及以上版本中的属性需要升级 vite 的版本来获取支持，这里已经向 vue 官方提了 issue，https://github.com/vuejs/core/issues/10177。
其他文档
﻿TUIRoomKit﻿
﻿TUIRoomKit demo 快速跑通﻿
﻿界面定制(TUIRoomKit)﻿
交流与反馈
您在接入或使用过程有任何需要或者反馈，欢迎加入 腾讯云通信官方社群 进行技术交流和问题反馈。
上一篇: uni-app (小程序) 下一篇: Flutter