Feedback
Run Sample Code

TUIRoomKit is a UI solution for Audio/Video meeting rooms developed by TRTC. This guide walks you through running the TUIRoomKit demo project and exploring its core features, including pre-meeting checks, multi-user rooms, screen sharing, participant management, and virtual backgrounds.
Feature Showcase
Pre-Meeting Preparation
﻿
Multi-Party Conference
﻿
H5 Support
﻿
Prerequisites
Activate the Service
See Activate the Service to obtain the TUIRoomKit trial version and retrieve your SDKAppID and SDKSecretKey.
SDKAppID: Application identifier. TRTC uses SDKAppID for billing statistics.
SDKSecretKey: Application secret, used to initialize secret information in the configuration file.
Environment Preparation
Node.js: Version 18.19.1 or higher (official LTS recommended).
Modern Browser: A browser supporting WebRTC APIs.
Devices: Camera, microphone, and speakers.
Instructions
Step 1: Download the Source Code
Clone the project repository from GitHub to your local machine.
git clone https://github.com/Tencent-RTC/TUIRoomKit.git --depth=1
Step 2: Enter the Project Root Directory
cd TUIRoomKit/Web/example/vite-vue3-ts
Step 3: Install Dependencies
Install all required dependencies in the project root directory.
npm
pnpm
yarn
npm install
pnpm install
yarn
Step 4: Configure Application Information
Open the TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js configuration file in your project directory. Enter the SDKAppID and SDKSecretKey you obtained from the TRTC Console into the corresponding variables.
﻿
Caution:
In this demo, authentication is handled by setting SDKSecretKey in the client code. However, SDKSecretKey can be easily reverse-engineered and compromised. If leaked, attackers can steal your TRTC traffic. This approach is only suitable for local demo runs and feature debugging.
For production environments, generate UserSig on your server. When UserSig is required, your app should request a dynamic UserSig from your business server for authentication. For details, see How to calculate UserSig in production.
Step 5: Start the Project
Start the development server using one of the following commands.
npm
pnpm
yarn
npm run dev
pnpm run dev
yarn run dev
Once the server starts successfully, your browser will automatically open the debug address (typically http://localhost:5173). After entering your user ID and logging in, you'll see the conference interface as shown below:
﻿
Explore Core Features
The TUIRoomKit demo project delivers a full-featured Audio/Video conference experience. The following are the main meeting features supported in TUIRoomKit (Vue3):
Pre-Meeting Check: Preview your camera feed and test microphone volume before joining a meeting.
﻿
Create/Join Room: Use two separate clients to join the same room ID and experience multi-user conferencing.
﻿
Screen Sharing: Share any screen content to enable remote presentations and collaborative scenarios.
﻿
Conference Layout Management: Switch dynamically between grid view and speaker mode to adapt to different screen sizes and interaction needs.
﻿
Participant Management: View the participant list. Room hosts and administrators can mute or unmute members, remove participants, and perform other management actions.
﻿
Chat Interaction: Exchange real-time text messages between participants during the meeting.
﻿
Virtual Background: Apply blur effects to your video background.
﻿
In-Meeting Call: Invite specific users to join the meeting during an ongoing session. The user list defaults to your contact list. To add contacts, see Add Friend (REST API).
﻿
Theme Customization: TUIRoomKit components support CSS variable configuration, making it easy to customize brand colors and UI styles.
﻿
FAQs
TUIRoomKit works as expected during local development, but after deploying to production, it cannot access the user's camera or microphone.
Analysis: For security and privacy, browsers strictly limit access to Audio/Video devices (microphone, camera). Access is only permitted in secure environments, such as https://, localhost, file://, etc. HTTP is considered insecure, and browsers will block access to media devices by default.
Solution: If everything works locally (localhost) but fails after deployment, check whether your web page is served over HTTP. You must deploy your site using HTTPS and ensure you have a valid SSL certificate.
Related Resources: For more on URL domain and protocol restrictions, see URL Domain and Protocol Restrictions.
Does TUIRoomKit support iframe integration?
Yes. To integrate TUIRoomKit via iframe, configure the allow attribute in your iframe tag to grant necessary browser permissions (microphone, camera, screen sharing, fullscreen, etc.), as shown below:
// Enable microphone, camera, screen sharing, and fullscreen permissions
<iframe allow="microphone; camera; display-capture; display; fullscreen;" />
Contact Us
If you have questions or feedback during integration or usage, contact info_rtc@tencent.com.