How to integrate ZegoUIKit into your project

In this document, we create a brand new iOS app project to introduce how to integrate

Install Pods

1. Open Terminal, navigate to the Demo folder and run the pod init command.

2. Add dependencies for ZegoUIkit pod 'ZegoExpressEngine'

3. Run the pod install command to install all dependencies that are needed.

   

Add ZegoUIKit for project

1. Open .xcworkspace file in Xcode

   

2. Unzip ZegoUIKit.zip and place it at the same level as your project's root dir†ectory

3. Configure camera and microphone permission support in the info.plist file

   

integrated ZegoUIKitPrebuiltCall

class ViewController: UIViewController {

  override func viewDidLoad() {

	   super.viewDidLoad()
	   // Do any additional setup after loading the view.
  }

  @IBAction func startCall(_ sender: Any) {
    let config: ZegoUIkitPrebuiltCallConfig = ZegoUIkitPrebuiltCallConfig()
    let callVC: ZegoUIKitPrebuiltCallVC = ZegoUIKitPrebuiltCallVC.init(YOUR_APPID, appSign: YOUR_APP_Sign, userID: "userID", userName: "UserName", callID: "callID", config: config)
    callVC.modalPresentationStyle = .fullScreen
    callVC.delegate = self
    self.present(callVC, animated: true, completion: nil)     
  }
}

extension ViewController: ZegoUIKitPrebuiltCallVCDelegate {
    func onHangUp(_ isHandup: Bool) {
        // Triggered when hanging up 
    }
    
    func getForegroundView(_ userInfo: ZegoUIkitUser?) -> UIView? {
        // You can add your custom ForegroundView on top of AudioVideoView here
    }
    
    func onOnlySelfInRoom() {
        //You're the only person on the line right now
    }
    
}

Feature tips

1. Support clicking on the unresponsive area to hide the menuBar
2. Support display sound waves in audio call mode
3. Support clicking on the small view to exchange it with the large view
4. Support dragging small view position

For more features, see Advanced config property list

Customize

1. Customize backgroundImage of audio video view

   //Set before initializing ZegoUIKitPrebuiltCallVC
   let config: ZegoUIkitPrebuiltCallConfig = ZegoUIkitPrebuiltCallConfig()
   let layoutConfig: ZegoLayout = ZegoLayout()
   let pictureInPictureConfig: ZegoLayoutPictureInPictureConfig = ZegoLayoutPictureInPictureConfig()
   pictureInPictureConfig.bigViewBackgroundImage = YOUR_CUSTOM_IMAGE// set your custom image
   pictureInPictureConfig.smallViewBackgroundImage = YOUR_CUSTOM_IMAGE // set your custom image
   layoutConfig.config = pictureInPictureConfig
   layoutConfig.mode = .pictureInPicture
   config.layout = layoutConfig

2. Customize backgroundColor of audio video view

   //Set before initializing ZegoUIKitPrebuiltCallVC
   let config: ZegoUIkitPrebuiltCallConfig = ZegoUIkitPrebuiltCallConfig()
   let layoutConfig: ZegoLayout = ZegoLayout()
   let pictureInPictureConfig: ZegoLayoutPictureInPictureConfig = ZegoLayoutPictureInPictureConfig()
   pictureInPictureConfig.bigViewBackgroundColor = YOUR_CUSTOM_IMAGE// set your custom image
   pictureInPictureConfig.smallViewBackgroundColor = YOUR_CUSTOM_IMAGE // set your custom image
   layoutConfig.config = pictureInPictureConfig
   layoutConfig.mode = .pictureInPicture
   config.layout = layoutConfig

3. Customize foreground of audio video view

   class ViewController: UIViewController {
     
     func startCall() {
       let callVC: ZegoUIKitPrebuiltCallVC = ZegoUIKitPrebuiltCallVC.init(YOUR_APPID, appSign: "YOUR_APP_Sign", 		 		userID: "userID", userName: "UserName", callID: "callID", config: config)
   		 callVC.delegate = self //set delegate
     }
     
   }
   
   //Implementing the proxy method
   extension ViewController: ZegoUIKitPrebuiltCallVCDelegate {
       func getForegroundView(_ userInfo: ZegoUIkitUser?) -> UIView? {
           let customView: UIView = UIView()
           return customView
       }
   }

4. Customize buttons of menu bar

   //Set before initializing ZegoUIKitPrebuiltCallVC
   let config: ZegoUIkitPrebuiltCallConfig = ZegoUIkitPrebuiltCallConfig()
   config.menuBarButtons = [.quitButton,.swtichAudioOutputButton,.toggleMicrophoneButton]

5. Add system button to Menubar

   let callVC: ZegoUIKitPrebuiltCallVC
   let button: UIButton = UIButton()
   button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
   callVC.addButtonToMenuBar(button)
   
   @objc func buttonClick() {
        // button click event
   }

6. Add component button to Menubar

   let callVC: ZegoUIKitPrebuiltCallVC
   let button: ZegoLeaveButton = ZegoLeaveButton()
   callVC.addButtonToMenuBar(button)

Advanced config

You can modify more advanced config property like config.turnOnCameraWhenJoining = false;, usage demo:

//Set before initializing ZegoUIKitPrebuiltCallVC
let config: ZegoUIkitPrebuiltCallConfig = ZegoUIkitPrebuiltCallConfig()
config.turnOnCameraWhenjoining = false
let callVC: ZegoUIKitPrebuiltCallVC =  ZegoUIKitPrebuiltCallVC.init(YOUR_APPID, appSign: "YOUR_APP_Sign", userID: "userID", userName: "UserName", callID: "callID", config: config)

Advanced config property list

Advanced layout config

Each layout has some configurable parameters for you to choose

ZegoLayoutPictureInPictureConfig:

test tips

1. you need use real device to test, ios simulator doesn't support camera.
2. Please note that the two devices should not be very close to each other when testing, if your two devices are close to each other, there may be a problem with capturing each other's voices, causing echo oscillations. see https://en.wikipedia.org/wiki/Audio_feedback