Web&H5 (Vue3）

<template>
  <ConferenceMainView v-if="isPC"></ConferenceMainView>
  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
</template>
<script setup>
import { ref } from 'vue';
import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
import { getPlatform } from '@tencentcloud/universal-api';

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


<template>
  <!-- Step 1: 配置全局 UIKitProvider -->
  <UIKitProvider theme="light" language="zh-CN">
    <!-- 您包含 ConferenceMainView 的业务组件 -->
  </UIKitProvider>
</template>
 
<script setup>
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { onMounted } from 'vue';
import { useLoginState } from 'tuikit-atomicx-vue3/room';

// step 2: 用户登陆
const { login, setSelfInfo } = useLoginState();
const SDKAppID = 0;    // 注意：请替换为实时音视频控制台获取的 SDKAppID 信息
const userId = '填入您真实的 userId';    // 注意：请替换为真实的 userId
const userName = '填入您真实的 userName';  // 注意：请替换为真实的 userName
const userSig = '填入您真实的 userSig';    // 注意：生成临时 userSig 请参考 https://cloud.tencent.com/document/product/647/17275#console
onMounted(async () => {
  try {
    await login({
      userId,
      userSig,
      sdkAppId: SDKAppID,
    });
    await setSelfInfo({
      userName,
      avatarUrl: '',
    });
  } catch (error: any) {
    console.error('Login failed:', error);
  }
});
</script>

<!-- Step 3: 配置全局样式（此样式用来覆盖脚手架搭建的新项目的默认样式，可按需配置）-->
<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>

import { conference } from '@tencentcloud/roomkit-web-vue3';
const startConference = async () => {  
  await conference.start({
    roomId: '123456',   // 请替换为您真实的 roomId
    options: {
      roomName: '我的临时会议',
    },
  });
}
startConference();

import { conference } from '@tencentcloud/roomkit-web-vue3';
const joinConference = async () => {
  await conference.join({
    roomId: '123456',   // 请替换为您真实的 roomId
  });
}
joinConference();

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

// RoomKit/views/ConferenceMainView/index.vue
import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
// 修改默认视频流布局为侧边栏布局
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',
    },
  }));
});