Custom prebuilt UI

---

Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) 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 ZegoUIkitPrebuiltLiveStreaming, in addition to the required authentication parameter, there is also a ZegoUIKitPrebuiltLiveStreamingConfig, 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

Hide the prebuilt components

By default, the Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) displays the user's avatar and sound waves when the camera is turned off. If you are not satisfied with the user avatars and sound wave style, you can hide them using the showSoundWavesInAudioMode configuration.

• showSoundWavesInAudioMode: In audio mode, whether to display the sound waves around the user avatar in audio mode. Displayed by default.

Customize the initial device state

When starting a live, the Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) turns on the camera, and microphone by default.

To change this default configuration, for example, turn off the camera when you start a live, you can modify the following configurations:

1. turnOnCameraWhenJoining: Whether to turn on the camera when the live starts. true: turn on (by default). false: turn off.
2. turnOnMicrophoneWhenJoining: Whether to turn on the camera when the live starts. true: turn on (by default). false: turn off.

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 liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host()
        config.turnOnCameraWhenJoining = false;
        config.turnOnMicrophoneWhenJoining = false;

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.modalPresentationStyle = .fullScreen
        self.present(liveVC, animated: true, completion: nil)
    }
}

Customize the bottom menu bar buttons

The Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) allows you to configure the buttons of the menu bar. You can remove the default buttons or add custom ones. If necessary, you can configure the bottomMenuBarConfig:

1. hostButtons: Use this to set the buttons for a host to use.
2. coHostButtons: Use this to set the buttons for a co-host to use.
3. audienceButtons: Use this to set the buttons for an audience to use.
4. menuBarButtonsMaxCount : Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is 5.
5. showInRoomMessageButton : Whether to display the message button, displayed by default.

class ViewController: UIViewController {

    let selfUserID: String = "userID"
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID
    let yourAppSign: String = YourAppSign
    let liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host([ZegoUIKitSignalingPlugin()])
        config.turnOnCameraWhenJoining = false
        config.turnOnMicrophoneWhenJoining = false
        config.bottomMenuBarConfig.hostButtons = [.switchCameraButton,.toggleMicrophoneButton,.toggleCameraButton]
        config.bottomMenuBarConfig.coHostButtons = [.coHostControlButton,.switchCameraButton,.toggleMicrophoneButton,.toggleCameraButton]
        config.bottomMenuBarConfig.audienceButtons = [.coHostControlButton]

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.modalPresentationStyle = .fullScreen
        liveVC.delegate = self
        self.present(liveVC, animated: true, completion: nil)
    }
}

Moreover, you can also use the addButtonToBottomMenuBar and clearBottomMenuBarExtendButtons methods to add or clear 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 is as follows:

Set a leave confirmation dialog

Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) ends a live by default when the user clicks the End Live button.

If you want to add a confirmation dialog box to double confirm whether the user wants to leave a live, you can use the confirmDialogInfo config: After configuring the confirmDialogInfo parameter, ZegoUIKitPrebuilt will pop up a confirmation dialog box with the default style before ending the live, 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 liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

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

        let confirmDialogInfo = ZegoConfirmDialogInfo()
        confirmDialogInfo.title= "Leave confirm";
        confirmDialogInfo.message= "Do you want to leave?";
        confirmDialogInfo.cancelButtonName= "Cancel";
        confirmDialogInfo.confirmButtonName= "Confirm";
        config.confirmDialogInfo = confirmDialogInfo

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.modalPresentationStyle = .fullScreen
        self.present(liveVC, animated: true, completion: nil)
    }
}

If you want to listen for leave events, ZegoUIKitPrebuiltLiveStreaming provides an onLeaveLiveStreaming delegate, the onLeaveLiveStreaming will be triggered when the live ends. And sure, you can also implement custom business logic in the onLeaveLiveStreaming.

Customize the foreground view

If you want to add some custom components at the top level of the view, such as you want to display the user avatars when the video view is displayed, add user-level icons, etc., then you can use ZegoUIKitPrebuiltLiveStreamingVCDelegate.getForegroundView protocol. The getForegroundView 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 liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host()
        config.turnOnCameraWhenjoining = false;
        config.bottomMenuBarButtons = [.toggleMicrophoneButton,.hangUpButton,.swtichAudioOutputButton]

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.delegate = self

        liveVC.modalPresentationStyle = .fullScreen
        self.present(liveVC, animated: true, completion: nil)
    }

    func getForegroundView(_ userInfo: ZegoUIkitUser?) -> UIView? {
        return YourCustomView()
    }
}

Modify User Interface text

Live Streaming Kit (ZegoUIKitPrebuiltLiveStreaming)'s UI text provided by the internal components is editable, to modify those, use the ZegoTranslationText config.

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 liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host()
        config.translationText.startLiveStreamingButton = 'Start Live'
        config.translationText.noHostOnline = 'No host online'

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.modalPresentationStyle = .fullScreen
        self.present(liveVC, animated: true, completion: nil)
    }
}

Best practices

Implement an audio-only live

Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) defaults to Video Live Streaming mode. While it allows users to tap the camera button to turn off the camera, converting to an audio-only live.

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

1. bottomMenuBarConfig: Configure this to remove the camera-related button.
2. turnOnCameraWhenJoining: Configure this to only use the microphone when a live starts.

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 liveID: String = "testLiveID"

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host()
        config.turnOnCameraWhenjoining = false;
        config.bottomMenuBarButtons = [.toggleMicrophoneButton]

        let liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        liveVC.modalPresentationStyle = .fullScreen
        self.present(liveVC, animated: true, completion: nil)
    }
}

Forcefully end a livestream room

Live Streaming Kit (ZegoUIKitPrebuiltLiveStreaming) allows to forcefully end a livestream room and dismiss all audience automatically when the host ends the livestream. To implement this, use the onLiveStreamingEnded callback. This callback will be triggered when the host ends the livestream, and all audience will automatically exit the livestream room.

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 liveID: String = "testLiveID"

    var liveVC: ZegoUIKitPrebuiltLiveStreamingVC?

    @IBAction func makeNewLive(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig.host()
        config.turnOnCameraWhenjoining = false;
        config.bottomMenuBarButtons = [.toggleMicrophoneButton]

        self.liveVC = ZegoUIKitPrebuiltLiveStreamingVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: self.selfUserName ?? "", liveID: liveID, config: config)

        self.liveVC!.modalPresentationStyle = .fullScreen
        self.liveVC!.delegate = self
        self.present(self.liveVC!, animated: true, completion: nil)
    }

    func onLiveStreamingEnd() {
        self.liveVC?.dismiss(animated: true, completion: {
            self.liveVC = nil
        })
    }
}