tencent cloud

Tencent Real-Time Communication

Release Notes and Announcements
Release Notes
Recent Product Announcement
TRTC Live (TUILiveKit) Product Launch Announcement
TRTC Conference Official Editions Launched
The commercial version of Conference is coming soon
Terms and Conditions Applicable to $9.9 Starter Package
Rules for the "First Subscription $100 Discount" Promotion
Announcement on the Start of Beta Testing for Multi-person Audio and Video Conference
TRTC Call Official Editions Launched
License Required for Video Playback in New Version of LiteAV SDK
TRTC to Offer Monthly Packages
Product Introduction
Overview
Concepts
Features
Strengths
Use Cases
Performance Statistics
Tencent RTC Quickplay: Experience Ultimate Real-Time Audio and Video Interaction!
Purchase Guide
Billing Overview
Free Minutes
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
FAQs
Refund Instructions
User Tutorial
Free Demo
Call
Overview
Activate the Service
Run Demo
Integration
Offline Call Push
Conversational Chat
On-Cloud Recording
AI Noise Reduction
UI Customization
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
Release Notes
FAQs
Conference
Overview(TUIRoomKit)
Activate the Service (TUIRoomKit)
Run Demo(TUIRoomKit)
Integration(TUIRoomKit)
Screen Sharing (TUIRoomKit)
Schedule a meeting (TUIRoomKit)
In-meeting Call (TUIRoomKit)
UI Customization(TUIRoomKit)
Virtual Background (TUIRoomKit)
Conference Control (TUIRoomKit)
Cloud Recording (TUIRoomKit)
AI Noise Reduction (TUIRoomKit)
In-Conference Chat (TUIRoomKit)
Robot Streaming (TUIRoomKit)
Enhanced Features (TUIRoomKit)
Client APIs (TUIRoomKit)
Server APIs (TUIRoomKit)
FAQs (TUIRoomKit)
Error Code (TUIRoomKit)
SDK Update Log (TUIRoomKit)
Live
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Run Demo
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDK Download
API Examples
Usage Guidelines
API Reference Manual
Advanced Features
AI Integration
Overview
Configure MCP Server
Install Skills
Integration Guide
FAQ
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
Console Guide
Application Management
Package Management
Usage Statistics
Monitoring Dashboard
Development Assistance
Solution
Real-Time Chorus
FAQs
Migration Guide
Billing
Features
UserSig
Firewall Restrictions
How to Downsize Installation Package
Android and iOS
Web
Flutter
Electron
TRTCCalling for Web
Audio and Video Quality
Others
Legacy Documentation
RTC RoomEngine SDK(Old)
Integrating TUIRoom (Web)
Integrating TUIRoom (Android)
Integrating TUIRoom (iOS)
Integrating TUIRoom (Flutter)
Integrating TUIRoom (Electron)
TUIRoom APIs
On-Cloud Recording and Playback (Old)
RTC Analytics Monthly Packages (Previous Version)
Protocols and Policies
Compliance
Security White Paper
Notes on Information Security
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC Policy
Privacy Policy
Data Processing And Security Agreement
Glossary

Web&H5(Vue2/Vue3)

PDF
Focus Mode
Font Size
Last updated: 2024-12-26 15:23:25
This article will guide you through a quick integration of TUIRoomKit components. You will go through several key steps in less than 10 minutes and end up with a full user interface for multiplayer conferencing.




TUIRoomKit Demo Experience

You can visit our online TUIRoomKit demo to experience more features of TUIRoomKit.
You can also visit Github to download the TUIRoomKit code and refer to the README.md file 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.

Integrating TUIRoomKit Component

Note:
If you don't have a vue project, you can directly refer to the Run Sample Demo run through Github 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
Note:
TUIRoomKit package provides a pre-meeting preview component, an in-meeting component, and methods for starting meetings, joining meetings, and fine-tuning the interface. For more, see RoomKit API. If these APIs don't meet your business needs, you can refer to UIKit source code export for accessing the TUIRoomKit source code.

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: Import the TUIRoom 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,userSig, refer to the service activation.
import { conference } from '@tencentcloud/roomkit-web-vue3';
await conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
Parameter
Type
Note
userID
String
Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
SDKAppID
Number
The unique identifier for the audio and video application created in the Tencent RTC Console.
SDKSecretKey
String
The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
userSig
String
A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.
Explanation of userSig:
Development environment: If you are running a demo locally and developing debugging, you can use the genTestUserSig (Refer to Step 3.2) function in the debug file to generate a `userSig`. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
Production environment: If your project is going live, please use the Server-side Generation of UserSig method.

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.
// Note the package name, if you are using the vue2 version change the package name to @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
const startConference = async () => {
await conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
await conference.start('123456', {
roomName: 'TestRoom',
isSeatEnabled: false,
isOpenCamera: false,
isOpenMicrophone: false,
});
}
startConference()

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.
// Note the package name, if you are using the vue2 version change the package name to @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
const joinConference = async () => {
await conference.login({
sdkAppId: 0, // Replace with your sdkAppId
userId: '', // Replace with your userId
userSig: '', // Replace with your userSig
});
await conference.join('123456', {
isOpenCamera: false,
isOpenMicrophone: false,
});
}
joinConference()

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.
Note:
The production environment requires the use of an HTTPS domain name.

Other documents

Communication and feedback

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

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback