文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>单功能集成>直播视频组件>LiveCoreView (Web Vue3)

LiveCoreView (Web Vue3)

最近更新时间：2025-09-08 22:59:43

我的收藏

本页目录：

LiveCoreView 是腾讯云专为直播观看端设计的核心组件，它能够无缝播放直播间的实时音视频流，帮助开发者快速构建稳定、流畅的直播观看界面，完美适配 PC 和 H5 端。


核心功能

智能流切换：LiveCoreView 能够根据当前用户的身份（观众或连麦者）自动切换流类型。
观众模式： 组件将播放超低延迟视频流，确保数百万观众都能流畅观看，同时大幅节省流量成本。
连线模式： 组件会自动切换到实时音视频流，提供毫秒级的超低延迟，保证连线用户之间实时、清晰的互动体验。
可定制化 UI：为了满足多样化的业务场景，LiveCoreView 提供组件 UI 自定义插槽，让你能够完全掌控连麦用户的视频流区域，重写其 UI 展示，灵活定义连麦用户的头像、昵称、状态等信息，轻松打造符合你品牌风格的独特视觉体验。

组件接入

步骤1：开通服务

在使用 LiveCoreView 前，你需要开通腾讯云服务。请访问 开通服务（TUILiveKit），根据你的需求选择体验版或付费版。

步骤2：安装依赖

您可以选择以下任一方式安装依赖：
使用 npm 安装：
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
使用 yarn 安装：
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
使用 pnpm 安装：
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3

步骤3：接入组件

在你的 Vue 项目中引入并使用 LiveCoreView。以下是一个基础示例：
<template>
  <UIKitProvider theme="dark" language="zh-CN">
    <div class="app">
      <LiveCoreView />
    </div>
  </UIKitProvider>
</template>

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

步骤4：用户登录

在使用 LiveCoreView 之前，必须先完成用户登录，以获取正确的鉴权信息。
import { useLoginState } from 'tuikit-atomicx-vue3';
const { login, logout } = useLoginState();

try {
  await login({
    sdkAppId: 您的_SDKAPPID,
    userId: '用户ID',
    userSig: '用户签名'
  })
  console.log('登录成功')
} catch (error) {
  console.error('登录失败:', error)
}
关键参数说明
sdkAppId：在 开通服务 中的最后一步中获取。
userId：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
userSig：通过对在 开通服务 中获取的SDKSecretKey对SDKAppID、UserID等信息进行加密，就可以得到UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用TRTC的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的UserSig。
更多信息请参见 如何计算及使用 UserSig。
注意：
这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下：
sdkAppId 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。
UserSig 被错配成了加密密钥（SecretKey），UserSig 是用 SecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的，而不是直接把 SecretKey 配置成 UserSig。
userId 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。
GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 UserSig 的计算逻辑放在服务端进行，并在每次使用 TUILiveKit 组件时向您的服务器请求实时计算出的 UserSig。

步骤5: 加入直播间并进行连麦

观众登录后，调用相应方法即可加入直播间并根据需要上下麦。
import { useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';
const { joinLive } = useLiveState();
const { applyForSeat } = useCoGuestState();

// 观众进入直播间之后， LiveCoreView 自动播放超低延时流
await joinLive({
  liveId: '已经存在的直播间 Id',
})
// 观众成功上麦之后，LiveCoreView 自动播放实时音视频流
await applyForSeat();

组件定制化

组件插槽

名称
参数
说明
seatViewUI
seatInfo: SeatInfo
自定义麦位的显示 UI

export type SeatUserInfo = {
  roomId: string;
  userId: string;
  userName: string;
  avatarUrl: string;
  microphoneStatus: DeviceStatus;
  allowOpenMicrophone: boolean;
  cameraStatus: DeviceStatus;
  allowOpenCamera: boolean;
};

export type RegionInfo = {
  x: number;
  y: number;
  w: number;
  h: number;
  zOrder: number;
};

export type SeatInfo = {
  index: number;
  isLocked: boolean;
  userInfo?: SeatUserInfo;
  region?: RegionInfo;
};

示例代码

<template>
  <UIKitProvider theme="dark" language="zh-CN">
    <div class="app">
      <LiveCoreView>
        <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
      </LiveCoreView>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { LiveCoreView } from '@tencentcloud/livekit-web-vue3';
// CustomSeatViewUI.vue 中实现 LiveCoreView 中连麦用户的自定义 UI
import CustomSeatViewUI from './CustomSeatViewUI.vue';
</script>
中国站
目录