TUILiveKit 的主播开播能力基于 LivePusher，为直播场景提供开箱即用的全功能界面，涵盖开播前预览、视频推流、直播互动与下播结算，可快速集成到您的应用中。集成提示：
功能概览
开播前预览：支持摄像头预览、横竖屏切换、直播标题与封面设置，移动端已支持美颜、倒计时开播。
视频直播开播：组件内部完成创建直播间与推流，直播中可查看直播时长、在线观众、网络与设备状态。
直播互动与管理：支持弹幕、礼物、观众连麦等互动，并提供在线用户列表与直播间管理能力。
主播开播前预览 | 主播开播 | 主播和观众连麦 |
 |  |  |
组件说明
LivePusher 是 @tencentcloud/livekit-web-vue3 npm 包暴露的组件，是主播开播的唯一入口。组件在模块加载时会按设备环境（isMobile）自动选择 LivePusherPC / LivePusherH5 实现。 快速接入
步骤 1：开通服务
步骤 2：代码集成
注意：
接入 LivePusher 开播之前，请确保已完成登录，否则创建直播间会失败。
步骤3：接入 LivePusher 开播
// 以 App.vue 为例<template><UIKitProvider theme="dark"><LivePusher /></UIKitProvider></template><script setup lang="ts">import { onMounted } from 'vue';import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';import { useLoginState } from 'tuikit-atomicx-vue3';import { LivePusher } from '@tencentcloud/livekit-web-vue3';const { login } = useLoginState();onMounted(() => {try {login({sdkAppId: 0, // SDKAppID - 开通服务时获取的 SDKAppIDuserId: '', // UserID - 用户 IDuserSig: '', // userSig - 用户签名，详细获取方式请参照下文参数说明});} catch (error) {console.error('登录失败:', error);throw error;}});</script>
组件 API 说明
Props
属性 | 类型 | 必填 | 生效端 | 说明 |
logoUrl | string | 否 | PC | 顶部品牌 logo 地址。 |
brandName | string | 否 | PC | 顶栏品牌名称。 |
Events
事件 | 参数 | 生效端 | 业务侧职责 |
leave | （（) => void) | PC、H5 | 卸载组件 / 路由跳转；无需重复结束直播。 |
logout | （（) => void) | PC | 需自行调用 logout 接口退出登录，再卸载组件/路由跳转。 |
下一步
恭喜您，现在您已经成功集成了主播开播页面 。接下来，您可以实现观众观看页、直播列表页和 UI 自定义等内容，可参考下表：
常见问题
开播后无声无画面？
需检查是否授权麦克风、摄像头权限。
点击开播按钮提示「未登录」？
需要自己调用创建直播间或开播接口吗？
不需要。在登录完成后，点击
LivePusher 页面的开始直播按钮即可完成开播，直播间 id 默认为 live_userId。
