礼物播放器

组件概述

礼物播放器主要提供展示子弹动画、展示全屏动画(svga、mp4格式),点赞动画的播放功能。
子弹动画
全屏动画



组件接入

注意:
如果您使用了腾讯礼物动画特效去播放礼物,需要开通礼物动画特效的套餐,具体流程请参考 礼物动画特效 文档。
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 SDKIM SDKtuiroomengine 以及公共库 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 上下载GiftCommon文件夹到本地。

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

组件使用

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

接入礼物播放器

Android
iOS
Flutter
礼物展示组件 GiftPlayView 自身会接收并播放礼物消息。
GiftPlayView giftPlayView = new GiftPlayView(getContext());
giftPlayView.init("roomId");
礼物展示组件 GiftPlayView 自身会接收并播放礼物消息。
您只需要创建 GiftPlayView 对象并将其添加到您的视图上即可。
import TUIGift

let giftPlayView = GiftPlayView(groupId: roomId)
// ...此处将giftPlayView添加到您的父视图上并调整布局
在您需要接入显示礼物消息的地方构建 GiftDisplayControllerGiftDisplayWidget 对象,并将构建的 GiftDisplayWidget 对象添加到您的 Widget 树上。示例代码如下:
GiftDisplayController _giftDisplayController = GiftDisplayController(
rroomId: "roomId", /// roomId 替换为您的直播间ID
owner: ownerInfo, /// ownerInfo 替换为您的直播间主播信息
self: selfInfo, /// selfInfo 替换为您的登录用户信息
);

GiftDisplayWidget(controller: _giftDisplayController!);

监听礼物收发消息

Android
iOS
Flutter
若需要获取接收礼物的回调信息,可实现 GiftPlayViewTUIGiftPlayViewListener 中的 onReceiveGift 函数。
giftPlayView.setListener(new GiftPlayView.TUIGiftPlayViewListener() {
@Override
public void onReceiveGift(Gift gift, int giftCount, GiftUser sender, GiftUser receiver) {
}

@Override
public void onPlayGiftAnimation(GiftPlayView view, Gift gift) {

}
});
说明:
在您成功进入房间之后,您才会收到onReceiveGift 回调。
若需要获取接收礼物的回调信息,可实现 GiftPlayView 的 代理GiftPlayViewDelegate 中的 giftPlayView:onReceiveGift:gift:giftCount:sender:receiver 函数。
import TUIGift

func giftPlayView(_ giftPlayView: GiftPlayView, onReceiveGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser)
// 自定义处理
}
当播放全屏礼物动画时,您会收到 giftPlayView:onPlayGiftAnimation:gift 回调,在该回调中您可调用 playGiftAnimation 函数播放全屏礼物动画。
import TUIGift

func giftPlayView(_ giftPlayView: GiftPlayView, onPlayGiftAnimation gift: TUIGift) {
let fileUrl = "" //您需要将gift.animationUrl对应的动画资源保存到沙箱中,然后将沙箱中的动画地址赋值给fileUrl
giftPlayView.playGiftAnimation(playUrl: fileUrl)
}
说明:
您需要确保给函数 playGiftAnimation 传入的参数是本地沙箱路径。
若需要获取收发礼物的回调信息,您可以调用 GiftDisplayControllersetGiftCallback 方法, 示例代码如下所示:
_giftDisplayController?.setGiftCallback(
onReceiveGiftCallback: _onReceiveGiftCallback, /// _onReceiveGiftCallback 可以替换为您的自定义处理方法
onSendGiftCallback: _onSendGiftCallback, /// _onSendGiftCallback 可以替换为您的自定义处理方法
);