专为以下场景打造：VUE

Vue 直播 UI Kit

使用 Tencent RTC 的 Vue 直播 UI Kit 添加 Web 直播功能。在 Vue 应用中组合主播准备、观众观看和房间列表组件。

开始构建探索 Live 演示

开发者资源

Vue 直播 UI Kit 文档与示例

组件参考

探索 Vue 直播 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 Vue 直播 UI Kit 并连接用户。

Vue 集成快速入门

示例与源码

查看产品的实际运行效果并了解其实现方式。

探索 Live 演示查看 Vue 源代码

使用 Vue 进行产品直播演示

让观众观看创作者的商品演示并参与对话。您的应用负责管理商品目录和购买体验。

探索直播购物

在 Vue 中观看直播活动

将演示内容及其观众带入你的 Vue 应用。把观看界面连接到房间，让用户可以观看直播活动。

探索活动直播

VUE LIVE 功能

Vue 直播功能

开始直播

主播和观众角色
房间生命周期管理

让人们相聚

直播视频播放
观众参与

打造属于您的产品体验

灵活的应用布局
平台专属构建模块

探索 Vue Live Streaming Components

将主播端视图、观众端视图和直播间列表连接到您的应用导航。

主播预览

为创作者提供一个起点

添加 Vue 主播准备界面，让创作者在开播前预览摄像头。将该界面连接到已验证身份的主播账号。

阅读文档

<script setup>
import { StreamMixer, LiveScenePanel } from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveScenePanel />
  <StreamMixer />
</template>

观众端视图

将观看体验融入您的应用

使用所选直播房间打开 Vue 观众视图。将进出房间与应用导航相连接。

阅读文档

<script setup>
import { LiveCoreView, BarrageList, BarrageInput }
  from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveCoreView />
  <BarrageList />
  <BarrageInput />
</template>

直播房间列表

开启直播发现新入口

添加可浏览的列表，并将其连接到观看流程。

阅读文档

<script setup>
import { LiveList } from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveList @live-room-click="openLiveRoom" />
</template>

个性化定制

自定义您的 Vue 直播 UI Kit

在 Vue 应用中围绕直播体验组织视频、观众互动和导航。

您的视觉品牌形象

使用平台提供的自定义选项调整视觉呈现。

阅读文档

开始使用

为您的 Vue 应用添加直播

01
创建您的应用
为应用和测试用户启用 Live。
打开 Live 控制台
02
添加 Vue 直播 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
连接到您的第一个房间
使用一个账户开播，另一个账户观看。
配置身份验证

Vue Live UI Kit

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

import { useLoginState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();
await login({ sdkAppId: SDKAppID, userId: userID, userSig });

Vue 直播 UI Kit 常见问题

我可以使用 Vue Live UI Kit 构建什么？

Vue 直播 UI Kit 包含主播端、观众端和房间列表界面。将这些 TUILiveKit 组件连接到您的用户账号和 Vue 导航，即可打造完整的观看流程。

此 UI Kit 如何与 SDK 配合使用？

UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面，请选择 SDK。

Web 直播 SDK

如何将 Vue 直播观众端连接到转播？

启用 Live 服务，验证观众身份，并加入主播创建的房间。使用不同账号测试 Vue 观众端界面，并按照平台指南完成配置。

Vue 观众端集成指南

如何验证 Vue Live Streaming UI Kit 用户的身份？

在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。

阅读身份验证指南

Vue Live Streaming UI Kit 可以免费使用吗？

该界面与托管式 Live 服务承担不同的职责。请为您的应用开通该服务，并查看当前套餐、功能可用性和使用费用。

查看 Live 定价

如何将 Vue 直播 UI Kit 集成到 Vue 项目中？

使用文档所述的 Vue 集成和组件 API。在已连接视图之前初始化服务，并在视图卸载时移除监听器或释放资源。

阅读平台指南

发布应用前如何测试 Vue 直播 UI Kit？

测试主播与观众角色、支持的推流或播放事件及重连行为。

阅读平台指南

如何定制 Vue 直播 UI Kit 的界面？

开播前，通过 tuikit-atomicx-vue3 的 useLiveListState 配置主播布局。例如，updateLiveInfo({ layoutTemplate: 200 }) 选择横屏布局，模板 600 则选择竖屏动态网格。直播方向必须在开播前选定，直播过程中无法切换。请让预览与主播控件适配所选模板，不要仅修改 CSS 宽高比。

查看定制指南

Vue Live 集成支持

集成问题

获取 Vue 直播 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

讨论您的产品、预期用量和集成需求。

联系销售人员

为您的 Vue 应用添加直播

使用 Vue Live Streaming UI Kit 及其平台指南连接创作者与观众。

免费开始查看 UI Kit 指南

Vue 直播 UI Kit

Vue 直播 UI Kit 文档与示例

组件参考

接入指南

示例与源码

使用 Vue 进行产品直播演示

在 Vue 中观看直播活动

Vue 直播功能

开始直播

让人们相聚

打造属于您的产品体验

探索 Vue Live Streaming Components

为创作者提供一个起点

将观看体验融入您的应用

开启直播发现新入口

自定义您的 Vue 直播 UI Kit

您的视觉品牌形象

评论与内容

为您的 Vue 应用添加直播

创建您的应用

添加 Vue 直播 UI Kit

连接到您的第一个房间

Vue 直播 UI Kit 常见问题

我可以使用 Vue Live UI Kit 构建什么？

此 UI Kit 如何与 SDK 配合使用？

如何将 Vue 直播观众端连接到转播？

如何验证 Vue Live Streaming UI Kit 用户的身份？

Vue Live Streaming UI Kit 可以免费使用吗？

如何将 Vue 直播 UI Kit 集成到 Vue 项目中？

发布应用前如何测试 Vue 直播 UI Kit？

如何定制 Vue 直播 UI Kit 的界面？

Vue Live 集成支持

集成问题

讨论您的应用

为您的 Vue 应用添加直播