实时音视频弹幕系统 (Web React)

本文对弹幕组件进行了详细的介绍，其中包含弹幕消息组件（BarrageList）和消息发送组件（BarrageInput）。您可以在已有项目中直接参考本文示例集成我们开发好的整体组件，也可以根据您的需求按照文档中的组件自定义部分对样式和布局进行深度的定制。
﻿
组件构成
组件名称
具体内容
弹幕消息组件（BarrageList）
负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
消息发送组件（BarrageInput）
提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。
组件接入
步骤1：环境配置及开通服务
在进行快速接入之前，您需要参考 准备工作，满足相关环境配置及开通对应服务。
步骤2：安装依赖
npm
pnpm
yarn
npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev
pnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
pnpm add sass --dev
yarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
yarn add sass --dev
步骤3：集成弹幕组件
在您的项目中引入并使用直播弹幕组件，可直接复制如下示例代码到您的项目中，展示完整的直播间弹幕消息组件以及消息发送组件。
MessageList.tsx
MessageList.module.scss
import React from "react";
import { useUIKit } from "@tencentcloud/uikit-base-component-react";
import { BarrageList, BarrageInput } from "tuikit-atomicx-react";
import styles from "./MessageList.module.scss";
﻿
const MessageList: React.FC = () => {
  const { t } = useUIKit();
  
  return (
    <div className={styles.livePlayer__messageList}>
      <div className={styles.livePlayer__messageListTitle}>
        <span>{t('live_player_view.message_list_title')}</span>
      </div>
      <div className={styles.livePlayer__messageListContent}>
        <BarrageList />
        <BarrageInput />
      </div>
    </div>
  );
};
﻿
export default MessageList;
﻿
.livePlayer__messageList {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin-top: 8px;
  padding: 8px;
  background: var(--uikit-bg-color-operate);
﻿
  .livePlayer__messageListTitle {
    padding: 12px 0;
    border-bottom: 1px solid var(--uikit-stroke-color-primary);
    @include text-size-16;
  }
﻿
  .livePlayer__messageListContent {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}
﻿
自定义组件
弹幕消息组件和消息发送组件提供了丰富的 Props 属性，用于功能和 UI 展示设置。
弹幕消息组件（BarrageList）
Props 属性名
参数类型
默认值
说明
Message
Component
﻿
IBarrageMessageComponentProps
﻿
自定义消息组件。
containerStyle
CSSProperties
-
自定义消息列表容器样式。
itemStyle
CSSProperties
-
自定义单条消息项样式。
height
String
-
组件高度，支持 CSS 单位。
style
CSSProperties
-
指定根元素样式的自定义样式。
className
String
-
设置在组件根 DOM 节点上的自定义样式类名。
消息发送组件（BarrageInput）
Props 属性名
类型
默认值
说明
containerClass
String
''
自定义容器的 CSS 类名。
containerStyle
CSSProperties
{}
自定义容器的内联样式。
width
String
-
组件宽度，支持 CSS 单位。
height
String
-
组件高度，支持 CSS 单位。
minHeight
String
'40px'
组件最小高度，支持 CSS 单位。
maxHeight
String
'140px'
组件最大高度，支持 CSS 单位。
placeholder
String
-
输入框占位符文本。
disabled
Boolean
false
是否禁用输入框。
autoFocus
Boolean
true
是否自动聚焦到输入框。
maxLength
Number
80
输入内容的最大字符数限制。
onFocus
() => void
-
输入框获得焦点事件处理函数。
onBlur
() => void
-
输入框失去焦点事件处理函数。
自定义示例
自定义样式和尺寸
// 消息列表
<BarrageList
  className="custom-barrage-list-name"
  style={{backgroundColor: "#FFFFFF"}}
  containerStyle={{backgroundColor: "#999999"}}
  itemStyle={{backgroundColor: "#000000"}}
  height="200px" />
﻿
// 消息输入
<BarrageInput 
  className="custom-barrage-input-name"
  autoFocus
  disabled={false}
  width="100%"
  height="100px"
  placeholder="请输入弹幕"
  />
自定义消息
﻿
import React from 'react';
import { BarrageList } from 'tuikit-atomicx-react';
import type { Barrage } from 'tuikit-atomicx-react';
﻿
interface ICustomMessageComponentProps {
  message: Barrage;
  isLastInChunk?: boolean;
  style?: React.CSSProperties;
}
﻿
const CustomMessage: React.FC<ICustomMessageComponentProps> = ({ message }) => {
  return (
    <div className="my-message-item">
      {message.sender.userName}: {message.textContent}
    </div>
  );
};
﻿
// 消息列表中，使用自定义消息组件
<BarrageList
  Message={CustomMessage}
/>
下一步
接入直播视频组件后，您可能还想继续接入礼物、观众列表等功能，可以参阅下表指引文档，继续接入这些功能。
功能
描述
集成指引
直播送礼组件
展示配置的礼物列表，支持发送礼物、礼物播放。
﻿直播送礼组件 (Web React)﻿
观众列表组件
展示当前直播间观众信息。
﻿观众列表组件 (Web React)﻿
﻿

组件名称	具体内容
弹幕消息组件（BarrageList）	负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
消息发送组件（BarrageInput）	提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。

Props 属性名	参数类型	默认值	说明
Message	Component	IBarrageMessageComponentProps	自定义消息组件。
containerStyle	CSSProperties	-	自定义消息列表容器样式。
itemStyle	CSSProperties	-	自定义单条消息项样式。
height	String	-	组件高度，支持 CSS 单位。
style	CSSProperties	-	指定根元素样式的自定义样式。
className	String	-	设置在组件根 DOM 节点上的自定义样式类名。

Props 属性名	类型	默认值	说明
containerClass	String	''	自定义容器的 CSS 类名。
containerStyle	CSSProperties	{}	自定义容器的内联样式。
width	String	-	组件宽度，支持 CSS 单位。
height	String	-	组件高度，支持 CSS 单位。
minHeight	String	'40px'	组件最小高度，支持 CSS 单位。
maxHeight	String	'140px'	组件最大高度，支持 CSS 单位。
placeholder	String	-	输入框占位符文本。
disabled	Boolean	false	是否禁用输入框。
autoFocus	Boolean	true	是否自动聚焦到输入框。
maxLength	Number	80	输入内容的最大字符数限制。
onFocus	() => void	-	输入框获得焦点事件处理函数。
onBlur	() => void	-	输入框失去焦点事件处理函数。

功能	描述	集成指引
直播送礼组件	展示配置的礼物列表，支持发送礼物、礼物播放。	直播送礼组件 (Web React)
观众列表组件	展示当前直播间观众信息。	观众列表组件 (Web React)

弹幕系统 (Web React)

本页目录：

组件构成

组件接入

步骤1：环境配置及开通服务

步骤2：安装依赖

步骤3：集成弹幕组件

自定义组件

弹幕消息组件（BarrageList）

消息发送组件（BarrageInput）

自定义示例

下一步