Web (Atomicx 版本）

git clone https://github.com/Tencent-RTC/TUIRoomKit.git --depth=1
cd TUIRoomKit/Web/example/atomicx-vite-vue3-ts

// src/router/index.ts 示例配置
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/home.vue'; 
import Room from '../views/room.vue';     

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/room',
      name: 'Room',
      component: Room,
    },
  ],
});

export default router;

<template>
  <!-- Step 1: 配置全局 UIKitProvider -->
  <UIKitProvider theme="light" language="zh-CN">
    <!-- Step 2: 引入页面路由 -->
    <router-view />
  </UIKitProvider>
</template>
 
 <!-- 注意添加 lang="ts" 来启用 TypeScript 支持 -->
<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { onMounted } from 'vue';
import { SDKAPPID, genTestUserSig } from './config/basic-info-config';
import { RoomEvent, useLoginState, useRoomModal } from 'tuikit-atomicx-vue3/room';

// step 3: 用户登陆
const { login, setSelfInfo } = useLoginState();
const { handleErrorWithModal } = useRoomModal();
const userId = `user_${Math.ceil(Math.random(0,1)*999)}`;
const userName = userId;
const userSig = genTestUserSig(userId);
onMounted(async () => {
  try {
    await login({
      userId,
      userSig,
      sdkAppId: SDKAPPID,
    });
    await setSelfInfo({
      userName,
      avatarUrl: '',
    });
  } catch (error: any) {
    console.error('Login failed:', error);
    handleErrorWithModal(error);
  }
});
</script>

<!-- Step 4: 配置全局样式（此样式用来覆盖脚手架搭建的新项目的默认样式，可按需配置） -->
<style>
html, body {
  padding: 0 !important;
  margin: 0 !important;
}

#app {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  text-align: left !important;
  overflow: hidden;
}
</style>

// Step 1: 配置页面路由
import router from './router/index';
const app = createApp(App);
// --- 以下为新增代码 ----
app.use(router);
// --- 以上为新增代码 ----
app.mount('#app');

// Step 2: 配置多语言资源
import { i18next } from '@tencentcloud/uikit-base-component-vue3';
import { enResource, zhResource } from './i18n';
export const addI18n = (lng: string, resource: any, deep = true, overwrite = false) => {
  i18next.addResourceBundle(lng, 'translation', resource.translation, deep, overwrite);
};
addI18n('en-US', { translation: enResource }, true, true);
addI18n('zh-CN', { translation: zhResource }, true, true);

<UIKitProvider theme="light" language="zh-CN">
  <router-view />
</UIKitProvider>
 
<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';

// src/views/room.vue
// 修改默认视频流布局为侧边栏布局
const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
function handleLayoutUpdate(layout: RoomLayoutTemplate) {
  participantViewLayout.value = layout;
}

// 修改默认视频流布局为顶部栏布局
const participantViewLayout = ref(RoomLayoutTemplate.CinemaLayout);
function handleLayoutUpdate(layout: RoomLayoutTemplate) {
  participantViewLayout.value = layout;
}

// 开启麦克风、摄像头、屏幕分享、全屏权限
<iframe allow="microphone; camera; display-capture; display; fullscreen;">

// 请在进房前设置内网代理参数
import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
const { roomEngine } = useRoomEngine();

TUIRoomEngine.once('ready', () => {
  const trtcCloud = roomEngine.instance?.getTRTCCloud()；
  trtcCloud.callExperimentalAPI(JSON.stringify({
    api: 'setNetworkProxy',
    params: {
      websocketProxy: "wss://proxy.example.com/ws/",
      turnServer: [{
        url: '14.3.3.3:3478',
        username: 'turn',
        credential: 'turn',
      }],
      iceTransportPolicy: 'relay',
    },
  }));
});