Tencent Cloud

Recent Pages

Flutter

Last updated: 2024-12-13 18:34:08

Feature Introduction
The interactive barrage feature is an important real-time communication tool that supports various interactive methods. Users can input emoji and text messages in the barrage, enhancing the entertainment value of the messages and making the interaction experience more enjoyable and lively. Through this feature, the audience can engage in richer communication with anchors and other viewers during live broadcasts, enhancing the overall sense of participation and fun. The interactive barrage feature has been implemented in TUILiveKit through Chat.
The barrage component mainly provides 2 Widget components, the send barrage messages Widget (BarrageSendWidget) and the display barrage messages Widget (BarrageDisplayWidget):
BarrageSendWidget: The send barrage messages Widget, which can bring up the input interface when clicked.
BarrageDisplayWidget: After receiving barrage messages, it will display the barrage messages on this Widget.
The effect is shown below:
BarrageSendWidget
BarrageDisplayWidget
Effect of accessing the barrage component in LiveKit
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
Quick Connection
Note:
If you have integrated the LiveKit component, we have already connected the barrage component in LiveKit by default, and you can experience the barrage function directly in LiveKit.
Add the barrage component to the item.
1. Download the barrage component from GitHub to your local, and copy the barrage (TUILiveKit/Flutter/barrage) directory to your project directory. For example, to access the barrage component in livekit, the directory is shown as below:
﻿
﻿
﻿
2. In the pubspec.yaml file of your project, add the local dependency of barrage under the dependencies node.
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
  # Add local dependency of barrage
  barrage:
    path: ../barrage
Access the send barrage messages component.
Construct the BarrageSendController and BarrageSendWidget objects where you need to access and send barrage messages, and add the constructed BarrageSendWidget object to your Widget tree. Sample code is as follows:
BarrageSendController _sendController = BarrageSendController(
                roomId: "liveRoomId",             /// liveRoomId   Replace with your live room ID
                ownerId:  "liveOwnerId",          /// liveOwnerId  Replace with your live room anchor ID 
                selfUserId: "selfUserId",         /// selfUserId   Replace with your current logged-in user ID
                selfName: "selfUserName";         /// selfUserName Replace with your current logged-in user nickname
BarrageSendWidget(controller: _sendController);
Access the display barrage messages component.
Construct the BarrageDisplayController and BarrageDisplayWidget objects where you need to access and display barrage messages, and add the constructed BarrageDisplayWidget object to your Widget tree. Sample code is as follows:
BarrageDisplayController _displayController = BarrageDisplayController(
                roomId: "liveRoomId",             /// liveRoomId   Replace with your live room ID
                ownerId:  "liveOwnerId",          /// liveOwnerId  Replace with your live room anchor ID 
                selfUserId: "selfUserId",         /// selfUserId   Replace with your current logged-in user ID
                selfName: "selfUserName";         /// selfUserName Replace with your current logged-in user nickname
BarrageDisplayWidget(controller: _displayController);
Insert local barrage messages.
When you need to insert local barrage messages, you can call the insertMessage method of BarrageDisplayWidget to insert local messages. For example, after LiveKit listens to an audience entering the room, you can insert a barrage message of the audience entering the room. Sample code is as follows:
BarrageUser barrageUser = BarrageUser();
barrageUser.userId = "enterRoomUserId";            /// UserId information displayed on the barrage.
barrageUser.userName = "enterRoomUserName";        /// Nickname information displayed on the barrage
barrageUser.avatarUrl = "enterRoomUserAvatar";     /// Avatar information displayed on the barrage
barrageUser.level = "66";                          /// Level information displayed on the barrage
﻿
Barrage barrage = Barrage();
barrage.user = barrageUser;
barrage.content = "enter the room";                /// Text content displayed on the barrage
_displayController.insertMessage(barrage);
﻿
Custom barrage message
When you need to display a custom barrage item for a specific barrage message, you can use the `setCustomBarrageBuilder` method of `BarrageDisplayWidget`. For example, the following code customizes a barrage to display red text:
/// 1. Define a custom barrage item builder
class GiftBarrageItemBuilder extends CustomBarrageBuilder {
  @override
  Widget buildWidget(BuildContext context, Barrage barrage) { /// Customize the Widget when `shouldCustomizeBarrageItem` returns true
    return const Text(
      barrage.content,
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),
    );
  }
﻿
  @override
  bool shouldCustomizeBarrageItem(Barrage barrage) {    /// Determine if the current barrage message needs customization based on the data model of the barrage message
    if (barrage.extInfo.keys.isNotEmpty) {
      return true;
    }
    return false;
  }
}
﻿
/// 2. Set `setCustomBarrageBuilder` for `BarrageDisplayWidget`
_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());
FAQs
Timing of bullet screen component initialization
Since the controller of the bullet screen component requires access to some live streaming room information parameters, it is necessary to load the bullet screen component after the audience enters the live streaming room or the anchors create the live streaming room.