Live Streaming Kit
  • iOS : Swift
  • Android
  • Web
  • Flutter
  • React Native
  • Overview
  • Quick start
  • Custom prebuilt UI

Custom prebuilt UI

Last updated:2022-09-21 13:42

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 you 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 configurations in audioVideoViewConfig.

  • 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" // Note: userID needs to be globally unique. 
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID; // Fill in the appID that you get from ZEGOCLOUD Admin Console.
    let yourAppSign: String = YourAppSign; // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
    let liveID: String = "testLiveID"; // You can customize the liveID as wanted.

    @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()
        // Do any additional setup after loading the view.
    }
    @IBAction func makeNewLive(_ sender: Any) {

        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig()
        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 button list

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

  1. buttons: Built-in buttons placed in menuBar. 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 live.
  2. maxCount: Maximum number of buttons that can be displayed by menuBar. Value range [1 - 5], the default value is 5.

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

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 bottomSheet to display the remaining buttons. The effect is as follows:

Set a leave confirmation dialog

Live Streaming Kit (ZegoUIKitPrebuilt) 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" // Note: userID needs to be globally unique.
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID; // Fill in the appID that you get from ZEGOCLOUD Admin Console.
    let yourAppSign: String = YourAppSign; // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
    let liveID: String = "testLiveID"; // You can customize the liveID as wanted.

    @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()
        // Do any additional setup after loading the view.
    }
    @IBAction func makeNewLive(_ sender: Any) {

        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig()

        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 view in audio mode

If you need to customize the user's view in audio mode, for example, setting the background image, you can use largeViewBackgroundImage, smallViewBackgroundImage, largeViewBackgroundColor, smallViewBackgroundColor in ZegoLayoutPictureInPictureConfig.

These configurations are only valid when the user turns off the camera (because the video view will be displayed automatilivey when the camera is on).

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID" // Note: userID needs to be globally unique.
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID; // Fill in the appID that you get from ZEGOCLOUD Admin Console.
    let yourAppSign: String = YourAppSign; // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
    let liveID: String = "testLiveID"; // You can customize the liveID as wanted.

    @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()
        // Do any additional setup after loading the view.
    }
    @IBAction func makeNewLive(_ sender: Any) {

        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig()

        let layout: ZegoLayout = ZegoLayout()
        layout.mode = .pictureInPicture
        let pipConfig: ZegoLayoutPictureInPictureConfig = ZegoLayoutPictureInPictureConfig()
        pipConfig.largeViewBackgroundColor = UIColor.darkGray
        pipConfig.smallViewBackgroundColor = UIColor.lightGray
        layout.config = pipConfig
        config.layout = layout

        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 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" // Note: userID needs to be globally unique.
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID; // Fill in the appID that you get from ZEGOCLOUD Admin Console.
    let yourAppSign: String = YourAppSign; // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
    let liveID: String = "testLiveID"; // You can customize the liveID as wanted.

    @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()
        // Do any additional setup after loading the view.
    }
    @IBAction func makeNewLive(_ sender: Any) {

        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig()
        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()
    }

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 delete 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" // Note: userID needs to be globally unique.
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID; // Fill in the appID that you get from ZEGOCLOUD Admin Console.
    let yourAppSign: String = YourAppSign; // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
    let liveID: String = "testLiveID"; // You can customize the liveID as wanted.

    @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()
        // Do any additional setup after loading the view.
    }
    @IBAction func makeNewLive(_ sender: Any) {

        let config: ZegoUIKitPrebuiltLiveStreamingConfig = ZegoUIKitPrebuiltLiveStreamingConfig()
        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)
    }
}