接入概览（Web）

npm install tuikit-atomicx-vue3@5 @tencentcloud/uikit-base-component-vue3

npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react

<template>
  <UIKitProvider theme="light" language="zh-CN">
    <div id="app-content" />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
</script>

<template>
  <div class="login-user-info">
    <template v-if="loginUserInfo">
      <span>{{ loginUserInfo.userName || loginUserInfo.userId }}</span>
      <TUIButton type="primary" @click="handleLogout">退出登录</TUIButton>
    </template>

    <template v-else>
      <TUIInput v-model="sdkAppId" style="width: 180px;" placeholder="请输入 sdkAppId" />
      <TUIInput v-model="userId" style="width: 180px;" placeholder="请输入 userId" />
      <TUIInput v-model="userName" style="width: 220px;" placeholder="请输入 userName（可选）" />
      <TUIInput v-model="userSig" style="width: 420px;" :maxLength="2000" placeholder="请输入 userSig" />
      <TUIButton type="primary" @click="handleLogin">登录</TUIButton>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUIInput, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
import { useLoginState } from 'tuikit-atomicx-vue3';

const { loginUserInfo, login, logout, setSelfInfo } = useLoginState();

const sdkAppId = ref('');
const userId = ref('');
const userName = ref('');
const userSig = ref('');

async function handleLogin() {
  if (!sdkAppId.value || !userId.value || !userSig.value) {
    return;
  }
  await login({
    sdkAppId: Number(sdkAppId.value),
    userId: userId.value,
    userSig: userSig.value,
  });
  if (userName.value) {
    await setSelfInfo({
      userName: userName.value,
      avatarUrl: '',
    });
  }
}

async function handleLogout() {
  await logout();
}
</script>

<style scoped>
.login-user-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
</style>

<template>
  <div class="room-control">
    <template v-if="!currentRoom">
      <TUIInput v-model="roomId" style="max-width: 200px;" placeholder="请输入房间 ID" />
      <TUIButton type="primary" @click="handleCreateRoom">创建房间</TUIButton>
      <TUIButton type="primary" @click="handleJoinRoom">加入房间</TUIButton>
    </template>

    <template v-else>
      <span>房间 ID：{{ currentRoom.roomId }}</span>
      <TUIButton type="primary" @click="handleLeaveRoom">离开房间</TUIButton>
      <TUIButton v-if="localParticipant?.role === RoomParticipantRole.Owner" type="primary" @click="handleEndRoom">
        结束房间
      </TUIButton>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUIInput, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
import { useRoomState, useRoomParticipantState, RoomParticipantRole } from 'tuikit-atomicx-vue3/room';

const { currentRoom, createAndJoinRoom, joinRoom, leaveRoom, endRoom } = useRoomState();
const { localParticipant } = useRoomParticipantState();

const roomId = ref('');

async function handleCreateRoom() {
  try {
    await createAndJoinRoom({ roomId: roomId.value, options: { roomName: '临时房间' } });
    TUIToast.success({ message: '创建房间成功' });
  } catch {
    TUIToast.error({ message: '创建房间失败，请重试' });
  }
}

async function handleJoinRoom() {
  try {
    await joinRoom({ roomId: roomId.value });
    TUIToast.success({ message: '加入房间成功' });
  } catch {
    TUIToast.error({ message: '加入房间失败，请重试' });
  }
}

async function handleLeaveRoom() {
  await leaveRoom();
}

async function handleEndRoom() {
  await endRoom();
}
</script>

<style scoped>
.room-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; flex: 1; min-width: 300px; }
</style>

<template>
  <div class="device-control">
    <TUIButton type="primary" @click="toggleCamera">
      {{ isLocalCameraOpen ? '关闭摄像头' : '打开摄像头' }}
    </TUIButton>
    <TUIButton type="primary" @click="toggleMicrophone">
      {{ isLocalMicrophoneOpen ? '关闭麦克风' : '打开麦克风' }}
    </TUIButton>
    <TUIButton type="primary" @click="toggleScreenShare">
      {{ isScreenSharing ? '停止共享' : '共享屏幕' }}
    </TUIButton>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
import { DeviceStatus, useDeviceState } from 'tuikit-atomicx-vue3/room';

const {
  cameraStatus,
  microphoneStatus,
  screenStatus,
  openLocalCamera,
  closeLocalCamera,
  openLocalMicrophone,
  closeLocalMicrophone,
  startScreenShare,
  stopScreenShare,
} = useDeviceState();

const isLocalCameraOpen = computed(() => cameraStatus.value === DeviceStatus.On);
const isLocalMicrophoneOpen = computed(() => microphoneStatus.value === DeviceStatus.On);
const isScreenSharing = computed(() => screenStatus.value === DeviceStatus.On);

async function toggleCamera() {
  try {
    if (isLocalCameraOpen.value) {
      await closeLocalCamera();
    } else {
      await openLocalCamera();
    }
  } catch {
    TUIToast.error({ message: '摄像头操作失败，请检查设备权限' });
  }
}

async function toggleMicrophone() {
  try {
    if (isLocalMicrophoneOpen.value) {
      await closeLocalMicrophone();
    } else {
      await openLocalMicrophone();
    }
  } catch {
    TUIToast.error({ message: '麦克风操作失败，请检查设备权限' });
  }
}

async function toggleScreenShare() {
  try {
    if (isScreenSharing.value) {
      await stopScreenShare();
    } else {
      await startScreenShare({ screenAudio: true });
    }
  } catch {
    TUIToast.error({ message: '屏幕共享失败，请检查浏览器权限' });
  }
}
</script>

<style scoped>
.device-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; flex: 1; min-width: 300px; }
</style>