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 correctimport Room from './TUIRoom/index.vue';// Get the TUIRoom Component element, used to call the TUIRoom Component methodconst 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 roomawait TUIRoomRef.value.init({// To get the sdkAppId, please refer to Step 1sdkAppId: 0,// The unique identifier of the user in your businessuserId: '',// 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 correspondenceuserSig: '',// The nickname used by the user in your businessuserName: '',// The avatar URL used by the user in your businessavatarUrl: '',})// By default, execute the create room operation, and you can choose to execute the handleCreateRoom method as needed in the actual accessawait handleCreateRoom();})// The host creates a room, and this method is called only when creating a roomasync 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 roomasync 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 correctimport 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 correctimport 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 correctimport 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 correctimport 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 correctimport 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 correctimport 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 correctimport Room from './TUIRoom/index.vue';function onUserSigExpired() {console.log('User userSig expired, please regenerate userSig.');}</script>