tencent cloud

Feedback

Interactive Gifts (TUILiveKit)

Last updated: 2024-12-27 22:03:04

    Feature Introduction

    The Interactive Gift Component is a virtual gift interaction platform designed to add more fun to users' social experiences. With this component, users can send virtual gifts to their favorite live streamers to show their appreciation, affection, and support.
    The interactive gift component supports setting likes, gift sending panel, send gift, play normal gift animation, play svga gift animation, etc.
    Flutter
    Android
    iOS
    The interactive gift component provides 2 view components:
    GiftSendWidget: send gift message view, clicking it can bring up the gift panel.
    GiftDisplayWidget: receive gift message view, it will display gift messages on this view.
    The effect is shown below:
    Gift Display Panel
    Normal Gift Playing Effect
    Full-Screen Gift Playing Effect
    
    
    
    
    
    
    
    
    
    The gift component mainly provides 2 APIs:
    TUIGiftListView: A gift panel displaying the gift list, sending gifts, and recharging.
    TUIGiftPlayView: A panel for playing gifts, automatically listens for gift messages.
    The effect is shown below:
    Gift Display Panel
    Normal Gift Playing Effect
    Full-Screen Gift Playing Effect
    
    
    
    
    
    
    
    
    
    The gift component mainly provides 2 APIs:
    TUIGiftListView: A gift panel displaying the gift list, sending gifts, and recharging.
    TUIGiftPlayView: A panel for playing gifts, automatically listens for gift messages.
    The effect is shown below:
    Gift Display Panel
    Normal Gift Playing Effect
    Full-Screen Gift Playing Effect
    
    
    
    
    
    
    
    
    

    Quick Connection

    Notes:
    Note: If you have already integrated the LiveKit component, we have by default included the gift component in LiveKit. You can directly experience the interactive gift feature in LiveKit.

    Adding the Gift Component to the Project

    Flutter
    Android
    iOS
    1. Download the gift component from GitHub to your local machine, and copy the gift (TUILiveKit/Flutter/gift) directory to your project directory. For example, integrating the gift component in livekit, the directory is shown as below:
    
    
    
    2. Add the local dependency of barrage under the dependencies section in your project's pubspec.yaml file.
    dependencies:
    flutter:
    sdk: flutter
    flutter_localizations:
    sdk: flutter
    intl: ^0.19.0
    # Add gift local dependency
    gift:
    path: ../gift
    3. Configure multilingual support by adding the multilingual support of the gift component to the localizationsDelegates and supportedLocales properties of your MaterialApp.
    MaterialApp(localizationsDelegates: const [
    ...GiftLocalizations.localizationsDelegates,
    ], supportedLocales: const [
    ...GiftLocalizations.supportedLocales,
    ], theme: ThemeData.dark(), home: const HomeScreen());
    Integrate the LiveKit component for normal use, see details on GitHub.
    Integrate the LiveKit component for normal use, see details on GitHub.

    Integrating the Gift Sending Component

    Flutter
    Android
    iOS
    Construct GiftSendController and GiftSendWidget objects where you need to integrate the gift sending message, and add the constructed GiftSendWidget object to your Widget tree. Example code is as follows:
    GiftSendController _giftSendController = GiftSendController(
    roomId: "liveRoomId", /// liveRoomId Replace with your live room ID
    owner: ownerInfo, /// ownerInfo Replace with your live room host information
    self: selfInfo, /// selfInfo Replace with your login user information
    );
    
    GiftSendWidget(controller: _giftSendController);
    Implement the OnGiftListener in TUIGiftListView, handling the onSendGift callback, to obtain the number and information of gifts. After preprocessing, you can call the sendGift function of TUIGiftListView for the actual sending of gifts.
    public void onSendGift(TUIGiftListView giftListView, TUIGift gift, int giftCount) {
    //... Preprocessing here, such as verifying the current user's balance
    TUIGiftUser receiver = new TUIGiftUser();
    //... Set gift recipient information here
    giftListView.sendGift(gift, giftCount, receiver);
    }
    Implement the OnGiftListener in TUIGiftListView, handling the onSendGift callback, to obtain the number and information of gifts. After preprocessing, you can call the sendGift function of TUIGiftListView for the actual sending of gifts.
    func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {
    //... Preprocessing here, such as verifying the current user's balance
    let receiver = TUIGiftUser()
    //... Set gift recipient information here
    view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)
    }

    Integrating the Gift Display Component

    Flutter
    Android
    iOS
    Construct GiftDisplayController and GiftDisplayWidget objects where you need to integrate the gift display message, and add the constructed GiftDisplayWidget object to your Widget tree. Example code is as follows:
    GiftDisplayController _giftDisplayController = GiftDisplayController(
    rroomId: "liveRoomId", /// liveRoomId Replace with your live room ID
    owner: ownerInfo, /// ownerInfo Replace with your live room host information
    self: selfInfo, /// selfInfo Replace with your login user information
    );
    
    GiftDisplayWidget(controller: _giftDisplayController!);
    The gift display component TUIGiftPlayView will receive and display gift messages on its own.
    // File location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/gift/TUIGiftPlayView.java
    TUIGiftPlayView giftPlayView = new TUIGiftPlayView(mContext, roomId);
    The gift display component TUIGiftPlayView will receive and display gift messages on its own.
    let giftPlayView = GiftPlayView(groupId: roomId)

    Listening to Gift Sending and Receiving Messages

    Flutter
    Android
    iOS
    If you need to get callback information for sending and receiving gifts, you can call the GiftDisplayController's setGiftCallback method. Example code is as follows:
    _giftDisplayController?.setGiftCallback(
    onReceiveGiftCallback: _onReceiveGiftCallback, /// _onReceiveGiftCallback can be replaced with your custom handling method
    onSendGiftCallback: _onSendGiftCallback, /// _onSendGiftCallback can be replaced with your custom handling method
    );
    If you need to get callback information for receiving gifts, you can implement the TUIGiftPlayView's TUIGiftPlayViewListener's onReceiveGift function.
    public interface TUIGiftPlayViewListener {
    void onReceiveGift(TUIGift gift, int giftCount, TUIGiftUser sender, TUIGiftUser receiver);
    //...
    }
    If you need to get callback information for receiving gifts, you can implement the GiftPlayView's delegate GiftPlayViewDelegate's giftPlayView:onReceiveGift:gift:giftCount:sender:receiver function.
    func giftPlayView(_ giftPlayView: TUIGiftPlayView, onReceiveGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser) {
    // Custom Processing
    }

    Custom Gift Panel

    Flutter
    Android
    iOS
    If you need to modify the gift list of the gift panel, you can call the GiftSendController's setGiftList method, as shown below:
    List<GiftModel> giftList = [ /// Customize your gift list data source
    GiftModel(giftId: "1", giftName: "Egg", imageUrl: "giftImageUrl", price: 10),
    GiftModel(giftId: "2", giftName: "Star", imageUrl: "giftImageUrl", price: 10),
    ];
    
    _giftSendController.setGiftList(giftList);
    If you need to modify the gift list of the gift panel:
    // File location: tuilivekit/src/main/java/com/trtc/uikit/livekit/liveroom/view/audience/component/AudienceFunctionView.java
    
    mGiftCloudServer.queryGiftInfoList((error, result) -> post(() -> {
    if (error == Error.NO_ERROR) {
    mGiftListView.setGiftList(result);
    } else {
    ToastUtil.toastLongMessage("query gift list error, code = " + error);
    }
    }));
    Note:
    Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
    The animationUrl of the gift requires an SVGA animation.
    If you need to modify the gift list of the gift panel:
    // File location: iOS/TUILiveKit/Sources/Component/Gift/Store/TUIGiftStore.swift
    
    class TUIGiftStore {
    static let shared = TUIGiftStore()
    private init() {
    giftCloudServer.queryGiftInfoList { [weak self] error, giftList in
    guard let self = self else { return }
    if error == .noError {
    self.giftList = giftList
    }
    }
    }
    var giftList: [TUIGift] = []
    let giftCloudServer: IGiftCloudServer = GiftCloudServer()
    }
    
    
    // File location: iOS/TUILiveKit/Sources/LiveStream/Main/Audience/AudienceView.swift
    func getRouteView(route: Route) -> UIView? {
    if route == .giftView {
    giftPanelView.setGiftList(TUIGiftStore.shared.giftList)
    return giftPanelView
    } else {
    return nil
    }
    }
    Note:
    Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
    The animationUrl of the gift requires an SVGA animation.
    Customers implement the logic of the queryGiftInfoList method themselves to obtain a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
    The gift's animationUrl requires an SVGA animation.

    FAQs

    Gift Component Initialization Timing

    Since the gift component's controller needs to integrate some live room information parameters and user information, it should be loaded after the audience enters the live broadcast room or the anchor creates a live streaming room.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support