TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
观众观看（H5 移动端浏览器）
概述
本文对 TUILiveKit Demo 中的观看页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
功能概览
功能分类 | 具体能力 |
直播视频播放 | 高清流畅的直播体验 |
弹幕互动 | 实时弹幕交流 |
观众列表 | 查看在线观众信息 |
关注主播 | 一键关注喜欢的主播 |
全屏播放 | 沉浸式观看体验 |
Web 桌面浏览器支持 | 跨平台兼容 |
功能展示
观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。
快速接入
步骤1：环境配置及开通服务
步骤2: 安装依赖
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
步骤3: 观看页面接入
在您的项目下创建
live-player.vue 文件，可直接复制如下代码至您的项目中集成观看页面。<template><UIKitProvider language="zh-CN" theme="dark"><div class="container"><!-- 直播核心区域 --><section class="live"><header class="header"><IconArrowStrokeBack class="back-btn" size="20" /><Avatar :src="currentLive?.liveOwner.avatarUrl" :size="32" class="avatar" /><span class="user-name">{{ currentLive?.liveOwner.userName || currentLive?.liveOwner.userId }}</span></header><LiveCoreView class="player" /></section><div class="sidebar"><!-- 在线观众列表 --><section class="audience"><header class="section-header"><h3> 在线观众 <span>({{ audienceList.length }})</span></h3></header><LiveAudienceList class="list" /></section><!-- 消息列表 & 消息输入框 --><section class="barrage"><header class="section-header"><h3>消息列表</h3></header><BarrageList class="list" /><BarrageInput class="input" height="48px" /></section></div></div></UIKitProvider></template><script setup lang="ts">import { LiveAudienceList, BarrageList, BarrageInput, useLiveAudienceState, LiveCoreView, useLiveState, Avatar, useLoginState } from 'tuikit-atomicx-vue3';import { UIKitProvider, IconArrowStrokeBack } from '@tencentcloud/uikit-base-component-vue3';const { audienceList } = useLiveAudienceState();const { currentLive } = useLiveState();const { login } = useLoginState();async function initLogin() {try {await login({sdkAppId: 0, // SDKAppID, 可以参考步骤 1 获取userId: 'xxx', // UserID, 可以参考步骤 1 获取userSig: 'xxx', // userSig, 可以参考步骤 1 获取});} catch (error) {console.error('登录失败:', error);}}onMounted(async () => {await initLogin();});</script><style>:global(body){height:100vh;width:100vw;margin:0;padding:0;overflow:hidden;font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:70% 30%;height:100vh;width:100vw;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
步骤4: 启动项目
npm run dev
自由定制
另外，我们也支持您根据项目需求对观看页面进行 UI 定制能力。主要可供定制的能力如下表所示。可供定制内容包括但不限于对源码中的颜色主题、字体、圆角、按钮、图标、输入框、弹框等内容，都可以进行增加、删除、修改等定制操作，下列分别给出颜色主题、按钮以及图标的定制示例，您可以参考实现方式通用到其他组件，满足您的 UI 定制需要。
类别 | 功能 | 描述 |
直播信息展示 | 自定义观看页面信息区域展示 | 支持： 展示/隐藏 Logo，替换为您需要的 Logo UI 定制、展示/隐藏关注按钮，替换为您需要的按钮风格 |
在线观众 | 自定义观众信息展示 | 支持： 展示/隐藏观众等级 观众信息字体、颜色 UI 自定义设置 替换为您需要的 Icon 风格 |
消息列表 | 自定义消息弹幕区域展示 | 支持： 展示/隐藏聊天输入区域 支持 UI 定制聊天气泡风格、定制观众等级等内容 |
颜色主题
参见步骤3中代码示例，您可以使用操作 theme 的值来满足您切换颜色主题。
<UIKitProvider theme="dark"> // theme 传入 dark 时，界面整体颜色主题为黑色主题xxx // theme 传入 light 时，界面整体颜色主题为白色主题</UIKitProvider>
按钮 Button / 图标 Icon
若您需要对按钮 Button 或者图标 Icon 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以观看页面操作的 Icon 为例。参考下图，您可以找到对应 Button / Icon 指定位置源码，对当前部分的按钮进行增加、删除、替换等 UI 定制操作。
播放直播流
方式一：指定 LiveId 播放
若您需要指定 LiveId 进行播放，您需要在上述快速接入中的步骤3代码基础上增量添加如下内容，参考方式如下：
//live-player.vueimport { onMounted } from 'vue';import { useLiveState } from 'tuikit-atomicx-vue3';const { joinLive } = useLiveState();onMounted(async () => {await joinLive({ liveId: 'xxx' }); // 输入 liveId 加入直播间，具体参数含义可参考步骤 1 中的准备工作});
方式二：路由配置
由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目
src 目录下新建 router 文件夹，并创建 index.ts 文件。然后，在您的主文件（例如 main.ts 或 index.ts）中引入并使用路由。可参考 GitHub 代码示例, 如需要直播列表，可参考文档 直播列表。//src/router/index.tsimport { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/live-player',component: () => import('../views/live-player.vue'),},// 如果需要直播列表功能，可添加如下路由// {// path: '/live-list',// component: () => import('../views/live-list.vue'),// },];const router = createRouter({history: createWebHistory(),routes,});export default router;// src/main.tsimport { createApp } from 'vue';import App from './App.vue';import router from './router';const app = createApp(App);app.use(router);app.mount('#app');
文档反馈