文档概览/
Live/
UIKit/
iOS/
API Example/
LiveCoreView/
Custom Co-Guest and Co-Host View/

Custom Co-Guest and Co-Host View

本文档主要介绍如何使用视频直播核心组件 LiveStreamCore 模块的 LiveCoreView 实现自定义连麦和连线视图。

前提条件

在使用 LiveStreamCore 前，您需要先集成与登录 LiveStreamCore ，以便后续功能正常使用。

使用指引

步骤1：将 LiveCoreView 添加到视图上

您需要先导入 LiveStreamCore 模块，然后创建一个 LiveCoreView 视图对象，并将其添加到自己的视图上。
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
        // 将 liveCoreView 添加到视图上，同时设置好布局约束
    }
}
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));
    }
}

步骤2：自定义连麦视图

iOS
Android
若您想自定义连麦和连线视图，需要实现 LiveCoreView 的 代理 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)
}
以下为使用示例：
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)
        }
    }
}

// 请替换成您的 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
        // ...
    }
}

// 请替换成您的 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
        // ...
    }
}
若您想自定义连麦和连线视图，需要实现 LiveCoreView 的 适配器 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);
}
以下为使用示例：
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) {

    }
});