Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Conference
Overview
  • Web
    • Run Sample Demo
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Android
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Electron
    • Run Sample Demo
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine Defines
    • FAQs
  • Flutter
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • TRTC Conference Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • Error Code
Conference

Integration

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 chat, and custom layout switching. It also supports Chinese and English switching, one-click skin changing, and other capabilities.
This article introduces the access guide for TUIRoomKit (Web & H5) to help you quickly launch business scenarios such as enterprise meetings, online education, medical consultations, online inspections, and remote loss assessment.




TUIRoomKit Demo Experience

You can click on the TUIRoomKit online experience link to explore more features of TUIRoomKit.
You can click on Github to download the TUIRoomKit code, and follow the instructions in the README.md document of the code repository to run the TUIRoomKit Web sample project.

Environment Preparation

Node.js version: Node.js ≥ 16.19.1 (It is recommended to use the official LTS version, and the npm version should match the node version).
Modern browser, supporting WebRTC APIs.
npm package integration
Vue3 development environment: integrating @tencentcloud/room-uikit-vue3 NPM package.
Vue3 development environment: integrating @tencentcloud/roomkit-web-vue2.7 NPM package.
Source code integration
Vue3 + TypeScript development environment: copy the source code from the @tencentcloud/room-uikit-vue3 NPM package.
Vue2.7 + TypeScript development environment: copy the source code from the @tencentcloud/roomkit-web-vue2.7 NPM package.

Integrating TUIRoomKit Component

If you don't have a Vue project, you can go to Github to download the TUIRoomKit code and follow the instructions in the README.md document of the code repository to run the TUIRoomKit Web sample project.
If you need to integrate it into an existing project, please follow the steps below for integration.

Step 1: Install Dependencies

Vue3
Vue2
npm install @tencentcloud/roomkit-web-vue3 pinia --save
# Please note that the required Vue version is >= 2.7.16. If the installation fails,
# please check if your Vue version is supported.
npm install @tencentcloud/roomkit-web-vue2.7 pinia

Step 2: Project Engineering Configuration

Register Pinia: TUIRoom uses Pinia for room data management, and you need to register Pinia in the project entry file. The project entry file is src/main.ts.
Vue3
Vue2
// src/main.ts
import { createPinia } from 'pinia';

const app = createApp(App);
// register pinia
app.use(createPinia());
app.mount('#app')
// src/main.ts
import { createPinia, PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
pinia,
render: h => h(App),
}).$mount('#app');

Step 3: Reference TUIRoomKit Component

Note:
Import the ConferenceMainView component, which is by default in the permanent mode (the component is always displayed, and its display and hiding are not controlled internally. If the business end does not control it, the component will always remain displayed).
Vue3
Vue2
<template>
<ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
</script>
<template>
<ConferenceMainView></ConferenceMainView>
</template>
<script>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue2.7';
export default {
components: {
ConferenceMainView,
},
};
</script>

Step 4: Logging into the TUIRoomKit Component

Before initiating a meeting, it is necessary to invoke the login interface for authentication. To obtain the sdkAppId, userId, and userSig, refer to the service activation.
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.login({
sdkAppId: 0,
userId: '',
userSig: '',
});
Parameter Explanation:
sdkAppId: Acquired in the final step of service activation.
userId: The current user's ID, a string type, allowing only English letters (a-z, A-Z), numbers (0-9), hyphens (-), and underscores (_).
userSig: Obtained by encrypting information such as SDKAppID and UserID with the SDKSecretKey retrieved during service activation. UserSig is an authentication ticket used by Tencent Cloud to verify if the current user can access TRTC services.You can generate a temporarily available UserSig through the Auxiliary Tool in the console.
For more information, refer to the guide on 'How to Calculate and Utilize UserSig.'
Note:
This step is also the step that we have received the most feedback from developers so far. Frequently asked questions are as follows:
The sdkAppId setting is wrong. The SDKAppID of domestic sites is generally a 10-digit integer starting with 140.
UserSig was mismatched to the encryption key (SecretKey). UserSig is obtained by using SecretKey to encrypt information such as SDKAppID, UserID, and expiration time, instead of directly configuring SecretKey to UserSig.
userId is set to simple strings such as "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, when multiple people collaborate in development, the form is like "1", "123", "111" "Such a UserID can easily be occupied by your colleagues, causing login failure. Therefore, we recommend that you set some highly identifiable UserIDs during debugging.
The sample code in Github uses the genTestUserSig function to calculate UserSig locally to allow you to run through the current access process faster, but this solution will expose your SecretKey in the code, which is not conducive to your subsequent upgrades and protection. Your SecretKey, so we strongly recommend that you put the calculation logic of UserSig on the server side, and request the real-time calculated UserSig from your server every time you use the TUIRoomKit component.

Step 5: Initiate a new meeting

The conference host can initiate a new conference by calling the start interface. Other participants can refer to the description in step 6 and call the join interface to join the conference.
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.start('123456', {
roomName: 'TestRoom',
isSeatEnabled: false,
isOpenCamera: false,
isOpenMicrophone: false,
});

Step 6: Enter an existing meeting

Participants can join the conference initiated by the conference host in step 5 by calling the join interface and filling in the corresponding roomId parameter.
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.join('123456', {
isOpenCamera: false,
isOpenMicrophone: false,
});

Development environment running

1. Execute the development environment command. (Here we take the vue3 + vite default project as an example. The dev instructions of different projects may be different. Please adjust according to your own project)
npm run dev
2. According to the console prompts, open the page in the browser, such as: http://localhost:3000/.
3. Experience the TUIRoomKit component functions.

Production environment deployment

1. Package the dist file.
npm run build
2. Deploy the dist file to the server.

Other documents

Communication and feedback

If you have any needs or feedback, you can contact: info_rtc@tencent.com.