Electron

Last updated: 2023-09-25 10:47:28Download PDF
This article will introduce how to complete the integration of the TUIRoomKit Component in the shortest time. By following this document, you will complete the following key steps within an hour and finally obtain a Real-time Conference SDK with a complete UI interface. This includes Member Management, Screen Sharing, chat, Free Speech, Request to Speak mode, and other functions, as shown in the figure below:
﻿
﻿
﻿
﻿
﻿
﻿
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
TUIRoomKit is currently in the beta testing stage, and the SDK capabilities are available for free for a limited time. For more information on product beta testing, please refer to the announcement about the audio/video conference Conference beta testing.
First, please Create an application in the TRTC Console and record the SDKAppID and SecretKey parameters. These parameters will be used in the subsequent integration process. The location of the application creation and parameters is shown in the following figure:
﻿
﻿
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: '',
            // For local development and debugging, you can quickly generate userSig on the https://console.cloud.tencent.com/trtc/usersigtool page. Note that userSig and userId have a 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: '',
        })
         // 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,
        };
        const createRoomInfo = {
            roomId,
            roomName: 'User defined room name' || roomId,
            roomMode,
            roomParam
        };
        await TUIRoomRef.value.createRoom(createRoomInfo);
    }
	// 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' (Speak after taking seat mode), the default is 'FreeToSpeak', 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 mic and camera by default, and the default media device 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);
    }
    
    // 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,
        };
        const enterRoomInfo = {
            roomId,
            roomParam
        };
        await TUIRoomRef.value.enterRoom(enterRoomInfo);
</script>
﻿
<style>
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: '',
      // For local development and debugging, you can quickly generate userSig on the https://console.cloud.tencent.com/trtc/usersigtool page. Note that userSig and userId have a 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 Secret Key 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 temporary usable UserSig through the UserSig generation function at the top of the Console overview page.
﻿
﻿
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 (SecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SecretKey, not by directly configuring the SecretKey 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 SecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SecretKey. 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 element-plus 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. Configure element-plus Component import on demand
TUIRoom uses element-plus UI components, to avoid importing all element-plus components, you need to configure element-plus components to be loaded on demand in packages/renderer/vite.config.ts, you can refer to packages/renderer/vite.config.ts file.
Note:
 The following configuration items are incremental configurations, do not delete the existing Vite configuration items.
// vite.config.ts
import 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: [],
   },
 }
 // ...
});
At the same time, to ensure that the element-plus UI components can display styles normally, you need to load the element-plus component styles in the entry file packages/renderer/src/main.ts.
// src/main.ts
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';
4. 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;
     `
   }
 ),
 // ...
 ]
 // ...
});
5. 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;
6. 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 element-ui 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 element-ui
To ensure that the element-ui with UI Component can display properly, you need to register the element-ui component and reference its style file in the entry file src/main.ts or src/main.js.
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
﻿
Vue.use(ElementUI);
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);
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 element-ui 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 element-ui
To ensure that the element-ui with UI Component can display properly, you need to register the element-ui component and reference its style file in the entry file src/main.ts .
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
﻿
Vue.use(ElementUI);
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.
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
Note:
Because TUIRoom imports element-plus components on demand, it will lead to a slow response when the routing page is first loaded in the development environment. Wait for the element-plus to finish loading on demand, and it can be used normally. The on-demand loading of element-plus will not affect the loading of the page after packaging.
2. Experience the TUIRoom Component functions
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
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.
Suggestions and Feedback
If you have any suggestions or feedback, please contact colleenyu@tencent.com.