Skip to main content

Quickstart

This quickstart shows how to use Dyte's iOS UI Kit SDK to add live video and audio to your iOS applications.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the iOS UI Kit Sample App GitHub repository.

Objective

You’ll learn how to:

  • Install the Dyte SDK
  • Initialize the SDK
  • Configure a Dyte meeting
  • Launch the meeting UI

Before Getting Started

Make sure you've read the Getting Started with Dyte topic and completed the steps in the Integrate Dyte section. You must complete the following steps:

Step 1: Install the SDK

  1. Add the following line to your Podfile
pod 'DyteUiKit'
  1. Install the client SDK as CocoaPods dependency
pod install
  1. Add the fonts and permission entries in info.plist - the strings are displayed in the permission pop-ups, feel free to customize them to suit your audience
<key>NSBluetoothPeripheralUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>
<key>NSCameraUsageDescription</key>
<string>For people to see you during meetings, we need access to your camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>For people to hear you during meetings, we need access to your microphone.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>For people to share, we need access to your photos.</string>
<false/>

Step 2: Initialize the SDK

Initialization depends on three classes DesignLibrary, AppTheme and SetupViewController. SetupViewController is the only required class to get initialise by client of DyteUikit to launch GUI as well initialization of SDK with Authentication token.

  1. DesignLibrary is the singleton class which is depend on protocol DesignLibraryConfiguratorProtocol responsible for initializing the component from right parameters for eg. Border size, Radius, Background color of inidividual and composite components.

You can customise the DesignLibrary by setting any object which is confirm to 'DesignLibraryConfiguratorProtocol'

// create an type which confirms to  DesignLibraryConfiguratorProtocol
class DesignLibraryConfigurator: DesignLibraryConfiguratorProtocol {

public let colorBackgroundBase: UIColor = UIColor(hex: "#050505")!
public let colorBrandBase: UIColor = UIColor(hex: "#0246FD")!

public let textColorBackgroundBase: UIColor = UIColor(hex: "#FFFFFF")!
public let textColorBrandBase: UIColor = UIColor(hex: "#111111")!

public let statusDangerColor: UIColor = UIColor(hex: "#FF2D2D")!
public let statusSuccessColor: UIColor = UIColor(hex: "#83D017")!
public let statusWarningColor: UIColor = UIColor(hex: "#FFCD07")!

public let cornerRadiusRoundFactor: CGFloat = 4.0
public let cornerRadiusExtraRoundFactor: CGFloat = 8.0
public let cornerRadiusCircularFactor: CGFloat = 8.0

public let borderSizeThinFactor: CGFloat = 1.0
public let borderSizeFatFactor: CGFloat = 2.0

}

//You can initialise DesignLibrary with below command
DesignLibrary.shared.setConfigurator(configurator: DesignLibraryConfigurator())

DesignLibrary is having default value of all the above component which SDK initialize them internally.

  1. AppTheme is the singleton class which is depend on protocol AppThemeProtocol responsible for for setting corner radius and border size widht for various component used inside by DyteUiKit.

You can customise the DesigAppThemenLibrary by setting any object which is confirm to 'AppThemeProtocol'.

class AppThemeConfigurator: AppThemeProtocol {
private let cornerRadiusType: CornerRadius.RadiusType? = .rounded
private let borderSizeWidthType: BorderSize.Width? = .thin

var cornerRadiusTypeButton: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypePaginationView: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypePeerView: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypeDropDown: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypeNameTag: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypeNameTextField: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var cornerRadiusTypeCreateView: CornerRadius.RadiusType? {
get {
return cornerRadiusType
}
}

var borderSizeWidthTypeTextField: BorderSize.Width? {
get {
return borderSizeWidthType
}
}

var borderSizeWidthTypeButton: BorderSize.Width? {
get {
return borderSizeWidthType
}
}

var borderSizeWidthTypeDropDown: BorderSize.Width? {
get {
return borderSizeWidthType
}
}
}

//You can initialise AppTheme with below command
AppTheme.shared.setUp(theme: AppThemeConfigurator())

Step 3: Configure a Dyte meeting and Launch GUI

Set the initialization properties in the DyteUiKitEngine class. You just need to initialize DyteMeetingInfoV2 provide the participant's authToken.

NameDescription
authTokenAfter you've created the meeting,
add each participant to the meeting
using the Add Participant API
(The presetName created earlier
must be passed in the body
of the Add Participant API request)
The API response contains the authToken.
       DyteUiKitEngine.setupV2(DyteMeetingInfoV2(authToken: authToken, enableAudio: true, enableVideo: true))
let controller = DyteUiKitEngine.shared.getInitialController {
[unowned self] in
self.dismiss(animated: true)
self.view.hideActivityIndicator()
}
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)

Here is a pictorial representation of all the config options defined below.

meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts