TUIRoomKit

<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>

TUIRoomRef.value.init(roomData);

TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);

TUIRoomRef.value.enterRoom(roomId, roomParam);

<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>

<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>

<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>

<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>

<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>

<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>

<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>