tencent cloud

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

<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    // 引入 TUIRoom 组件，注意确认引入路径是否正确
    import Room from './TUIRoom/index.vue';
    // 获取 TUIRoom 组件元素，用于调用 TUIRoom 组件的方法
    const TUIRoomRef = ref();

	 onMounted(async () => {
        // 初始化 TUIRoom 组件
        // 主持人在创建房间前需要先初始化 TUIRoom 组件
        // 普通成员在进入房间前需要先初始化 TUIRoom 组件
        await TUIRoomRef.value.init({
            // 获取 sdkAppId 请您参考 步骤一
            sdkAppId: 0,
            // 用户在您业务中的唯一标示 Id
            userId: '',
            // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig
            // 注意 userSig 与 userId 为一一对应关系
            userSig: '',
            // 用户在您业务中使用的昵称
            userName: '',
            // 用户在您业务中使用的头像链接
            avatarUrl: '',
        })
         // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法
        await handleCreateRoom();
    })

	// 主持人创建房间，该方法只在创建房间时调用
    async function handleCreateRoom() {
        // roomId 为用户进入的房间号, 要求 roomId 类型为 number
        // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式
        // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备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);
    }

	// 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用
    async function handleEnterRoom() {
        // roomId 为用户进入的房间号, 要求 roomId 类型为 number
        // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备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">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onCreateRoom(info) {
    if (info.code === 0) {
      console.log('创建房间成功')
    }
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-enter-room="onEnterRoom"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onEnterRoom(info) {
    if (info.code === 0) {
      console.log('进入房间成功')
    }
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-destroy-room="onDestroyRoom"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onDestroyRoom(info) {
    if (info.code === 0) {
      console.log('主持人销毁成功')
    }
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-exit-room="onExitRoom"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onExitRoom(info) {
    if (info.code === 0) {
      console.log('普通成员退出房间成功')
    }
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-kicked-out-of-room="onKickedOutOfRoom"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onKickedOutOfRoom({ roomId, message }) {
    console.log('普通成员被主持人踢出房间', roomId, message);
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-kick-off-line="onKickedOffLine"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onKickedOffLine({ message }) {
    console.log('成员被踢下线', message)；
  }
</script>

<template>
  <room ref="TUIRoomRef" @on-user-sig-expired="onUserSigExpired"></room>
</template>

<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';

  function onUserSigExpired() {
    console.log('用户 userSig 过期, 请重新生成 userSig.')；
  }
</script>