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.TUIRoom
web component into your existing project.TUIRoom
component is developed using Vue 3 + TypeScript + Pinia + Element Plus + SCSS, so your project must be based on Vue 3 + TypeScript.TUIRoom
is based on TRTC and Chat.SDKAppID
(different applications cannot communicate with each other).SDKAppID
corresponds to a secret key. They are used to generate the signature (UserSig
) required to legitimately use TRTC services.UserSig
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.TUIRoom
componentTUIRoom
repository code.npm create vite@latest TUIRoom-demo -- --template vue
cd TUIRoom-demonpm installnpm run dev
// Install Vue CLI. If you use Vue CLI 4.x, your Node.js version must be v10 or later.npm install -g @vue/cli// Create a Vue3 + Webpack + TypeScript templatevue create TUIRoom-demo
cd TUIRoom-demonpm run serve
TUIRoom/Web/src/TUIRoom
folder to the project's src/
directory.TUIRoom
componentTUIRoom
component into your webpage, such as App.vue
.TUIRoom
component classifies users as hosts and members and offers APIs including init, createRoom, and enterRoom.<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 APIsconst 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 roomawait TUIRoomRef.value.init({// Get the `SDKAppID` (see step 1)sdkAppId: 0,// The user's unique ID in your businessuserId: '',// 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 businessuserName: '',// The URL of the user's profile photo in your businessuserAvatar: '',// 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()await handleCreateRoom();})// The host creates a room. Call this API only when you need to create a room.async function handleCreateRoom() {// `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 useconst roomId = 123456;const roomMode = 'FreeSpeech';const roomParam = {isOpenCamera: true,isOpenMicrophone: true,}await TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);}// The member enters a room. This API is called by a member to join an existing room.async function handleEnterRoom() {// `roomId` is the ID of the room entered by the user, which must be a number.// `roomParam` specifies whether to turn on the mic/camera upon room entry, as well as the default media device ID to useconst roomId = 123456;const roomParam = {isOpenCamera: true,isOpenMicrophone: true,}await TUIRoomRef.value.enterRoom(roomId, roomParam);}</script><style>html, body {width: 100%;height: 100%;margin: 0;}#app {width: 100%;height: 100%;}</style>
TUIRoom
component is imported, in order to ensure that the project can run normally, the following configurations are required:npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D
npm install element-plus events mitt pinia rtc-beauty-plugin tim-js-sdk trtc-js-sdk tsignaling -S
TUIRoom
uses Pinia for room data management. You need to register Pinia in the project entry file src/main.ts
.// `src/main.ts` fileimport { createPinia } from 'pinia';const app = createApp(App);// Register Piniaapp.use(createPinia());app.mount('#app');
TUIRoom
uses Element Plus UI components, which you need to import in vite.config.ts
. You can import only the components you need.// vite.config.tsimport 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 *;`,},},},});
src/main.ts
.// src/main.tsimport 'element-plus/theme-chalk/el-message.css';import 'element-plus/theme-chalk/el-message-box.css';
npm install sass sass-loader typescript unplugin-auto-import unplugin-vue-components unplugin-element-plus @types/events -S -D
npm install element-plus events mitt pinia rtc-beauty-plugin tim-js-sdk trtc-js-sdk tsignaling -S
TUIRoom
uses Pinia for room data management. You need to register Pinia in the project entry file src/main.ts
.// `src/main.ts` fileimport { createPinia } from 'pinia';const app = createApp(App);// Register Piniaapp.use(createPinia());app.mount('#app');
TUIRoom
uses Element Plus UI components, which you need to import in vue.config.js
. You can manually import only the components you need.// vue.config.jsconst { 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' })]}),// Specify the theme color when importing the componentsElementPlus({useSource: true})]}})
src/main.ts
.// src/main.tsimport 'element-plus/theme-chalk/el-message.css';import 'element-plus/theme-chalk/el-message-box.css';
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;
TUIRoom
component with a browser.npm run dev
http://localhost:3000/
in a browser.TUIRoom
component.npm run serve
http://localhost:8080/
in a browser.src/TUIRoom
directory, you can disable ESLint by adding /src/TUIRoom
to the .eslintignore
file.TUIRoom
component.npm run build
TUIRoom
data. All users using TUIRoom
need to call this API first.TUIRoomRef.value.init(roomData);
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. |
TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
Parameter | Type | Description |
roomId | number | The room ID. |
roomMode | string | 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. |
TUIRoomRef.value.enterRoom(roomId, roomParam);
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. |
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. |
<template><room ref="TUIRoomRef" @on-room-create="handleRoomCreate"></room></template><script setup lang="ts">// Import the `TUIRoom` component. Be sure to use the correct import path.import Room from './TUIRoom/index.vue';function handleRoomCreate(info) {if (info.code === 0) {console.log('Room created successfully')}}</script>
<template><room ref="TUIRoomRef" @on-room-enter="handleRoomEnter"></room></template><script setup lang="ts">// Import the `TUIRoom` component. Be sure to use the correct import path.import Room from './TUIRoom/index.vue';function handleRoomEnter(info) {if (info.code === 0) {console.log('Entered room successfully')}}</script>
<template><room ref="TUIRoomRef" @on-room-destory="handleRoomDestory"></room></template><script setup lang="ts">// Import the `TUIRoom` component. Be sure to use the correct import path.import Room from './TUIRoom/index.vue';function handleRoomDestory(info) {if (info.code === 0) {console.log('The host closed the room successfully')}}</script>
<template><room ref="TUIRoomRef" @on-room-exit="handleRoomExit"></room></template><script setup lang="ts">// Import the `TUIRoom` component. Be sure to use the correct import path.import Room from './TUIRoom/index.vue';function handleRoomExit(info) {if (info.code === 0) {console.log('The member exited the room successfully')}}</script>
<template><room ref="TUIRoomRef" @on-kick-off="handleKickOff"></room></template><script setup lang="ts">// Import the `TUIRoom` component. Be sure to use the correct import path.import Room from './TUIRoom/index.vue';function handleKickOff(info) {if (info.code === 0) {console.log('The member was removed from the room by the host')}}</script>
Was this page helpful?