Custom prebuilt UI

---

Video Conference Kit (ZegoUIKitPrebuiltVideoConference) provides a set of default behaviors and styles. If those don't fully meet your design or business needs, we allow you to flexibly customize the behavior and styles through configuration, as well as add components with custom business logic.

After getting started quickly, you'll know that when you create the ZegoUIKitPrebuiltVideoConference, in addition to the required authentication parameter, there is also a ZegoUIKitPrebuiltVideoConferenceConfig, which is used for custom configuration.

In this doc, we will describe these parameters in detail to help you do further customization.

Customize prebuilt UI components

Configure layouts

Video Conference Kit (ZegoUIKitPrebuiltVideoConference) currently supports the gallery layout, and more layouts, and each layout has its own configuration. To choose the layout you want, use the layout parameter in the ZegoUIKitPrebuiltVideoConferenceConfig.

To customize the gallery layout, use the gallery parameter:

addBorderRadiusAndSpacingBetweenView: In gallery layout, this can be used to add border radius and spacing between speaker views. true: enabled (by default). false: disabled.

The effect is as follows:

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID";
    let selfUserName: String = "userName";
    let yourAppID: UInt32 = YourAppID;
    let yourAppSign: String = YourAppSign;
    let conferenceID : String = "testConferenceID"

    @IBOutlet weak var userIDLabel: UILabel! {
        didSet {
            userIDLabel.text = selfUserID
        }
    }
    @IBOutlet weak var userNameLabel: UILabel! {
        didSet {
            selfUserName = String(format: "zego_%@", selfUserID)
            userNameLabel.text = selfUserName
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func videoConference(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIkitPrebuiltVideoConferenceConfig = ZegoUIkitPrebuiltVideoConferenceConfig()

        let layout: ZegoLayout = ZegoLayout()
        layout.mode = .gallery
        let layoutConfig: ZegoLayoutGalleryConfig = ZegoLayoutGalleryConfig()
        layoutConfig.addBorderRadiusAndSpacingBetweenView = false;
        layout.config = layoutConfig
        config.layout = layout

        let videoConferenceVC = ZegoUIKitPrebuiltVideoConferenceVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", conferenceID: conferenceID, config: config)
        videoConferenceVC.modalPresentationStyle = .fullScreen
        self.present(videoConferenceVC, animated: true, completion: nil)
    }
}

Customize the initial device state

When starting a conference, the Video Conference Kit (ZegoUIKitPrebuiltVideoConference) turns on the camera, and microphone, and uses the speaker as the audio output device by default.

To change this default configuration, for example, turn off the camera when you start a conference or don't use the speaker (If the speaker is not used, the system's default audio output device, such as ear speaker, headset, Bluetooth, etc., will be used.), you can modify the following configurations:

1. turnOnCameraWhenJoining: Whether to turn on the camera when the conference starts. true: turn on (by default). false: turn off.
2. turnOnMicrophoneWhenJoining: Whether to turn on the camera when the conference starts. true: turn on (by default). false: turn off.
3. useSpeakerWhenJoining: Whether to use the speaker when the conference starts. true: use the speaker (by default). false: use the system's default audio output device, such as an ear speaker, headset, Bluetooth, etc.

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID";
    let selfUserName: String = "userName";
    let yourAppID: UInt32 = YourAppID;
    let yourAppSign: String = YourAppSign;
    let conferenceID : String = "testConferenceID"

    @IBOutlet weak var userIDLabel: UILabel! {
        didSet {
            userIDLabel.text = selfUserID
        }
    }
    @IBOutlet weak var userNameLabel: UILabel! {
        didSet {
            selfUserName = String(format: "zego_%@", selfUserID)
            userNameLabel.text = selfUserName
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func videoConference(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIkitPrebuiltVideoConferenceConfig = ZegoUIkitPrebuiltVideoConferenceConfig()
        config.turnOnCameraWhenJoining = false;
        config.turnOnMicrophoneWhenJoining = false;
        config.useSpeakerWhenJoining = true;

        let videoConferenceVC = ZegoUIKitPrebuiltVideoConferenceVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", conferenceID: conferenceID, config: config)
        videoConferenceVC.modalPresentationStyle = .fullScreen
        self.present(videoConferenceVC, animated: true, completion: nil)
    }
}

Customize the menu bar button list

The Video Conference Kit (ZegoUIKitPrebuiltVideoConference) allows you to configure the buttons of the top/bottom menu bar. To remove the default buttons or add custom ones to the bottom menu bar, you can configure the bottomMenuBarConfig:

(Similarly, to configure top menu bar buttons or add custom buttons to the top menu bar, use the topMenuBarConfig and addButtonToTopMenuBar.)

1. buttons: Built-in buttons placed in the menu bar. By default, all buttons are displayed. If you need to hide some buttons, use this to configure them. For details, see Implement an audio-only conference.
2. maxCount: Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is 5.

Moreover, you can also use the addButtonToBottomMenuBar method to add your customized buttons to the menu bar.

If the total number of built-in buttons and custom buttons does not exceed 5, all buttons will be displayed. Otherwise, other buttons that cannot be displayed will be hidden in the three dots (⋮) button. Clicking this button will pop up the bottom sheet to display the remaining buttons.

The effect will be like this:

Hide the prebuilt components

Hide the components on the view

By default, the Video Conference Kit (ZegoUIKitPrebuiltVideoConference) displays UserNameLabel and MicrophoneStateIcon floating above the view. If these components are not needed, you can hide them using the following three configurations in audioVideoViewConfig.

1. showMicrophoneStateOnView: Whether to display the microphone state on the view. Displayed by default.
2. showCameraStateOnView: Whether to display the camera state on the view. Not displayed by default.
3. showUserNameOnView: Indicates whether to display the username on the view. Displayed by default.
4. showSoundWavesInAudioMode: In audio mode, whether to display the sound waves around the user avatar in audio mode. Displayed by default.

Hide the conference leave notifications

By default, the conference join/leave notifications and new message notifications are displayed on the left corner notification area. Among these, the conference leave notifications can be hidden by configuring the notificationViewConfig.notifyUserLeave from true to false.

Hide the device state on the member list

By default, the camera state and microphone state are displayed by default on the member list. To hide them, use the showMicrophoneState and showCameraState in the memberListConfig.

Customize the hidden behavior of the menu bar

Video Conference Kit (ZegoUIKitPrebuiltVideoConference) supports automatic or manual hiding of the menu bar. You can control this by using the following two configurations in the bottomMenuBarConfig and topMenuBarConfig:

1. hideByClick: Whether the menu bar can be hidden by clicking on the unresponsive area, enabled by default.
2. hideAutomatically: Whether the menu bar is automatically hidden after 5 seconds of user inactivity, enabled by default.

Set a leave confirmation dialog

Video Conference Kit (ZegoUIKitPrebuiltVideoConference) leaves a conference by default when the user clicks the Leave button.

If you want to add a confirmation dialog box to double confirm whether the user wants to leave a conference, you can use the leaveConfirmDialogInfo config. After configuring this parameter, a confirmation dialog box with the default style will pop up before leaving or ending the conference, showing the confirmation info you set.

The effect will be like this:

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID";
    let selfUserName: String = "userName";
    let yourAppID: UInt32 = YourAppID;
    let yourAppSign: String = YourAppSign;
    let conferenceID : String = "testConferenceID"

    @IBOutlet weak var userIDLabel: UILabel! {
        didSet {
            userIDLabel.text = selfUserID
        }
    }
    @IBOutlet weak var userNameLabel: UILabel! {
        didSet {
            selfUserName = String(format: "zego_%@", selfUserID)
            userNameLabel.text = selfUserName
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func videoConference(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIkitPrebuiltVideoConferenceConfig = ZegoUIkitPrebuiltVideoConferenceConfig()
        let leaveConfirmDialogInfo = ZegoLeaveConfirmDialogInfo();
        leaveConfirmDialogInfo.title = "Leave the conference";
        leaveConfirmDialogInfo.message = "Are you sure to leave the conference?";
        leaveConfirmDialogInfo.cancelButtonName = "Cancel";
        leaveConfirmDialogInfo.confirmButtonName = "Confirm";
        config.leaveConfirmDialogInfo = leaveConfirmDialogInfo;

        let videoConferenceVC = ZegoUIKitPrebuiltVideoConferenceVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", conferenceID: conferenceID, config: config)
        videoConferenceVC.modalPresentationStyle = .fullScreen
        self.present(videoConferenceVC, animated: true, completion: nil)
    }
}

If you want to listen for leave events, for example, to save the conference recording when leaving the conference, ZegoUIKitPrebuiltVideoConference provides an onLeave callback that will be triggered when the conference ends. And sure, you can also implement custom business logic in the onLeave.

Customize the foreground view

If you want to add some custom components at the top level of the view, such as, want to display the user avatars when the video view is displayed, adding user-level icons, etc., then you can use setForegroundViewProvider method. The setForegroundViewProvider requires you (the developer) to return a custom view that will be placed at the top of the view.

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID";
    let selfUserName: String = "userName";
    let yourAppID: UInt32 = YourAppID;
    let yourAppSign: String = YourAppSign;
    let conferenceID : String = "testConferenceID"

    @IBOutlet weak var userIDLabel: UILabel! {
        didSet {
            userIDLabel.text = selfUserID
        }
    }
    @IBOutlet weak var userNameLabel: UILabel! {
        didSet {
            selfUserName = String(format: "zego_%@", selfUserID)
            userNameLabel.text = selfUserName
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func videoConference(_ sender: Any) {

        let config: ZegoUIkitPrebuiltVideoConferenceConfig = ZegoUIkitPrebuiltVideoConferenceConfig()

        let videoConferenceVC = ZegoUIKitPrebuiltVideoConferenceVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", conferenceID: conferenceID, config: config)
        videoConferenceVC.modalPresentationStyle = .fullScreen

        // Modify your custom configurations here.
        videoConferenceVC.delegate = self


        self.present(videoConferenceVC, animated: true, completion: nil)
    }

    // return your ForegroundView here.
    func getForegroundView(_ userInfo: ZegoUIkitUser?) -> UIView? {
        return YourCustomView()
    }
}

Guides for common requirements

Implement an audio-only conference

Video Conference Kit (ZegoUIKitPrebuiltVideoConference) defaults to video conference mode. While it allows users to tap the camera button to turn off the camera, converting to an audio-only conference.

Camera-related logic is not required for audio-only conferences, so you can:

1. bottomMenuBarConfig: Configure this to delete the camera-related button.
2. topMenuBarConfig: Configure this to delete the camera-related button.
3. turnOnCameraWhenJoining: Configure this to only use the microphone when a conference starts.
4. audioVideoViewConfig: Configure this to delete the camera status icon on the view.

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID";
    let selfUserName: String = "userName";
    let yourAppID: UInt32 = YourAppID;
    let yourAppSign: String = YourAppSign;
    let conferenceID : String = "testConferenceID"

    @IBOutlet weak var userIDLabel: UILabel! {
        didSet {
            userIDLabel.text = selfUserID
        }
    }
    @IBOutlet weak var userNameLabel: UILabel! {
        didSet {
            selfUserName = String(format: "zego_%@", selfUserID)
            userNameLabel.text = selfUserName
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func videoConference(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIkitPrebuiltVideoConferenceConfig = ZegoUIkitPrebuiltVideoConferenceConfig()
        config.turnOnCameraWhenjoining = false;
        config.audioVideoViewConfig.showCameraStateOnView = false;
        config.bottomMenuBarConfig.buttons = [.toggleMicrophoneButton,.leaveButton,.swtichAudioOutputButton]
        config.topMenuBarConfig.buttons = [.showMemberListButton]

        let videoConferenceVC = ZegoUIKitPrebuiltVideoConferenceVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", conferenceID: conferenceID, config: config)
        videoConferenceVC.modalPresentationStyle = .fullScreen
        self.present(videoConferenceVC, animated: true, completion: nil)
    }
}