このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。
Docs Overview/
Live/
UIKit/
iOS/
API Example/
LiveCoreView/
Custom Co-Guest and Co-Host View/

Custom Co-Guest and Co-Host View

This document mainly introduces how to use the LiveStreamCore module's LiveCoreView to implement a custom co-hosting and connection view.

Prerequisites

Before using LiveStreamCore, you need to integrate and log in to LiveStreamCore to ensure the subsequent features work properly.

Usage guide

Step 1: Adding LiveCoreView to the View

You need to first import the LiveStreamCore module, then create a LiveCoreView view object and add it to your view.
iOS
Android
import LiveStreamCore
import RTCRoomEngine

class CustomizeConncetionController: UIViewController {
    private let liveCoreView: LiveCoreView = {   
      let view = LiveCoreView()
      return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.liveCoreView.videoViewDelegate = self
        // Add liveCoreView to the view and set layout constraints
    }
}
public class CustomizeConnectionActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LiveCoreView liveCoreView = new LiveCoreView(this);
        addContentView(liveCoreView,
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }
}

Step 2: Customizing Co-Hosting View

iOS
Android
If you want to customize the co-hosting and connection view, you need to implement the LiveCoreView delegate VideoViewDelegate.

protocol VideoViewDelegate {
    func createCoGuestView(userInfo: TUIUserInfo) -> UIView?
    func updateCoGuestView(userInfo: TUIUserInfo, modifyFlag: UserInfoModifyFlag, coGuestView: UIView)
    func createCoHostView(coHostUser: TUIConnectionUser) -> UIView?
    func updateCoHostView(coHostUser: TUIConnectionUser, modifyFlag: UserInfoModifyFlag, coHostView: UIView)
}
The following is a usage example:
extension CustomizeSeatViewController: SGSeatViewDelegate {
    func createCoGuestView(userInfo: TUIUserInfo) -> UIView? {
        return CustomCoGuestView(userInfo: userInfo)
     }
     
    func updateCoGuestView(userInfo: TUIUserInfo, modifyFlag: UserInfoModifyFlag, coGuestView: UIView) {
        if let coGuestView = coGuestView as? CustomCoGuestView {
            coGuestView.updateView(withUserInfo: userInfo)
        }
    }
    
    func createCoHostView(coHostUser: TUIConnectionUser) -> UIView? {
        return CustomCoHostView(coHostUser: coHostUser)
    }
     
    func updateCoHostView(coHostUser: TUIConnectionUser, modifyFlag: UserInfoModifyFlag, coHostView: UIView)
        if let coHostiew = coHostiew as? CustomCoGuestView {
            coHostiew.updateView(withUser: coHostUser)
        }
    }
}

// Please replace with your CoGuestView
class CustomCoGuestView: UIView {
    var userInfo: TUIUserInfo = TUIUserInfo()
    // ... UI
    init(userInfo: TUIUserInfo) {
        self.userInfo = userInfo
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func updateView(withUserInfo userInfo: TUIUserInfo) {
        self.userInfo = userInfo
        // ...
    }
}

// Please replace with your CoHostView
class CustomCoHostView: UIView {
    var coHostUser: TUIConnectionUser = TUIConnectionUser()
    // ... UI

    init(coHostUser: TUIConnectionUser) {
        self.coHostUser = coHostUser
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func updateView(withUser user: TUIConnectionUser) {
        self.coHostUser = user
        // ...
    }
}
If you want to customize the co-hosting and connection view, you need to implement the LiveCoreView adapter VideoViewAdapter.

public interface VideoViewAdapter {
    View createCoGuestView(TUIRoomDefine.UserInfo var1);

    void updateCoGuestView(TUIRoomDefine.UserInfo var1, List<UserInfoModifyFlag> var2, View var3);

    View createCoHostView(CoHostUser var1);

    void updateCoHostView(CoHostUser var1, List<UserInfoModifyFlag> var2, View var3);
}
The following is a usage example:
liveCoreView.setVideoViewAdapter(new LiveCoreViewDefine.VideoViewAdapter() {
    @Override
    public View createCoGuestView(TUIRoomDefine.UserInfo userInfo) {
        TextView coGuestUserName = new TextView(CustomizeConnectionActivity.this);
        coGuestUserName.setText(userInfo.userName);
        return coGuestUserName;
    }

    @Override
    public void updateCoGuestView(TUIRoomDefine.UserInfo userInfo, List<LiveCoreViewDefine.UserInfoModifyFlag> list, View view) {

    }

    @Override
    public View createCoHostView(LiveCoreViewDefine.CoHostUser coHostUser) {
        TextView coHostUserName = new TextView(CustomizeConnectionActivity.this);
        coHostUserName.setText(coHostUser.connectionUser.userName);
        return coHostUserName;
    }

    @Override
    public void updateCoHostView(LiveCoreViewDefine.CoHostUser coHostUser, List<LiveCoreViewDefine.UserInfoModifyFlag> list, View view) {

    }
});