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:

• Create a Dyte Developer Account
• Create Presets
• Create a Dyte Meeting
• Add Participant to the meeting and generate authentication token which is used to join Meeting created above.

Step 1: Install the SDK

1. Add the following line to your Podfile

pod 'DyteUiKit'

OR for specific version:

pod 'DyteUiKit', '0.1.1'

2. Install the client SDK as CocoaPods dependency

pod install

3. 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>

Step 2 (Optional): 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.

2. 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 UI

To set the initialization properties in the DyteUiKitEngine class, simply initialize DyteMeetingInfoV2 and provide the participant's authToken.

Try this in viewDidAppear()

Name	Description
authToken	After 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.

import DyteUiKit
import DyteiOSCore

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        DyteUiKitEngine.setupV2(DyteMeetingInfoV2(authToken: authToken,
                                                enableAudio: true,
                                                enableVideo: true,
                                                baseUrl: baseUrl))

        let controller = DyteUiKitEngine.shared.getInitialController { [weak self] in
            guard let self = self else {return}
            self.dismiss(animated: true)
        }

        controller.modalPresentationStyle = .fullScreen
        self.present(controller, animated: true)
    }
r}

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