消息发送组件

组件概述
消息发送组件 可以让用户可以在弹幕中输入表情和文本消息，并将该消息发送到直播间中，直播间中的用户都可以通过直播渲染组件接收到消息并显示到屏幕上，从而增强直播的趣味性，使得互动体验更加愉快和生动。
Android
iOS
Flutter
BarrageInputView：消息发送组件，可以让用户可以在弹幕中输入表情和文本消息，并将该消息发送到直播间中。
BarrageInputView：消息发送组件，可以让用户可以在弹幕中输入表情和文本消息，并将该消息发送到直播间中。
BarrageSendWidget：消息发送组件，可以让用户可以在弹幕中输入表情和文本消息，并将该消息发送到直播间中。
效果图展示：
﻿
说明：
1. 支持系统键盘和表情键盘切换。
2. 为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如需获得授权可 提交工单 联系我们。
﻿
﻿
﻿
组件接入
Android
iOS
Flutter
新选项
一、下载 TUILiveKit 组件
在 GitHub 中克隆/下载代码，然后拷贝 Android 目录下的 tuilivekit 子目录到您当前工程中的 app 同一级目录中，如下图：
﻿
﻿
﻿
二、工程配置
1. 在工程根目录下的settings.gradle.kts (或settings.gradle)文件中添加 jitpack 仓库地址：中添加 jitpack 仓库依赖（下载播放礼物 svg 动画的三方库 SVGAPlayer）：
settings.gradle.kts
settings.gradle
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
﻿
        // 添加 jitpack 仓库地址
        maven { url = uri("https://jitpack.io") }
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
﻿
        // 添加 jitpack 仓库地址
        maven { url 'https://jitpack.io' }
    }
}
2. 在工程根目录的settings.gradle.kts (或settings.gradle)文件中增加如下代码，它的作用是将您下载的 tuilivekit 组件导入到您当前的项目中：
settings.gradle.kts
settings.gradle
include(":tuilivekit")
include ':tuilivekit'
3. 在 app 目录下找到build.gradle.kts(或build.gradle)文件，并在其中增加如下代码，它的作用是声明当前 app 对新加入的 tuilivekit 组件的依赖：
build.gradle.kts
build.gradle
api(project(":tuilivekit"))
api project(':tuilivekit')
说明：
TUILiveKit 工程内部已经默认依赖：TRTC SDK、IM SDK、tuiroomengine 以及公共库 tuicore，不需要开发者单独配置。如需进行版本升级，则修改tuilivekit/build.gradle文件即可。
4. 由于我们在 SDK 内部使用了Java 的反射特性，需要将 SDK 中的部分类加入不混淆名单，因此需要您在proguard-rules.pro文件中添加如下代码：
-keep class com.tencent.** { *; }
-keep class com.trtc.uikit.livekit.livestreamcore.** { *; }
-keep class com.trtc.uikit.livekit.component.gift.store.model.** { *; }
-keep class com.squareup.wire.** { *; }
-keep class com.opensource.svgaplayer.proto.** { *; }
﻿
-keep class com.tcmediax.** { *; }
-keep class com.tencent.** { *; }
-keep class com.tencent.xmagic.** { *; }
-keep class androidx.exifinterface.** {*;}
-keep class com.google.gson.** { *;}
# Tencent Effect SDK - beauty
-keep class com.tencent.xmagic.** { *;}
-keep class org.light.** { *;}
-keep class org.libpag.** { *;}
-keep class org.extra.** { *;}
-keep class com.gyailib.**{ *;}
-keep class com.tencent.cloud.iai.lib.** { *;}
-keep class com.tencent.beacon.** { *;}
-keep class com.tencent.qimei.** { *;}
-keep class androidx.exifinterface.** { *;}
5. 在 app目录下找到AndroidManifest.xml 文件，在 application 节点中添加 tools:replace="android:allowBackup"和android:allowBackup="false"，覆盖组件内的设置，使用自己的设置。
  // app/src/main/AndroidManifest.xml
  
  <application
    ...
  
    // 添加如下配置覆盖 依赖的 sdk 中的配置
    android:allowBackup="false"
    tools:replace="android:allowBackup">
﻿
使用 CocoaPods 导入组件，导入组件具体骤如下：
1. 您需要在GitHub上下载Barrage文件夹到本地。
﻿
2. 请在您的项目 Podfile 文件中添加 pod 'TUIBarrage' 依赖。
Swift
target 'xxxx' do
  ...
  ...
  pod 'TUIBarrage', :path => '../Component/Barrage/TUIBarrage.podspec' 
  //路径是您的Podfile文件与TUIBarrage.Podspec文件之间的相对路径
end
如果您没有Podfile 文件，首先终端cd 到xxxx.xcodeproj目录，然后通过以下命令创建：
pod init
3. 在终端中，首先cd到Podfile目录下，然后执行以下命令，安装组件。
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. 配置多语言支持，在您应用 MaterialApp 的 localizationsDelegates 和 supportedLocales 属性上添加 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);
﻿