tencent cloud

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

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('Room created successfully')
    }
  }
</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 userSigg.')；
  }
</script>