Menu

TUIRoomKit

Last updated: 2023-11-16 14:21:03Download PDF

API Introduction

TUIRoomKit API is a human video conference component with UI interface. By using TUIRoomKit API, you can quickly implement a WeChat-like audio/video call scenario through a simple interface. If you want to experience and debug the video conference effect, please read the Quick Start Demo. If you want to embed our features directly into your project, please read the Quick Access (TUIRoomKit).

API Overview

Reference the TUIRoomKit component in the page. For example, import the TUIRoomKit component in the App.vue component.
TUIRoomKit component divides users into host role and regular member role. The component provides init, createRoom, and enterRoom methods externally.
Hosts and regular members can initialize the application and user data to the TUIRoomKit component through the init method. The host can create and join a room through the createRoom method, and regular members can join the room created by the host through the enterRoom method.
<template>
<room ref="TUIRoomRef"></room>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Import the TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';
// Get the TUIRoom Component element, used to call the TUIRoom Component method
const TUIRoomRef = ref();

onMounted(async () => {
// Initialize the TUIRoom component
// The host needs to initialize the TUIRoom component before creating a room
// Regular members need to initialize the TUIRoom component before entering a room
await TUIRoomRef.value.init({
// To get the sdkAppId, please refer to Step 1
sdkAppId: 0,
// The unique identifier of the user in your business
userId: '',
// For local development and debugging, you can quickly generate userSig on the https://console.cloud.tencent.com/trtc/usersigtool page.
// Note that userSig and userId have a one-to-one correspondence
userSig: '',
// The nickname used by the user in your business
userName: '',
// The avatar URL used by the user in your business
avatarUrl: '',
})
// By default, execute the create room operation, and you can choose to execute the handleCreateRoom method as needed in the actual access
await handleCreateRoom();
})

// The host creates a room, and this method is called only when creating a room
async function handleCreateRoom() {
// roomId is the room number entered by the user, and roomId must be of type string
// roomMode includes 'FreeToSpeak' (free speech mode) and 'SpeakAfterTakingSeat' (speak on stage mode), with the default being 'FreeToSpeak'. Note that only free speech mode is currently supported
// roomParam specifies the default behavior of the user when entering the room (whether to open the microphone and camera by default, and the default media device Id)
const roomId = '123456';
const roomMode = 'FreeToSpeak';
const roomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
}
try {
await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
} catch (error: any) {
alert('TUIRoomKit.createRoom error: ' + error.message);
}
}

// Regular members enter the room, and this method is called when regular members enter an already created room
async function handleEnterRoom() {
// roomId is the room number entered by the user, and roomId must be of type string
// roomParam specifies the default behavior of the user when entering the room (whether to open the microphone and camera by default, and the default media device Id)
const roomId = '123456';
const roomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
}
try {
await TUIRoomRef.value.enterRoom({ roomId, roomParam });
} catch (error: any) {
alert('TUIRoomKit.enterRoom error: ' + error.message);
}
}
</script>

<style lang="scss">
html, body {
width: 100%;
height: 100%;
margin: 0;
}

#app {
width: 100%;
height: 100%;
* {
box-sizing: border-box;
}
}
</style>

API Details

TUIRoomkit Interface

init

Initialize TUIRoomKit Data, any user using TUIRoomKIt needs to call the init method.
TUIRoomRef.value.init(roomData);
The parameters are shown in the table below:
Parameter
Type
Meaning
roomData
object
-
roomData.sdkAppId
number
Customer's SDKAppId
roomData.userId
string
User's Unique ID
roomData.userSig
string
User's UserSig
roomData.userName
string
User's Nickname
roomData.avatarUrl
string
User's Avatar URL

createRoom

Host creates a room.
TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
The parameters are shown in the table below:
Parameter
Type
Meaning
roomId
string
Room ID
roomMode
string
Room mode, FreeToSpeak (Free Speech Mode) and SpeakAfterTakingSeat (Onstage Speech Mode), default is FreeToSpeak
roomParam
Object
Optional
roomParam.isOpenCamera
string
Optional, whether to open the camera when entering the room, default is closed
roomParam.isOpenMicrophone
string
Optional, whether to open the mic when entering the room, default is closed
roomParam.defaultCameraId
string
Optional, default Camera device ID
roomParam.defaultMicrophoneId
string
Optional, default mic device ID
roomParam.defaultSpeakerId
String
Optional, default Speaker device ID

enterRoom

Regular member joins the room.
TUIRoomRef.value.enterRoom(roomId, roomParam);
The parameters are shown in the table below:
Parameter
Type
Meaning
roomId
string
Room ID
roomParam
Object
Optional
roomParam.isOpenCamera
string
Optional, whether to open the camera when entering the room, default is closed
roomParam.isOpenMicrophone
string
Optional, whether to open the mic when entering the room, default is closed
roomParam.defaultCameraId
string
Optional, default Camera device ID
roomParam.defaultMicrophoneId
string
Optional, default mic device ID
roomParam.defaultSpeakerId
String
Optional, default Speaker device ID

TUIRoomkit Event

onCreateRoom

Create room Callback.
<template>
<room ref="TUIRoomRef" @on-create-room="onCreateRoom"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onCreateRoom(info) {
if (info.code === 0) {
console.log('Create room Success')
}
}
</script>

onEnterRoom

Entered room Callback.
<template>
<room ref="TUIRoomRef" @on-enter-room="onEnterRoom"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onEnterRoom(info) {
if (info.code === 0) {
console.log('Entered room Success')
}
}
</script>

onDestroyRoom

Host destroys room Callback.
<template>
<room ref="TUIRoomRef" @on-destroy-room="onDestroyRoom"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onDestroyRoom(info) {
if (info.code === 0) {
console.log('Host destroys room Success')
}
}
</script>

onExitRoom

Regular member exits room Callback.
<template>
<room ref="TUIRoomRef" @on-exit-room="onExitRoom"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onExitRoom(info) {
if (info.code === 0) {
console.log('Regular member exits room Success')
}
}
</script>

onKickedOutOfRoom

Regular member is kicked out of room by host Notification.
<template>
<room ref="TUIRoomRef" @on-kicked-out-of-room="onKickedOutOfRoom"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onKickedOutOfRoom({ roomId, message }) {
console.log('Regular member is kicked out of room by host', roomId, message);
}
</script>

onKickedOffLine

User account logged in elsewhere, kicked offline.
<template>
<room ref="TUIRoomRef" @on-kick-off-line="onKickedOffLine"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onKickedOffLine({ message }) {
console.log('Member kicked offline', message)
}
</script>

onUserSigExpired

User userSig expired, please regenerate userSig.
<template>
<room ref="TUIRoomRef" @on-user-sig-expired="onUserSigExpired"></room>
</template>

<script setup lang="ts">
// Import TUIRoom Component, make sure the import path is correct
import Room from './TUIRoom/index.vue';

function onUserSigExpired() {
console.log('User userSig expired, please regenerate userSig.')
}
</script>