Live
  • Overview
  • Andorid
    • Demo のクイックスタート
    • インテグレーション
    • インターフェースドキュメンテーション
    • インタラクティブオンスクリーンコメント
    • インタラクティブギフト
    • リリース説明
    • よくあるご質問
  • iOS
    • Demo のクイックスタート
    • インテグレーション
    • インターフェースドキュメンテーション
    • インタラクティブオンスクリーンコメント
    • インタラクティブギフト
    • リリース説明
    • よくあるご質問
  • Overview
    • Overview
  • サービスをアクティブ化します
  • 価格
    • 無料時間
    • リアルタイムインタラクティブライブストリーミング Live の月額パッケージ
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • ErrorCode
Live
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

インタラクティブオンスクリーンコメント

Overview

Interactive Bullet-screen feature supports the following functions: sending barrage messages, inserting custom messages, and custom message styles. Interactive Bullet-screen messages support emoji input, adding fun to the messages and making the interaction more enjoyable.



Display barrage



Send barrage
Note:
Support switching between system keyboard and emoji keyboard.

Integration

The barrage component mainly provides two Objects:
TUIBarrageButton:Clicking it can bring up the input interface.
TUIBarrageDisplayView:Used for displaying barrage messages.
In scenarios where barrage messages need to be sent, create a TUIBarrageButton , which can bring up the input interface when clicked:
let barrageButton: TUIBarrageButton = TUIBarrageButton(roomId: xxx)
view.addSubview(barrageButton)
// layout barrageButton
In scenarios where barrage messages need to be displayed, use TUIBarrageDisplayView to show the barrage messages:
let barrageDisplayView: TUIBarrageDisplayView = TUIBarrageDisplayView(roomId: xxx) view.addSubview(barrageDisplayView)
// layout barrageDisplayView

Customize message style

Implement the createCustomCell delegate function in the TUIBarrageDisplayViewDelegate of TUIBarrageDisplayView, which is used to customize the barrage message style.
barrageDisplayView.delegate = self
extension UIViewController: TUIBarrageDisplayViewDelegate {
func barrageDisplayView(_ barrageDisplayView: TUIBarrageDisplayView, createCustomCell barrage: TUIBarrage) -> UIView? {
// Return custom barrage UI here.
}
}
Note:
When displaying messages, TUIBarrageDisplayView will first call the delegate function barrageDisplayView:createCustomCell to obtain the user's custom style for a specific barrage message. If it returns nil, the default barrage style of TUIBarrageDisplayView will be used.

InsertCustomMessage

The barrage display component TUIBarrageDisplayView provides the external interface method insertBarrages for inserting custom messages (in batches). Custom messages are usually used in combination with custom styles to achieve different display effects.
// Example: Insert a gift message in the barrage area.
let barrage = TUIBarrage() barrage.content = "gift" barrage.user.userId = sender.userId barrage.user.userName = sender.userName barrage.user.avatarUrl = sender.avatarUrl barrage.user.level = sender.level barrage.extInfo["xxx"] = "xxx" barrageDisplayView.insertBarrages(barrage);
Note:
The extInfo of TUIBarrage is a Map, used for storing custom data.