消息发送组件

组件概述

消息发送组件 可以让用户可以在弹幕中输入表情和文本消息,并将该消息发送到直播间中,直播间中的用户都可以通过直播渲染组件接收到消息并显示到屏幕上,从而增强直播的趣味性,使得互动体验更加愉快和生动。
Android
iOS
Flutter
BarrageInputView:消息发送组件,可以让用户可以在弹幕中输入表情和文本消息,并将该消息发送到直播间中。
BarrageInputView:消息发送组件,可以让用户可以在弹幕中输入表情和文本消息,并将该消息发送到直播间中。
BarrageSendWidget:消息发送组件,可以让用户可以在弹幕中输入表情和文本消息,并将该消息发送到直播间中。
效果图展示:

说明:
1. 支持系统键盘表情键盘切换。
2. 为尊重表情设计版权,TUILiveKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有,可有偿授权使用,如需获得授权可 提交工单 联系我们。




组件接入

Android
iOS
Flutter
新选项
1. GitHub 下载 TUILiveKit 到本地。
2. 将 Android/tuilivekit/component/barrage 目录拷贝到您的工程中。
3. 在您的 settings.gradle.kts 或者 settings.gradle 文件增加配置:
settings.gradle.kts
settings.gradle
include(":barrage")
include ':barrage'
4. 在您需要引入的工程的 build.gradle.kts 或者 build.gradle 文件中,增加依赖配置:
build.gradle.kts
build.gradle
api(project(":barrage"))
api project(':barrage')

使用 CocoaPods 导入组件,导入组件具体骤如下:
1. 您需要在GitHub上下载Barrage文件夹到本地。

2. 请在您的项目 Podfile 文件中添加 pod 'TUIBarrage' 依赖。
Swift
target 'xxxx' do
...
...
pod 'TUIBarrage', :path => '../Component/Barrage/TUIBarrage.podspec'
//路径是您的Podfile文件与TUIBarrage.Podspec文件之间的相对路径
end
如果您没有Podfile 文件,首先终端cdxxxx.xcodeproj目录,然后通过以下命令创建:
pod init
3. 在终端中,首先cdPodfile目录下,然后执行以下命令,安装组件。
pod install
4. 您在接入和使用过程中遇到的任何问题,欢迎给我们 反馈
1. 在项目工程的 pubspec.yaml 文件的 dependencies 节点中,添加 barrage 的依赖。
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.19.0
# 添加 barrage 依赖
live_uikit_barrage: ^1.0.0
2. 执行 flutter pub get 命令
3. 配置多语言支持,在您应用 MaterialApplocalizationsDelegatessupportedLocales 属性上添加 gift 组件的多语言支持。
MaterialApp(localizationsDelegates: const [
...BarrageLocalizations.localizationsDelegates,
], supportedLocales: const [
...BarrageLocalizations.supportedLocales,
],
// ...
);


组件使用

说明:
由于弹幕组件需要直播间信息参数,所以需要在观众进入直播间或者主播创建直播间后,再加载弹幕组件。

接入发送弹幕消息组件

Android
iOS
Flutter
在需要发送弹幕的位置,创建 BarrageInputView ,点击后可以拉起输入界面:
BarrageInputView barrageInputView = new BarrageInputView(mContext);
barrageInputView.init(roomId);
mBarrageInputContainer.addView(barrageInputView);
在需要发送弹幕的位置,创建 BarrageInputView ,点击后可以拉起输入界面:
import TUIBarrage

let barrageInputView = BarrageInputView(roomId: roomId)
// ...此处将barrageInputView添加到您的父视图上并调整布局
说明:
您只有在进房成功后,才可成功发送弹幕到房间内。
在您需要接入发送弹幕消息的地方构建 BarrageSendController 和 BarrageSendWidget 对象,并将构建的 BarrageSendWidget 对象添加到您的 Widget 树上。示例代码如下:
BarrageSendController _sendController = BarrageSendController(
roomId: "liveRoomId", /// liveRoomId 替换为您的直播间ID
ownerId: "liveOwnerId", /// liveOwnerId 替换为您的直播间主播ID
selfUserId: "selfUserId", /// selfUserId 替换为您的当前登录的用户ID
selfName: "selfUserName"; /// selfUserName 替换为您的当前登录的用户昵称
BarrageSendWidget(controller: _sendController);