<template>
 <room ref="TUIRoomRef"></room>
</template>

<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 // Import the `TUIRoom` component. Be sure to use the correct import path.
 import Room from './TUIRoom/index.vue';
 // Get the `TUIRoom` component elements used to call the component’s APIs
 const TUIRoomRef = ref();

  onMounted(async () => {
  // Initialize the `TUIRoom` component
  // A host needs to initialize the `TUIRoom` component before creating a room
  // A member needs to initialize the `TUIRoom` component before entering a room
  await TUIRoomRef.value.init({
      // Get the `SDKAppID` (see step 1)
      sdkAppId: 0,
      // The user's unique ID in your business
      userId: '',
      // For local development and debugging, you can quickly generate a `userSig` at https://console.tencentcloud.com/trtc/usersigtool. Note that `userSig` and `userId` have a one-to-one correspondence.
      userSig: '',
      // The user's username in your business
      userName: '',
      // The URL of the user's profile photo in your business
      userAvatar: '',
      // The user's unique ID used for screen sharing. It must be in the format of `share_${userId}`. You don’t need to pass this parameter if you don’t need the screen sharing feature.
      shareUserId: '',
      // Refer to steps 1-3 above and use the `SDKAppID` and `shareUserId` to generate `shareUserSig` 
      shareUserSig: '',
  })
   // By default, a room is created at this point. During actual implementation, you can specify when to call handleCreateRoom()
  await handleCreateRoom();
 })

 // The host creates a room. Call this API only when you need to create a room.
 async function handleCreateRoom() {
  // `roomId` is the ID of the room to enter, which must be a number.
  // The valid values of `roomMode` are `FreeSpeech` (free speech mode) and `ApplySpeech` (request-to-speak mode). The default value is `FreeSpeech`, which is the only supported mode currently.
  // `roomParam` specifies whether to turn on the mic/camera upon room entry, as well as the default media device ID to use
  const roomId = 123456;
  const roomMode = 'FreeSpeech';
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
 }

 // The member enters a room. This API is called by a member to join an existing room.
 async function handleEnterRoom() {
  // `roomId` is the ID of the room entered by the user, which must be a number.
  // `roomParam` specifies whether to turn on the mic/camera upon room entry, as well as the default media device ID to use
  const roomId = 123456;
  const roomParam = {
      isOpenCamera: true,
      isOpenMicrophone: true,
  }
  await TUIRoomRef.value.enterRoom(roomId, roomParam);
 }
</script>

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

#app {
 width: 100%;
 height: 100%;
}
</style>

npm run dev

npm run serve

npm run build