Web

// Install vue-cli, note that Vue CLI 4.x requires Node.js to be v10 or above
npm install -g @vue/cli
// Create Vue3 + Webpack + TS Template Project
vue create tuiroomkit-demo

cd tuiroomkit-demo
npm run serve

// Install vue-cli, note that Vue CLI 4.x requires Node.js to be v10 or above
npm install -g @vue/cli
// Create Vue2 + Webpack + Js Template Project
vue create tuiroomkit-demo

cd tuiroomkit-demo
npm run serve

<template>
  <div id="app">
    <room-container ref="TUIRoomRef"></room-container>
  </div>
</template>

<script>
import RoomContainer from '@/TUIRoom/index.vue';
export default {
  name: 'App',
  components: { RoomContainer },
  data() {
    return {};
  },
  async mounted() {
    // Initialize 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 this.$refs.TUIRoomRef.init({
      // Get sdkAppId, please refer to Step 1
      sdkAppId: 0,
      // User unique identifier 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 link used by the user in your business
      avatarUrl: '',
    });
    // By default, create a room, and actually access it according to the needs of the handleCreateRoom method
    await this.handleCreateRoom();
  },
  methods: {
    // The host creates a room, this method is only called when creating a room
    async handleCreateRoom() {
      // roomId is the room number entered by the user, and roomId is required to be of type string
      // roomMode includes 'FreeToSpeak' (Free-to-speak mode) and 'SpeakAfterTakingSeat' (On-stage speaking mode), the default is 'FreeToSpeak', please note that only free-to-speak mode is currently supported
      // roomParam specifies the default behavior of the user when entering the room (whether to turn on the camera by default, whether to turn on the mic by default, and the default media device Id)
      const roomId = '123456';
      const roomMode = 'FreeToSpeak';
      const roomParam = {
          isOpenCamera: true,
          isOpenMicrophone: true,
      }
      try {
        await this.$refs.TUIRoomRef.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
      } catch (error) {
        alert('TUIRoomKit.createRoom error: ' + error.message);
      }
    },
    // Regular members enter the room, this method is called when regular members enter the created room
    async handleEnterRoom() {
      // roomId is the room number entered by the user, and roomId is required to be of type string
      // roomParam specifies the default behavior of the user when entering the room (whether to turn on the camera by default, whether to turn on the mic by default, and the default media device Id)
      const roomId = '123456';
      const roomParam = {
          isOpenCamera: true,
          isOpenMicrophone: true,
      }
      try {
        await this.$refs.TUIRoomRef.enterRoom({ roomId, roomParam });
      } catch (error) {
        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>