Menu

Web

Last updated: 2023-09-25 10:48:39Download PDF
TUIRoomKit is a multi-person audio and video UI component launched by Tencent Cloud. The component provides rich functional interactions such as room management, audio and video control, screen sharing, member management, microphone management, instant messaging, custom layout switching, etc., and supports Chinese and English switching, one-click skin change, and other capabilities.
This article introduces the access guide of TUIRoomKit(Web), helping you quickly launch business scenarios such as enterprise meetings, online education, medical consultations, online inspections, and remote loss assessments.



You can click on the TUIRoomKit online experience link to experience more features of TUIRoomKit. You can click on Github/Gitee to download the TUIRoomKit code and refer to the README.md document in the code repository to run the TUIRoomKit Web sample project.


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

If you already have a Vue project, you can skip this step.
If you don't have a Vue project, you can choose one of the following ways to generate a template project.
Generate Vue3 + Vite + TS Template Project
Generate Vue3 + Webpack + TS Template Project
Generate Vue2 + Webpack + JS Template Project
# npm 6.x
npm create vite@latest TUIRoom-demo --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest TUIRoom-demo -- --template vue-ts

# yarn
yarn create vite TUIRoom-demo --template vue-ts

# pnpm
pnpm create vite TUIRoom-demo --template vue-ts
Note:
Taking the creation method of npm6.x as an example, the operation flowchart of generating the template project is as follows: (The marked highlight area needs to be input or selected)



After successfully generating the Vue3 + Vite + TS template project, execute the following script:
cd TUIRoom-demo
npm install
npm run dev
// Install vue-cli, note that Vue CLI 4.x requires Node.js to be v10 or above
npm install -g @vue/cli
// Create Vue3 + Webpack + TS Template Project
vue create tuiroomkit-demo
Note:
During the process of executing the generate template project script, choose the template generation method as Manually select features, and refer to the reference image for other configuration options.



After successfully generating the Vue3 + Webpack + TS template project, execute the following script:
cd tuiroomkit-demo
npm run serve
// Install vue-cli, note that Vue CLI 4.x requires Node.js to be v10 or above
npm install -g @vue/cli
// Create Vue2 + Webpack + Js Template Project
vue create tuiroomkit-demo
Note:
During the process of executing the generate template project script, choose the template generation method as Default ([Vue 2] babel, eslint).



After successfully generating the Vue2 + Webpack + JS template project, execute the following script:
cd tuiroomkit-demo
npm run serve

Step 3: Download and reference TUIRoom component

1. Download TUIRoom component code Click on Github, clone or download the TUIRoomKit repository code.
2. Reference TUIRoom component
Introducing TUIRoom Component in Vue3 Project
Introducing TUIRoom Component in Vue2 Project
Copy the TUIRoomKit/Web/vue3/src/TUIRoom folder to the existing project src/ directory,



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 in the page, you need to modify the parameters of the TUIRoom interface to the actual data.
<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,
}
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%;
* {
box-sizing: border-box;
}
}
</style>

Copy the TUIRoomKit/Web/vue2/src/TUIRoom folder to the existing project src/ directory,



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 in 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>

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 Vue3 + Webpack + TS Development Environment
Setting up Vue2 + Webpack + TS Development Environment
1. Install Dependencies
Install Development Environment Dependencies:
npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D
Install Production Environment Dependencies:
npm install element-plus events mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n -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.
// src/main.ts file
import { createPinia } from 'pinia';

const app = createApp(App);
// Register pinia
app.use(createPinia());
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.
// src/main.ts
// Import locales/index.ts file,Please confirm whether the import path is correct
import VueI18n from './TUIRoom/locales/index';

app.use(VueI18n);
4. 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 vite.config.ts.
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';

export default defineConfig({
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: 'sass',
})],
}),
],
css: {
preprocessorOptions: {
scss: {
// ...
additionalData: `
@use "./src/TUIRoom/assets/style/element.scss" as *;
`,
},
},
},
});
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 src/main.ts.
// src/main.ts
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';
1. Install Dependencies
Install Development Environment Dependencies:
npm install sass sass-loader typescript unplugin-auto-import unplugin-vue-components unplugin-element-plus -S -D
Install Production Environment Dependencies:
npm install element-plus mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n -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.
// src/main.ts file
import { createPinia } from 'pinia';

const app = createApp(App);
// Register pinia
app.use(createPinia());
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.
// src/main.ts
// Import locales/index.ts file,Please confirm whether the import path is correct
import VueI18n from './TUIRoom/locales/index';

app.use(VueI18n);
4. 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/vue.config.ts.
Note
The following configuration items are incremental configurations, do not delete the existing Vite configuration items.
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const ElementPlus = require('unplugin-element-plus/webpack')

module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
scss: {
additionalData: '@use "./src/TUIRoom/assets/style/element.scss" as *;'
}
}
},
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
}),
// Customize theme color when on-demand import
ElementPlus({
useSource: true
})
]
}
})
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 src/main.ts.
// src/main.ts
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';
5. Configure vue.config.js to resolve the error: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it
// vue.config.js
module.exports = defineConfig({
// ...
configureWebpack: {
// ...
resolve: {
fallback: {
url: false,
path: false,
fs: false,
crypto: false
}
}
}
})
1. Configure TypeScript, support TUIRoom Component loading
vue add typescript
Refer to the image for options to configure the TS development environment:



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 @tencentcloud/tuiroom-engine-js 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 or src/main.jsfile.
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 Element-UI with UI components can display styles normally, 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);
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);
6. Configure the TS declaration file Add the following configuration in the src/shims-vue.d.ts file:
declare module '*'
7. Configure vue.config.js, solve the error of BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
// vue.config.j
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
// ...
configureWebpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
url: false,
path: false,
fs: false,
crypto: false,
};
},
});

Step 5: Run in the development environment

Execute the development environment running script in the console, open the page containing TUIRoomKit with a browser, and you can use the TUIRoomKit component in the page.
Vue3 + Vite + TS Project
Vue3 + Webpack + TS Project
Vue2 + Webapck + TS Project
1. Execute development environment command.
npm run dev
2. Open the page:http://localhost:3000/in the browser.
Note
Due to the on-demand import of element-plus components by TUIRoom, the response of the routing page in the development environment will be slow when it is loaded for the first time. Wait for the element-plus on-demand loading to complete, and it can be used normally. The on-demand loading of element-plus will not affect the loading of the page after packaging.

1. Execute development environment command
npm run serve
2. Open the page:http://localhost:8080/in the browser.
Note
If there are eslint errors in the src/TUIRoom directory during the running process, you can add the /src/TUIRoom/ path to the .eslintignore file to shield the eslint check.
3. Experience the functions of the TUIRoom component
1. Execute development environment command
npm run serve
2. Open the page:http://localhost:8080/in the browser.
Note
If there are eslint errors in the src/TUIRoom directory during the running process, you can add the /src/TUIRoom/ path to the .eslintignore file to shield the eslint check.

After the project starts, click on Invite Members, and experience multi-user room interaction locally through the room link and client-side scheme invitation method.



Start your first meeting.




Step 6: Deploy in the production environment

1. Package dist files
npm run build
Description
Please check the package.json file for the actual packaging command
2. Deploy dist files to the server
The production environment requires the use of an HTTPS domain name:




Suggestions and Feedback

If you have any suggestions or feedback, please contact colleenyu@tencent.com.