tencent cloud

Feedback

Last updated: 2024-10-18 12:16:33
    Note:
    New Battle Arrivals, Limited Time Free Trial Available.

    Component Introduction

    Battle feature is an intense and entertaining real-time interactive feature designed for anchors and the audience. It allows anchors from different rooms to engage in real-time confrontations, enhancing the competitiveness and entertainment value of live streaming.TUILiveKit's battle feature supports up to 9 anchors participating simultaneously, providing a platform for anchors to showcase their talents and charisma, while offering an exciting viewing experience for the audience. Whether it's a talent competition, knowledge Q&A, or gaming sports, the battle feature creates more interactive opportunities for anchors and the audience, stimulating audience enthusiasm, enhancing the entertainment value and attraction of live streaming, thus bringing more surprises and value to both sides and promoting the diversified development of live streaming content.
    In Dual Battle
    Dual Battle results
    In Multi-player Battle
    Multi-player Battle results
    
    
    
    
    
    
    
    
    
    
    
    

    Instructions for Use

    Note:
    Before you initiate or accept a PK, please ensure that you are in a connected state.

    Anchor initiates battle

    Click the Battle button
    Stop Waiting for battle
    Exit Battle
    
    
    
    
    
    
    
    
    

    Anchor receives battle

    Anchor receives Battle invitation
    Anchor accepts Battle
    
    
    
    
    
    

    Custom Functionality

    Custom Battle waiting countdown style

    If you need the custom battle waiting countdown style, please refer to the following path for changes:
    // File location: iOS/TUILiveKit/Source/View/LiveRoom/View/Anchor/LivingView/Battle
    
    ├── BattleCountDownBackgroundView.swift // Battle waiting countdown background style
    └── BattleCountDownView.swift // Battle waiting countdown foreground style

    Custom Definition Dual Battle Score Style

    If you need the custom Definition Dual battle score style, please refer to the following path for changes:
    // File location:iOS/TUILiveKit/Source/View/LiveRoom/View/Common/Battle/SingleBattleScoreView.swift
    
    class SingleBattleScoreView: UIView {
    ...
    func constructViewHierarchy() {
    // View Hierarchy Construction
    }
    
    func activateConstraints() {
    // View Layout
    }
    
    }

    Custom Definition Multi Battle Score Style

    If you need the custom Definition Multi Battle score style, please refer to the following path for changes:
    // File location:iOS/TUILiveKit/Source/View/LiveRoom/View/Common/Battle/BattleMemberInfoView.swift
    
    class BattleMemberInfoView: UIView {
    ...
    func constructViewHierarchy() {
    // View Hierarchy Construction
    }
    
    func activateConstraints() {
    // View Layout
    }
    
    }

    Custom Definition Battle Score Result Style

    If you need a Custom Definition Battle Score Result Style, please refer to the following path for changes:
    // File location:iOS/TUILiveKit/Source/View/LiveRoom/View/Common/Battle/BattleInfoView.swift
    
    class BattleInfoView: UIView {
    ...
    func showBattleResult(store: LiveStore) {
    // Battle Result Display
    }
    }

    Key code

    Anchor Battle

    TUILiveKit Anchor battle feature is mainly based on BattleService. You can obtain the battle management object through store.serviceCenter.battleService and call the relevant battle API functions to implement the battle feature. For example, in the interaction between Anchor A and B, refer to the diagram below for the specific interaction sequence.
    
    
    
    Note:
    When inviting multiple participants to the battle, if any invitee accepts the battle, only the battle initiator, the battle invitee who accepted, and the audience in the corresponding rooms will receive the onBattleStarted callback.

    Anchor A initiates Battle

    Anchor A initiates a battle by calling requestBattle, passing the maximum Battle duration in parameter config, whether the inviter needs to reply with accept/reject, and passing anchor B's userId in parameter userIdList, and passing the battle invitation wait duration in parameter timeout.
    // File location:iOS/TUILiveKit/Source/Service/BattleService.swift
    func requestBattle(config: TUIBattleConfig, userIdList: [String], timeout: TimeInterval) -> AnyPublisher<(TUIBattleInfo, [String: TUIBattleCode]), InternalError> {
    return Future<(TUIBattleInfo, [String: TUIBattleCode]), InternalError> { [weak self] promise in
    guard let self = self else { return }
    self.battleManager.requestBattle(config: config, userIdList: userIdList, timeout: timeout) { battleInfo, resultMap in
    var battleResult: [String: TUIBattleCode] = [:]
    resultMap.forEach { (key: String, value: NSNumber) in
    battleResult[key] = TUIBattleCode(rawValue: value.intValue) ?? .unknown
    }
    promise(.success((battleInfo, battleResult)))
    } onError: { err, message in
    let error = InternalError(error: err, message: message)
    promise(.failure(error))
    }
    }
    .eraseToAnyPublisher()
    }
    Anchor A can receive the request acceptance callback via onBattleRequestAccept.

    Anchor receives a battle request

    Anchor B receives the battle request callback via onBattleRequestReceived.
    // File Location: iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
    func onBattleRequestReceived(battleInfo: TUIBattleInfo, inviter: TUIBattleUser, invitee: TUIBattleUser) {
    guard let store = self.store else { return}
    store.dispatch(action: BattleActions.onBattleRequestReceived(payload:(battleInfo.battleId, inviter)))
    }
    Anchor B accepts the battle request by calling acceptBattle.
    // File location:iOS/TUILiveKit/Source/Service/BattleService.swift
    func acceptBattle(battleId: String) -> AnyPublisher<Void, InternalError> {
    return Future<Void, InternalError> { [weak self] promise in
    guard let self = self else { return }
    self.battleManager.acceptBattle(battleId: battleId) {
    promise(.success(()))
    } onError: { err, message in
    let error = InternalError(error: err, message: message)
    promise(.failure(error))
    }
    }
    .eraseToAnyPublisher()
    }
    Anchors A, B, and the audience in the room can receive the battle start callback through onBattleStarted.
    // File Location: iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
    func onBattleStarted(battleInfo: TUIBattleInfo) {
    guard let store = self.store else { return }
    handleBattleStarted(battleInfo: battleInfo)
    }
    private func handleBattleStarted(battleInfo: TUIBattleInfo) {
    guard let store = self.store else { return }
    battleInfo.config.duration = battleInfo.config.duration + Double(battleInfo.startTime) - Date().timeIntervalSince1970
    store.dispatch(action: BattleActions.onBattleStarted(payload: battleInfo))
    let selfUserId = store.selectCurrent(UserSelectors.getSelfInfo).userId
    if battleInfo.inviter.userId == selfUserId || battleInfo.inviteeList.contains(where: { $0.userId == selfUserId }) {
    store.dispatch(action: BattleActions.setIsOnBattle(payload: true))
    }
    }

    The anchor exits the battle

    For example, when anchor B exits the battle, the interaction sequence can be referenced from the diagram below.
    
    
    
    Note:
    During multi-anchor Battle:
    When a anchor exits the battle, the remaining anchors and corresponding room audience will receive the onUserExitBattle callback.
    When the battle reaches the preset battle time, the anchors and corresponding room audience will receive the onBattleEnded callback.
    When there are two anchors in the battle and one exits, the anchors and corresponding room audience will receive the onBattleEnded callback.
    Anchor B calls exitBattle to exit the battle.
    // File location:iOS/TUILiveKit/Source/Service/BattleService.swift
    func exitBattle(battleId: String) -> AnyPublisher<Void, InternalError> {
    return Future<Void, InternalError> { [weak self] promise in
    guard let self = self else { return }
    self.battleManager.exitBattle(battleId: battleId) {
    promise(.success(()))
    } onError: { err, message in
    let error = InternalError(error: err, message: message)
    promise(.failure(error))
    }
    }
    .eraseToAnyPublisher()
    }
    Anchors A, B, and the room audience receive the onBattleEnded callback and the battle end notification.
    // File Location: iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
    func onBattleEnded(battleInfo: TUIBattleInfo, reason: TUIBattleStoppedReason) {
    guard let store = store else { return }
    store.dispatch(action: BattleActions.onBattleEnded(payload:(battleInfo, reason)))
    store.dispatch(action: BattleActions.setIsOnBattle(payload: false))
    }
    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