Web（H5）

<template>
  <PreConferenceView
    v-show="isShowPreConferenceView"
    :enable-scheduled-conference="true"
    @on-enter-room="handleEnterRoom"
  />
  <ConferenceMainView
    v-show="!isShowPreConferenceView"
    display-mode="permanent"
    @on-destroy-room="onDestroyRoom"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PreConferenceView, conference, ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
const isShowPreConferenceView = ref(true);
const init = async () => {
  conference.login({
      sdkAppId: 0,  // Replace with your sdkAppId
      userId: '',  // Replace with your userId
      userSig: '',  // Replace with your userSig
   });
};
init();

async function handleEnterRoom(roomOption: Record<string, any>) {
  const { roomId } = roomOption;
  await conference.join(roomId, {
    isOpenCamera: false,
    isOpenMicrophone: false,
  });
  isShowPreConferenceView.value = false;
}

function onDestroyRoom() {
  isShowPreConferenceView.value = true;
  init();
}
</script>