一、核心功能
| 功能分类 | 具体能力 |
| 实时观众展示 | 实时显示直播间在线观众列表，支持头像、昵称展示，提供清晰的观众信息视图，让主播能够直观了解观众构成。 |
| 响应式设计 | 组件支持桌面端和移动端两套 UI 方案，自动适配不同设备屏幕尺寸，提供一致的用户体验，满足多平台直播需求。 |
| 可定制化 UI | 提供灵活的插槽机制，支持自定义观众标记、头像样式等元素，让你能够根据业务需求定制观众列表的展示效果，打造独特的视觉体验。 |
二、步骤1：环境配置及开通服务
在进行快速接入之前，你需要参见 准备工作，满足相关环境配置及开通对应服务。
三、步骤2：安装依赖
npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savenpm install sass –save-devpnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactpnpm add sass –devyarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add sass –dev
四、步骤3：集成观众列表组件
在你的项目中引入并使用观众列表组件，可直接复制如下代码示例至你的项目中展示直播间观众列表。
AudienceList.tsxAudienceList.module.scssimport React from "react";import { useUIKit } from "@tencentcloud/uikit-base-component-react";import { useLiveAudienceState, LiveAudienceList } from "tuikit-atomicx-react";import styles from "./AudienceList.module.scss";const AudienceList: React.FC = () => { const { t } = useUIKit(); const { audienceCount } = useLiveAudienceState(); return ( <div className={styles.livePlayer__audienceList}> <div className={styles.livePlayer__audienceListTitle}> <span>{t('live_player_view.audience_list_title')} </span> <span className={styles.livePlayer__audienceCount}>({audienceCount})</span> </div> <div className={styles.livePlayer__audienceListContent}> <LiveAudienceList height="100%" /> </div> </div> );};export default AudienceList;.livePlayer__audienceList { display: flex; flex-direction: column; flex-shrink: 0; height: 30%; padding: 8px; background: var(–uikit-bg-color-operate); .livePlayer__audienceListTitle { padding: 12px 0; border-bottom: 1px solid var(–uikit-stroke-color-primary); @include text-size-16; } .livePlayer__audienceCount { font-weight: 400; color: var(–uikit-text-color-secondary); } .livePlayer__audienceListContent { flex: 1; overflow: hidden; }}
五、LiveAudienceList 组件属性
| Props 属性 | 类型 | 默认值 | 是否必填 | 说明 |
| children | (params: { audience: AudienceInfo; }) => React.ReactNode | – | 否 | 自定义观众标记（例如徽章、身份标识等），显示在头像和昵称之间。 |
| className | String | – | 否 | 自定义 CSS class 类型名 |
| style | CSSProperties | – | 否 | 自定义 CSS 样式 |
| height | String | – | 否 | 观众列表高度。 |
六、AudienceInfo 数据类型
| 属性 | 类型 | 默认值 | 说明 |
| userId | String | – | 观众 ID |
| userName | String | – | 观众名称（昵称） |
| avatarUrl | String | – | 观众头像地址 |
| userRole | Number | 2 | 观众角色。0：直播间房主1：直播间管理员2：普通观众 |
| isMessageDisabled | Boolean | false | 是否被禁止发送文字、表情消息。 |
| joinedTimestamp | Number | 0 | 观众进入直播间的时间。 |
| customInfo | Record<String, any> | – | 用户自定义属性 |
七、自定义示例
import { LiveAudienceList } from 'tuikit-atomicx-react';import type { AudienceInfo } from 'tuikit-atomicx-react';// 自定义组件属性，必须与 LiveAudienceList 组件 children 属性相同interface CustomAudienceProps { params: {audience: AudienceInfo} }// 用户自定义组件，显示用户角色const CustomAudience: React.FC<CustomAudienceProps> = ({ params }) => { return ( <div className="custom-audience-item"> { params.audience.userRole === 2 ? "[观众]" : (params.audience.userRole === 1 ? "[管理员]" : "[主播]") } </div> );};const LivePlayer: React.FC<LivePlayerProps> = ({ className }) => { return ( <div className={`${styles.livePlayer} ${className || ''}`}> <div className={styles.livePlayer__audienceListContent}> {/* 设置 height、className、style 属性 */} <LiveAudienceList height="100%" className="my-class-name" style={{backgroundColor: "transparent"}}> {(params) => <CustomAudience params={params} />} {/* 在播放页观众列表中，使用自定义组件， 显示用户角色 */} </LiveAudienceList> </div> </div> );};
八、下一步
接入直播视频组件后，你可能还想继续接入弹幕消息、礼物等功能，可以参阅下表指引文档，继续接入这些功能。
| 功能 | 描述 | 集成指引 |
| 聊天弹幕组件 | 支持发送、接收并显示文字、表情消息。 | 聊天弹幕组件 (Web React) |
| 直播送礼组件 | 展示配置的礼物列表，支持发送礼物、礼物播放。 | 直播送礼组件 (Web React) |