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.
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:
// 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.
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
awaithandleCreateRoom();
})
// The host creates a room, this method is only called when creating a room
asyncfunctionhandleCreateRoom(){
// 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)
// The host creates a room, this method is only called when creating a room
asyncfunctionhandleCreateRoom(){
// 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)
// Regular members enter the room, this method is called when regular members enter the created room
asyncfunctionhandleEnterRoom(){
// 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.
// The host needs to initialize the TUIRoom component before creating a room
// Regular members need to initialize the TUIRoom component before entering a room
awaitthis.$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
awaitthis.handleCreateRoom();
},
methods:{
// The host creates a room, this method is only called when creating a room
asynchandleCreateRoom(){
// 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)
// Regular members enter the room, this method is called when regular members enter the created room
asynchandleEnterRoom(){
// 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)
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.
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
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.
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.
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.tsfile.
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.
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();
newVue({
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.
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();
newVue({
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.