文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>视频会议 SDK>含 UI 集成>研讨会>快速接入>Web (Vue3）

Web (Vue3）

最近更新时间：2026-03-13 11:49:42

我的收藏

本页目录：

本文档介绍如何在 Web 应用中集成 TUIRoomKit 研讨会场景。该场景支持主持人、嘉宾与万级以上观众的实时互动，具备超低延时观看和高性能的消息处理能力。
标准会议与研讨会有何不同？
标准会议（Conference）：适用于中小规模的多人协作场景，所有参与者均具有平等的音视频权限，支持宫格、演讲者等多种布局切换，并提供屏幕共享、成员管理等完整互动能力。
研讨会（Webinar）：专为大型直播演讲设计，支持无上限观众进房观看。观众可举手申请上台成为嘉宾后参与讨论，且系统针对万人级互动场景优化了消息并发性能，满足更专业的演讲互动需求。
推荐使用更高效的 AI 集成助手
我们为您提供了全新的 AI 集成方式，只需要描述您的需求，即可自动生成集成代码，大幅提升开发效率。

功能展示

研讨会开播端

支持主持人发起高清音视频推流与屏幕共享。当视频与屏幕共享同时开启时，支持对视频窗进行拖拽定位，灵活切换演讲布局。


研讨会嘉宾端

支持嘉宾开启麦克风进行实时语音讨论和分享。


研讨会观众端

支持观众无上限并发进房，以超低延迟观看实况并参与高频消息互动。支持观众通过“举手”功能向主持人申请变更为嘉宾。


前提条件

开通服务

请参考 开通服务 领取 TUILiveKit 体验版或开通 TUILiveKit 正式版，并在 应用管理 页面获取以下信息:
SDKAppID: 应用标识，腾讯云基于 SDKAppID 完成计费统计。
SDKSecretKey: 应用密钥，用于初始化配置文件的密钥信息。
注意：
研讨会场景基于底层的直播能力构建。请注意接入研讨会能力需要领取 TUILiveKit 体验版或开通 TUILiveKit 正式版，以确保相关功能的正常运行。

环境准备

Node.js: ≥ 18.19.1 (推荐使用官方 LTS 版本)。
Vue: ≥ 3.4.21。
现代浏览器：支持 WebRTC APIs 的现代浏览器。
设备：摄像头、麦克风、扬声器。

源码接入

步骤1：安装项目依赖

在您的业务项目中安装以下依赖。
npm
pnpm
yarn
npm install @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3@5.4.1 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api 
pnpm install @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3@5.4.1 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
yarn add @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3@5.4.1 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api

步骤2：引用 TUIRoomKit 组件

<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
</script>


步骤3：配置 App.vue 文件

将以下内容合并到项目的 App.vue 文件中，以配置全局 UI 样式和用户登录逻辑：
配置全局 UIKitProvider：引入 UIKitProvider 组件，并设置默认主题和语言；
用户登录： 在 onMounted 钩子中执行 login 和 setSelfInfo。
注意：
配置代码中，需要填入 UserSig。在正式的生产环境中，建议在您的服务端生成 UserSig，在需要 UserSig 时由您的客户端向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 正式运行阶段如何计算 UserSig。
<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) {
    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>

步骤4：发起新的研讨会

主持人可以通过调用 conference.start 接口来发起一场新的研讨会，其他参会者可以参见 步骤5 的描述，调用 conference.join 接口加入该会议。
注意：
请参考步骤 3 在用户登录成功后调用 conference.start 接口发起会议。
import { conference, RoomType } from '@tencentcloud/roomkit-web-vue3';
const startConference = async () => {  
  await conference.start({
    roomId: 'webinar_123456',   // 请替换为您真实的 roomId, 建议研讨会场景的 roomId 统一以 'webinar_' 开头
    roomType: RoomType.Webinar,
    options: {
      roomName: '我的研讨会',
    },
  });
}
startConference();

步骤5：进入已有会议

参与者可以通过调用 conference.join 接口，填写对应的 roomId 参数，来加入由会议主持人在 步骤4 中发起的会议。
注意：
请参考步骤 3 在用户登录成功后调用 conference.join 接口加入会议。
import { conference, RoomType } from '@tencentcloud/roomkit-web-vue3';
const joinConference = async () => {
  await conference.join({
    roomId: 'webinar_123456',   // 请替换为您真实的 roomId, 建议研讨会场景的 roomId 统一以 'webinar_' 开头
    roomType: RoomType.Webinar,
  });
}
joinConference();

启动项目

npm
pnpm
yarn
npm run dev
pnpm run dev
yarn run dev
启动成功后，请在浏览器中打开调试地址（通常为 http://localhost:5173）访问应用。您将看到如下所示的研讨会界面：


UI 快速自定义

主题及语言

通过配置 App.vue 中 UIKitProvider 的入参，修改主题及语言的默认值。
UIKitProvider 参数
可选值
默认值
theme
"light" | "dark"
"light"
language
"zh-CN" | "en-US"
"en-US"
<UIKitProvider theme="light" language="zh-CN">
  <router-view />
</UIKitProvider>
 
<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';

常见问题

TUIRoomKit 在本地开发时使用正常，但部署到线上环境后无法正常采集用户的摄像头或麦克风设备？

原因分析：浏览器出于安全和隐私保护的考虑，对音视频设备（麦克风、摄像头）的采集有着严格限制。只有在安全环境下，采集操作才会被允许。安全环境协议包括：https://、localhost、file:// 等。HTTP 协议被视为不安全，浏览器会默认禁止访问媒体设备。
解决方案：若您在本地（localhost）测试一切正常，但部署后出现采集失败，请立即检查您的网页是否部署在 HTTP 协议上。您必须使用 HTTPS 协议部署您的网页，并确保具备有效的安全证书。
相关资源：更多关于 URL 域名及协议的限制详情，请参见 URL 域名及协议限制说明。

TUIRoomKit 是否支持使用 iframe 集成?

支持。使用 iframe 集成 TUIRoomKit 时, 需要在 iframe 标签中配置 allow 属性以授予必要的浏览器权限（麦克风、摄像头、屏幕共享、全屏等），示例如下: 
// 开启麦克风、摄像头、屏幕分享、全屏权限
<iframe allow="microphone; camera; display-capture; display; fullscreen;">

TUIRoomKit 是否支持设置内网代理？

支持。请参考如下指引设置内网代理参数。更多内网代理信息请参考 应对防火墙受限。
// 请在进房前设置内网代理参数
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',
    },
  }));
});

联系我们

如果您在接入或使用过程中有任何疑问或者建议，欢迎 联系我们 提交反馈。
中国站
目录