TUIRoom is an open-source audio/video component that comes with UI elements. It allows you to quickly integrate conferencing capabilities like screen sharing and chatting into your project.
Note
All components of TUIKit use Tencent Cloud's TRTC and Chat services. When you activate TRTC, Chat and the trial edition of the Chat SDK (which supports up to 100 DAUs) will also be activated automatically. For Chat billing details, see Pricing.
Click here to try out more features of TUIRoom.
Click here to download the TUIRoom code and refer to this document to run the TUIRoom web demo.
This document shows you how to integrate the TUIRoom web component into your existing project.
Integration
The TUIRoom component is developed using Vue 3 + TypeScript + Pinia + Element Plus + SCSS, so your project must be based on Vue 3 + TypeScript.
Step 1. Activate the TRTC service
TUIRoom is based on TRTC and Chat.
1. Create a TRTC application
If you don’t have a Tencent Cloud account yet, sign up for one first.
In the TRTC console, click Application Management on the left sidebar and then click Create Application.
2. Get the SDKAppID and key
3. On the Application Management page, find the application you created, and click Application Info to view its SDKAppID (different applications cannot communicate with each other).
4. Select the Quick Start tab to view the application's secret key. Each SDKAppID corresponds to a secret key. They are used to generate the signature (UserSig) required to legitimately use TRTC services.
5. Generate UserSigUserSig is a security signature designed by Tencent Cloud to prevent attackers from accessing your Tencent Cloud account. It is required when you initialize the TUIRoom component.
1. Click here to clone or download the TUIRoom repository code.
2. Open your Vue3 + TypeScript project. You can use the build tool Vite or Webpack. If you don’t have a Vue3 + TypeScript project, create a template using either of the following two methods:
During the creation process, press Enter first, select "Vue", and then select "vue-ts".
After the template is generated, run the script below:
cd TUIRoom-demo
npminstall
npm run dev
// Install Vue CLI. If you use Vue CLI 4.x, your Node.js version must be v10 or later.
npminstall -g @vue/cli
// Create a Vue3 + Webpack + TypeScript template
vue create TUIRoom-demo
notice
Select "Manually select features" as the template generation mode. For other settings, refer to the figure below:
After the template is generated, run the script below:
cd TUIRoom-demo
npm run serve
3. Copy the TUIRoom/Web/src/TUIRoom folder to the project's src/ directory.
Step 3. Import the TUIRoom component
1. Import the TUIRoom component into your webpage, such as App.vue.
The TUIRoom component classifies users as hosts and members and offers APIs including init, createRoom, and enterRoom.
Hosts and members can call init to initialize application and user data. Hosts can call createRoom to create and enter rooms. Members can call enterRoom to join the rooms created by hosts.
<template>
<room ref="TUIRoomRef"></room>
</template>
<script setup lang="ts">
import{ ref, onMounted }from'vue';
// Import the `TUIRoom` component. Be sure to use the correct import path.
import Room from'./TUIRoom/index.vue';
// Get the `TUIRoom` component elements used to call the component’s APIs
const TUIRoomRef =ref();
onMounted(async()=>{
// Initialize the `TUIRoom` component
// A host needs to initialize the `TUIRoom` component before creating a room
// A member needs to initialize the `TUIRoom` component before entering a room
await TUIRoomRef.value.init({
// Get the `SDKAppID` (see step 1)
sdkAppId:0,
// The user's unique ID in your business
userId:'',
// For local development and debugging, you can quickly generate a `userSig` at https://console.tencentcloud.com/trtc/usersigtool. Note that `userSig` and `userId` have a one-to-one correspondence.
userSig:'',
// The user's username in your business
userName:'',
// The URL of the user's profile photo in your business
userAvatar:'',
// The user's unique ID used for screen sharing. It must be in the format of `share_${userId}`. You don’t need to pass this parameter if you don’t need the screen sharing feature.
shareUserId:'',
// Refer to steps 1-3 above and use the `SDKAppID` and `shareUserId` to generate `shareUserSig`
shareUserSig:'',
})
// By default, a room is created at this point. During actual implementation, you can specify when to call handleCreateRoom()
awaithandleCreateRoom();
})
// The host creates a room. Call this API only when you need to create a room.
asyncfunctionhandleCreateRoom(){
// `roomId` is the ID of the room to enter, which must be a number.
// The valid values of `roomMode` are `FreeSpeech` (free speech mode) and `ApplySpeech` (request-to-speak mode). The default value is `FreeSpeech`, which is the only supported mode currently.
// `roomParam` specifies whether to turn on the mic/camera upon room entry, as well as the default media device ID to use
@use "./src/TUIRoom/assets/style/element.scss" as *;
`,
},
},
},
});
Meanwhile, in order to ensure that Element Plus UI components can display styles properly, you need to load Element Plus component styles in the entry file src/main.ts.
// Specify the theme color when importing the components
ElementPlus({
useSource:true
})
]
}
})
Meanwhile, in order to ensure that Element Plus UI components can display styles properly, you need to load Element Plus component styles in the entry file src/main.ts.
4. Configure the TS file
Add the following configuration to src/shims-vue.d.ts:
declare module 'tsignaling/tsignaling-js'{
import TSignaling from 'tsignaling/tsignaling-js';
export default TSignaling;
}
declare module 'tim-js-sdk'{
import TIM from 'tim-js-sdk';
export default TIM;
}
declare const Aegis: any;
Step 5. Run your project in the development environment
In the console, execute the development environment script. Then, open the page integrated with the TUIRoom component with a browser.
If you used the script in step 2 to create a Vue + Vite + TypeScript project, follow the steps below:
1. Run the development environment command.
npm run dev
2. Open http://localhost:3000/ in a browser.
Note
Because Element Plus components are imported manually, it may take a relatively long time for the page to load in the development environment for the first time. This will not be an issue after packaging.
3. Try out the features of the TUIRoom component.
If you used the script in step 2 to create a Vue + Webpack + TypeScript project, follow the steps below:
1. Run the development environment command.
npm run serve
2. Open http://localhost:8080/ in a browser.
Note
If an ESLint error occurs in the src/TUIRoom directory, you can disable ESLint by adding /src/TUIRoom to the .eslintignore file.
3. Try out the features of the TUIRoom component.
Step 6. Commercial Scenario Deployment
1. Package dist file
npm run build
Note
Please check the package.json file for the actual packaging command.
2. Deploy the dist file to the server
Note
Commercial Scenario requires the use of https domain name.
Appendix: TUIRoom APIs
TUIRoom APIs
init
This API is used to initialize TUIRoom data. All users using TUIRoom need to call this API first.
TUIRoomRef.value.init(roomData);
The parameters are described below:
Parameter
Type
Description
roomData
object
-
roomData.sdkAppId
number
The SDKAppID.
roomData.userId
string
The unique user ID.
roomData.userSig
string
The UserSig.
roomData.userName
string
The username.
roomData.userAvatar
string
The user profile photo.
roomData.shareUserId
string
The UserId used for screen sharing, which must be in the format of share_${userId}. You don’t need to pass this parameter if you don’t need the screen sharing feature.
roomData.shareUserSig
string
UserSig used for screen sharing, which is optional.
The speech mode, including FreeSpeech (free speech) and ApplySpeech (request-to-speak). The default value is FreeSpeech, which is the only supported mode currently.
roomParam
Object
Optional
roomParam.isOpenCamera
string
Whether to turn on the camera upon room entry. This parameter is optional and the default is no.
roomParam.isOpenMicrophone
string
Whether to turn on the mic upon room entry. This parameter is optional and the default is no.
roomParam.defaultCameraId
string
The ID of the default camera, which is optional.
roomParam.defaultMicrophoneId
string
The ID of the default mic, which is optional.
roomParam.defaultSpeakerId
String
The ID of the default speaker, which is optional.
enterRoom
This API is used by a member to enter a room.
TUIRoomRef.value.enterRoom(roomId, roomParam);
The parameters are described below:
Parameter
Type
Description
roomId
number
The Room ID.
roomParam
Object
Optional
roomParam.isOpenCamera
string
Whether to turn on the camera upon room entry. This parameter is optional and the default is no.
roomParam.isOpenMicrophone
string
Whether to turn on the mic upon room entry. This parameter is optional and the default is no.