Web&H5 (Vue3）

# 创建名为 roomkit-demo 的 Vue3 + TypeScript 项目
npm create vite@5 roomkit-demo -- --template vue-ts
# 进入项目目录
cd roomkit-demo
# 安装基础依赖
npm install

<template>
  <UIKitProvider theme="light" language="zh-CN">
    <ConferenceMainView v-if="inRoom && isPC" />
    <ConferenceMainViewH5 v-else-if="inRoom" />
    <div v-else class="entry">
      <TUIInput v-model="entry.userId" placeholder="请输入用户 ID" />
      <TUIInput v-model="entry.userName" placeholder="请输入昵称, 非必填" />
      <TUIInput v-model="entry.roomId" placeholder="请输入房间 ID, 如 room_123456" />
      <TUIButton type="primary" :disabled="!entry.userId || !entry.roomId" @click="handleEnterRoom">进入会议</TUIButton>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { UIKitProvider, TUIInput, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
import { conference, ConferenceMainView, ConferenceMainViewH5, RoomEvent, genTestUserSig } from '@tencentcloud/roomkit-web-vue3';
import { getPlatform } from '@tencentcloud/universal-api';

const SDKAppID = 0; // 替换为您在开通服务阶段获取的 SDKAppID
const SDKSecretKey = ''; // 替换为您在开通服务阶段获取的 SDKSecretKey

const isPC = getPlatform() === 'pc';
const inRoom = ref(false);
const stored = JSON.parse(sessionStorage.getItem('tuiRoom-entry') || '{}');
const entry = ref({ userId: stored.userId || '', userName: stored.userName || '', roomId: stored.roomId || '' });

const handleEnterRoom = async () => {
  sessionStorage.setItem('tuiRoom-entry', JSON.stringify(entry.value));
  if (!SDKAppID || !SDKSecretKey) {
    TUIToast.warning({ message: '请先在代码中配置 SDKAppID 和 SDKSecretKey' });
    return;
  }
  try {
    const { userSig } = genTestUserSig({ userId: entry.value.userId, sdkAppId: SDKAppID, secretKey: SDKSecretKey });
    await conference.login({ sdkAppId: SDKAppID, userId: entry.value.userId, userSig });
    await conference.setSelfInfo({ userName: entry.value.userName, avatarUrl: '' });
    await conference.createAndJoinRoom({ roomId: entry.value.roomId, options: { roomName: `${entry.value.userName || entry.value.userId} 的会议` } });
    inRoom.value = true;
  } catch (error) {
    console.error('进入会议失败:', error);
  }
};

const handleLeave = () => { inRoom.value = false; };

onMounted(() => {
  conference.on(RoomEvent.ROOM_LEAVE, handleLeave);
  conference.on(RoomEvent.ROOM_DISMISS, handleLeave);
});

onUnmounted(() => {
  conference.off(RoomEvent.ROOM_LEAVE, handleLeave);
  conference.off(RoomEvent.ROOM_DISMISS, handleLeave);
});
</script>

<style>
html, body, #app { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; }
.entry { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 100vh; width: 260px; margin: 0 auto; }
</style>

<template>
  <UIKitProvider theme="light" language="zh-CN">
    <ConferenceMainView v-if="isPC"></ConferenceMainView>
    <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
import { getPlatform } from '@tencentcloud/universal-api';

const isPC = ref(getPlatform() === 'pc');
</script>

import { onMounted } from 'vue';
import { conference } from '@tencentcloud/roomkit-web-vue3';

const SDKAppID = 0; // 控制台获取的 SDKAppID
const userId = 'your_user_id'; // 业务侧用户唯一标识
const userSig = 'your_user_sig'; // 由业务服务端签发并下发
const userName = 'your_user_name';

onMounted(async () => {
  try {
    await conference.login({ sdkAppId: SDKAppID, userId, userSig });
    await conference.setSelfInfo({
      userName,
      avatarUrl: 'https://your-avatar-url.com/image.png',
    });
  } catch (error) {
    console.error('TUIRoomKit 登录失败:', error);
  }
});

import { watch } from 'vue';
import { useLoginState } from 'tuikit-atomicx-vue3/room';
import { conference } from '@tencentcloud/roomkit-web-vue3';

const { loginUserInfo } = useLoginState();

watch(() => loginUserInfo.value?.userId, async (userId) => {
  if (userId) {
    await conference.createAndJoinRoom({ roomId: '123456' });
  }
}, { immediate: true });

import { conference } from '@tencentcloud/roomkit-web-vue3';

const startQuickMeeting = async () => {
  // 1. 客户端生成一个唯一的 roomId
  const myRoomId = `room_${Date.now()}`; 
  
  // 2. 建房并直接加入
  await conference.createAndJoinRoom({
    roomId: myRoomId,
    options: {
      roomName: '我的快速会议',
    },
  });
};

import { useRoomState } from 'tuikit-atomicx-vue3/room';

const { scheduleRoom } = useRoomState();

const createSchedule = async () => {
  try {
    // roomId 限制：字符串类型，必传参数，建议由业务后台生成保证 roomId 唯一性。
    const roomId = '123456'; 
    
    // 注意：时间戳单位必须为 **秒** (Date.getTime() 获取的是毫秒，需除以 1000)
    const startTime = Math.floor(new Date().getTime() / 1000) + 3600; // 1小时后开始
    const duration = 1800; // 30分钟

    const options = {
      roomName: '产品需求评审会',
      scheduleStartTime: startTime, // 单位：秒
      scheduleEndTime: startTime + duration, // 单位：秒
      scheduleAttendees: ['userA', 'userB'], // 邀请参会成员ID列表
      password: '123', // 可选：设置入会密码
    };

    await scheduleRoom({ roomId, options });
  } catch (error) {
    console.error('预定失败', error);
  }
};

POST /v4/room_engine_http_srv/create_room
{
  "roomId": "your-room-id",
  "roomName": "会议名称",
  "startTime": 1710000000,
  "endTime": 1710003600,
  "invitees": ["userId1", "userId2"]
}

import { conference } from '@tencentcloud/roomkit-web-vue3';

const joinExistingMeeting = async (sharedRoomId: string) => {
  await conference.joinRoom({
    roomId: sharedRoomId,
  });
};

<template>
  <div>
    <h3>我的预约会议</h3>
    <ul v-if="roomList.length > 0">
      <li v-for="room in roomList" :key="room.roomId" class="item">
        <div class="info">
          <b>{{ room.roomName || '未命名会议' }}</b>
          <span>房间号: {{ room.roomId }}</span>
        </div>
        <button class="btn" @click="handleJoinRoom(room.roomId)">加入会议</button>
      </li>
    </ul>
    <div v-else>暂无待参加的预约会议</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { conference } from '@tencentcloud/roomkit-web-vue3';
import { useRoomState, useLoginState } from 'tuikit-atomicx-vue3/room';

const { getScheduledRoomList } = useRoomState();
const { loginUserInfo } = useLoginState();
const roomList = ref<any[]>([]);

// 1. 监听登录状态，确保鉴权就绪后再拉取会议列表
watch(
  () => loginUserInfo.value?.userId, 
  async (userId) => {
    if (userId) {
      try {
        roomList.value = await getScheduledRoomList() || [];
      } catch (error) {
        console.error('获取预约会议列表失败:', error);
      }
    }
  },
  { immediate: true }
);

// 2. 点击加入房间
const handleJoinRoom = async (roomId: string) => {
  try {
    await conference.joinRoom({ roomId });
  } catch (error) {
    console.error(`加入会议失败 (${roomId}):`, error);
  }
};
</script>

<style scoped>
/* 极简基础样式 */
ul { padding: 0; list-style: none; }
.item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #eee; }
.info { display: flex; flex-direction: column; font-size: 14px; color: #666; }
.info b { font-size: 16px; color: #333; }
.btn { background: #006eff; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
</style>

import { conference } from '@tencentcloud/roomkit-web-vue3';

const enterDualMeeting = async (bizOrderId: string) => {
  // 双方无需判断房间是否已经创建 SDK 内部自动处理建房与进房逻辑
  await conference.createAndJoinRoom({
    roomId: bizOrderId, 
    options: {
      roomName: `业务沟通：${bizOrderId}`,
    },
  });
};

import { conference } from '@tencentcloud/roomkit-web-vue3';

await conference.leaveRoom();

import { conference } from '@tencentcloud/roomkit-web-vue3';

await conference.endRoom();

<template>
  <ConferenceMainView></ConferenceMainView>
</template>


<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ConferenceMainView, conference, RoomEvent } from '@tencentcloud/roomkit-web-vue3';

const backToHome = () => {};
const backToLogin = () => {};

onMounted(() => {
  conference.on(RoomEvent.ROOM_DISMISS, backToHome);
  conference.on(RoomEvent.ROOM_LEAVE, backToHome);
  conference.on(RoomEvent.ROOM_ERROR, backToHome);
  conference.on(RoomEvent.KICKED_OUT, backToHome);
  conference.on(RoomEvent.KICKED_OFFLINE, backToLogin);
  conference.on(RoomEvent.USER_SIG_EXPIRED, backToLogin);
});

onUnmounted(() => {
  conference.off(RoomEvent.ROOM_DISMISS, backToHome);
  conference.off(RoomEvent.ROOM_LEAVE, backToHome);
  conference.off(RoomEvent.ROOM_ERROR, backToHome);
  conference.off(RoomEvent.KICKED_OUT, backToHome);
  conference.off(RoomEvent.KICKED_OFFLINE, backToLogin);
  conference.off(RoomEvent.USER_SIG_EXPIRED, backToLogin);
});
</script>