tencent cloud

Feedback

RoomKit API

Last updated: 2023-11-16 14:48:02

    API 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.tencentcloud.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, this method is only called 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,
    };
    const createRoomInfo = {
    roomId,
    roomName: 'User defined room name' || roomId,
    roomMode,
    roomParam
    };
    await TUIRoomRef.value.createRoom(createRoomInfo);
    }
    
    // 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,
    };
    const enterRoomInfo = {
    roomId,
    roomParam
    };
    await TUIRoomRef.value.enterRoom(enterRoomInfo);
    }
    </script>
    
    <style>
    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    }
    
    #app {
    width: 100%;
    height: 100%;
    }
    </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('Room created successfully')
    }
    }
    </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 userSigg.')
    }
    </script>
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support