Tencent Cloud

Recent Pages

Electron

Last updated: 2024-04-12 11:29:03
TUIRoomKit is a multiplayer audio/video UI component launched by Tencent Cloud. The component provides room management, audio/video control, screen sharing, member management, mike management, live chat, custom layout switching and other rich functional interactions, as well as support for Chinese and English switching, one-click skinning and other capabilities.
﻿
﻿
﻿
You can click on the Online Experience link: Mac OS Version and Windows Version to download and experience more features of TUIRoomKit Electron.
You can also click on Github to download the TUIRoomKit code and refer to the TUIRoomKit Electron sample project and run the TUIRoomKit Electron sample project.
If you need to integrate the Electron-side TUIRoomKit Component into your existing business, please refer to this document.
Supported Platforms
Windows（PC）
Mac
Step 1: Activate the service
Before initiating a meeting with TUIRoomKit, you need to activate the exclusive multi-person audio and video interaction service for TUIRoomKit on the console. For specific steps, please refer to Activate Service.
Step 2: Prepare Vue Project Code
Vue3 + Vite + TS
Vue2 + Webpack +TS
1. Open the existing Electron + Vue3 + TS project on the business side. If there is no Electron + Vue3 + TS project, you can generate an Electron + Vue3 + TS template project through this template Github, with a nodejs version greater than 14.17.0.
Note:
The integration steps described in this document are based on the electron-vite-vue template project version 1.0.0.
The latest version of the electron-vite-vue template project has adjusted the directory structure. If you need to use the latest version, you can refer to this document to adjust the directory and configuration yourself.
2. After cloning the template project, execute the following Script:
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
// Install vue-cli, note that Vue CLI 4.x requires Node.js to be v10 or higher
npm install -g @vue/cli
// Create a Vue2 + Webpack + TS Template Project
vue create tuiroomkit-demo
Note:
During the process of executing the template project generation script, select Manually select features for the template generation method, and refer to the image for other configuration options.
﻿
﻿
﻿
After successfully generating the Vue2 + Webpack + TS Template Project, refer to the Electron UI-less integration document to integrate Electron into the template project.
Note:
Since the TUIRoom Component has already introduced trtc-electron-sdk, you can ignorethis step when referring to the Electron UI-less integration document.
﻿
﻿
﻿
﻿
Step 3: Download and Reference TUIRoomkit Component
1. Download TUIRoom Component code
Click Github, clone or download the TUIRoomKit repository code.
2. Reference TUIRoom Component
Introducing TUIRoom Component in Vue3 Project
Introducing TUIRoom Component in Vue2 Project
1. Copy the TUIRoomKit/Electron/vue3/packages/renderer/src/TUIRoom folder to the existing project packages/renderer/src/ directory, and copy the TUIRoomKit/Electron/vue3/packages/renderer/index.html folder to the existing project packages/renderer/ directory.
2. Reference the TUIRoom Component in the page. For example, import the TUIRoom Component in the App.vue component.
The TUIRoom Component divides users into Host and Regular Member roles. The Component provides 'init', createRoom, and enterRoom methods externally.
Both the Host and Regular Members can initialize the application and user data to the TUIRoom Component through the init method, the Host can create and join a Room through the createRoom method, and Regular Members can join a Room created by the Host through the enterRoom method.
<template>
  <room ref="TUIRoomRef"></room>
</template>
﻿
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';
// Get the TUIRoom Component element for calling TUIRoom Component methods
const TUIRoomRef = ref();
﻿
onMounted(async () => {
  // Initialize TUIRoom Component
  // The host needs to initialize the TUIRoom Component before creating a room
  // Ordinary members need to initialize the TUIRoom Component before entering a room
  await TUIRoomRef.value.init({
    // Get sdkAppId, please refer to Step 1
    sdkAppId: 0,
    // The unique identifier of the user in your business
    userId: '',
    // Local development and debugging can quickly generate userSig on https://console.trtc.io/usersig page, note that userSig and userId are one-to-one correspondence.
    userSig: '',
    // The nickname used by the user in your business
    userName: '',
    // The avatar URL used by the user in your business
    avatarUrl: '',
    // Skin theme colours that users need in your business and whether or not switching theme skins is supported
    theme: {
      defaultTheme: 'black',
      isSupportSwitchTheme: true
     }
  })
  // By default, create a room. In actual access, you can choose to execute the handleCreateRoom method as needed
  await handleCreateRoom();
})
﻿
// The host creates a room, this method is only called when creating a room
async function handleCreateRoom() {
  // roomId is the room number entered by the user, and roomId is required to be of type string
  // roomMode includes 'FreeToSpeak' (Free-to-speak mode) and 'SpeakAfterTakingSeat' (On-stage speaking mode), the default is 'FreeToSpeak', please note that only free-to-speak mode is currently supported
  // roomParam specifies the default behavior of the user when entering the room (whether to turn on the camera by default, whether to turn on the mic by default, and the default media device 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);
  }
}
﻿
// Regular members enter the room, this method is called when regular members enter the created room
async function handleEnterRoom() {
  // roomId is the room number entered by the user, and roomId is required to be of type number
  // roomParam specifies the default behavior of the user when entering the room (whether to turn on the mic and camera by default, and the default media device 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. Copy the TUIRoomKit/Electron/vue2/src/TUIRoom folder to the existing project src/ directory.
2. Reference the TUIRoom Component in the page. For example, import the TUIRoom Component in the App.vue component.
The TUIRoom Component divides users into Host and Regular Member roles. The Component provides init, createRoom, and enterRoom methods externally.
Both the Host and Regular Members can initialize the application and user data to the TUIRoom Component through the init method, the Host can create and join a Room through the createRoom method, and Regular Members can join a Room created by the Host through the enterRoom method.
Note:
After copying the following code to the page, you need to modify the parameters of the TUIRoom interface to the actual data.
<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() {
    // Initialize TUIRoom Component
    // The host needs to initialize the TUIRoom component before creating a room
    // Regular members need to initialize the TUIRoom component before entering a room
    await this.$refs.TUIRoomRef.init({
      // Get sdkAppId, please refer to Step 1
      sdkAppId: 0,
      // User unique identifier in your business
      userId: '',
      // Local development and debugging can quickly generate userSig on https://console.trtc.io/usersig page, note that userSig and userId are one-to-one correspondence.
      userSig: '',
      // The nickname used by the user in your business
      userName: '',
      // The avatar link used by the user in your business
      avatarUrl: '',
    });
    // By default, create a room, and actually access it according to the needs of the handleCreateRoom method
    await this.handleCreateRoom();
  },
  methods: {
    // The host creates a room, this method is only called when creating a room
    async handleCreateRoom() {
      // roomId is the room number entered by the user, and roomId is required to be of type string
      // roomMode includes 'FreeToSpeak' (Free-to-speak mode) and 'SpeakAfterTakingSeat' (On-stage speaking mode), the default is 'FreeToSpeak', please note that only free-to-speak mode is currently supported
      // roomParam specifies the default behavior of the user when entering the room (whether to turn on the camera by default, whether to turn on the mic by default, and the default media device 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);
      }
    },
    // Regular members enter the room, this method is called when regular members enter the created room
    async handleEnterRoom() {
      // roomId is the room number entered by the user, and roomId is required to be of type string
      // roomParam specifies the default behavior of the user when entering the room (whether to turn on the camera by default, whether to turn on the mic by default, and the default media device 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%;
  * {
    box-sizing: border-box;
  }
}
</style>
Parameter Description
Here is a detailed introduction to the key parameters used in the login function:
SDKAppID：You have already obtained it in Step 1, so it will not be repeated here.
UserID：The ID of the current user, string type, only allows to contain English letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
UserSig：Encrypt the SDKAppID, UserID, etc. with the SDKSecretKey obtained in Step 1 to get the UserSig, which is a ticket for authorization and is used for Tencent Cloud to recognize whether the current user can use the TRTC service. You can create a temporarily available UserSig through the UserSig Tools through the project sidebar in the console.
﻿
﻿
﻿
For more information, please refer to the UserSig related.
Note:
This step is also the step with the most feedback from developers we have received so far. Common problems are as follows:
SDKAppID is set incorrectly. Please use the SDKAppID of the international site correctly, otherwise, you will not be able to access it.
UserSig is misconfigured as an encryption key (SDKSecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SDKSecretKey, not by directly configuring the SDKSecretKey as UserSig.
UserID is set to simple strings like "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, simple UserIDs like "1", "123", "111" are easily occupied by your colleagues, causing login failure. Therefore, we recommend that you set some UserIDs with high identifiability when debugging.
The sample code in Github uses the genTestUserSig function to calculate UserSig locally to quickly get you through the current access process. However, this solution exposes your SDKSecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SDKSecretKey. Therefore, we strongly recommend that you put the calculation logic of UserSig on the server side and have the app request the real-time calculated UserSig from your server every time it uses the TUIRoomKit Component.
Step 4: Configure the Development Environment
After the TUIRoom Component is introduced, in order to ensure that the project can run normally, the following configurations need to be made:
Setting up Vue3 + Vite + TS Development Environment
Setting up Vue2 + Webpack + TS Development Environment
Setting up Vue2 + Webpack + JS Development Environment
1. Install Dependencies
Install Development Environment Dependencies:
npm install sass typescript unplugin-auto-import unplugin-vue-components --save-dev
Install Production Environment Dependencies:
npm install events mitt pinia trtc-electron-sdk tim-js-sdk tsignaling vue-i18n @tencentcloud/tuiroom-engine-electron --save
2. Register Pinia
TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the packages/renderer/src/main.ts file.
// src/main.ts file
import { createPinia } from 'pinia';
﻿
const app = createApp(App);
// Register Pinia
createApp(App)
  .use(createPinia())
  .mount('#app')
  .$nextTick(window.removeLoading)
3. Import trtc-electron-sdk
In order to import trtc-electron-sdk in the UI layer using the import method, to unify the code style, otherwise, it must be imported using the require method, you need to configure it in packages/renderer/vite.config.ts. Replace the content in resolve with the following configuration items, you can refer to packages/renderer/vite.config.ts file.
// 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 File Configuration
env.d.ts file configuration needs to be configured in packages/renderer/src/env.d.ts. The following configuration items are incremental configurations, do not delete the existing env.d.ts file configuration.
// 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. Configure Chinese-English language switching
TUIRoom currently supports Chinese-English language switching, you need to register the i18n instance in the main.ts file.
// src/main.ts
// Import locales/index.ts file，Please confirm whether the import path is correct
import VueI18n from './TUIRoom/locales/index';
﻿
createApp(App)
  .use(createPinia())
  .use(VueI18n)
  .mount('#app')
  .$nextTick(window.removeLoading);
1. Install Dependencies
Install Development Environment Dependencies
npm install sass sass-loader -S -D
Install Production Environment Dependencies
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. Register Pinia
TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
import { createPinia, PiniaVuePlugin } from 'pinia';
﻿
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
﻿
new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app');
3. Configure Chinese-English language switching
TUIRoom currently supports Chinese-English language switching, you need to register the i18n instance in the main.ts file.
import i18n from './TUIRoom/locales/';
﻿
Vue.use(i18n);
TUIRoom's default support environment is Vue2 + Webpack + TS. If you want to integrate TUIRoom Component in a Vue2 + Webpack + JS environment, you need to do the following setup.
1. Set up typescript to support TUIRoom Component loading.
vue add typescript
Options for setting up the TS development environment can be referred to the image.
﻿
﻿
2. Install Dependencies
Install Development Environment Dependencies
npm install sass sass-loader -S -D
Install Production Environment Dependencies
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.  Register Pinia
TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
import { createPinia, PiniaVuePlugin } from 'pinia';
﻿
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
﻿
new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app');
4. Configure Chinese-English language switching
TUIRoom currently supports Chinese-English language switching, you need to register the i18n instance in the main.ts file.
import i18n from './TUIRoom/locales/';
﻿
Vue.use(i18n);
Step 5: Run the development environment
Vue3 + Vite + TS Project
Vue2 + Webpack + TS Project
1. Execute the development environment command
npm run dev
2. Experience the TUIRoom Component functions
Note：
If there are eslint errors in src/TUIRoom directory during runtime, you can add /src/TUIRoom/ path to block eslint checking in .eslintignore file.
1. Execute the development environment command
npm run start
Note:
Electron's default listening port number is 8080. If the UI is not rendered after packaging, it may be because the default port is occupied. Modify the corresponding port number in main.electron.js.
2. Experience the TUIRoom Component functions
Note：
If there are eslint errors in src/TUIRoom directory during runtime, you can add /src/TUIRoom/ path to block eslint checking in .eslintignore file.
Step 6: Build the installation package and run
Vue3 + Vite + TS Project
Vue2 + Webpack + TS Project
In the command line terminal, execute the following command to build the installation package. The built installation package is located in the release directory and can be installed and run.
npm run build
In the command line terminal, execute the corresponding build command in package.json. The built installation package is located in the bin directory and can be installed and run.
Note:
Only Mac computers can build Mac installation packages, and Windows computers can build Windows installation packages. Cross-compilation is temporarily not supported.
Common Problems
1. Running Times Error："does not provide an export named 'createBlock' "？
If you get the following error when running after following the above steps to access, please make sure you fix the Vite version below 3.0.0 and the Vue version below 3.4.9.
﻿
﻿
﻿
The reason is that the version of vite supported by the electron project template provided by the project is specified to be under 3.0.0, but the attributes in vue version 3.4.9 and above need to be upgraded in order to get the support, and an issue has been raised with the vue official here.。
Suggestions and Feedback
If you have any suggestions or feedback, please contact info_rtc@tencent.com.