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 Participants to the meeting. This API returns the authentication token that is required to initialize your frontend SDKs.

Step 1: Install the SDK

1. Add the following line to your Podfile.

pod 'DyteUiKit'

OR for a specific version, use

pod 'DyteUiKit', '0.3.5'

2. Install the client SDK as a CocoaPods dependency.

pod install

3. Add the necessary fonts and permission entries in the info.plist file. You can customize the strings shown in the permission pop-ups to match your audience preferences.

<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>
<key>UIBackgroundModes</key>
    <array>
        <string>audio</string>
        <string>voip</string>
        <string>fetch</string>
        <string>remote-notification</string>
    </array>

The UIBackgroundModes key is used in the Info.plist file of an iOS app to declare the app’s supported background execution modes. This key is an array of strings that specifies the types of background tasks that the app supports. By declaring the background modes, the app can continue to run in the background and perform specific tasks even when it is not in the foreground. It’s important to note that the use of background modes should be justified and comply with Apple’s App Store Review Guidelines. Apps that misuse background modes or unnecessarily run in the background may be rejected during the app review process.

Sources: Apple Developer Documentation: Declaring Your App’s Supported Background Tasks

Step 2 (Optional): Initialize the SDK

You have three classes involved in the initialization process: DesignLibrary, AppTheme, and SetupViewController.

Among these, SetupViewController is the only one required by the client of DyteUikit to launch the GUI and initialize the SDK with the authentication token.

1. DesignLibrary is a singleton class that relies on the DesignLibraryConfiguratorProtocol to initialize components with specific parameters, like border size, radius, and background color for individual and composite elements.

   For customization, you can set any object that conforms to the DesignLibraryConfiguratorProtocol to modify the DesignLibrary according to your needs.

// 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 comes with default values for all the mentioned components, and the SDK internally handles their initialization.

2. AppTheme is a singleton class that relies on the AppThemeProtocol to set corner radius and border size for various components used within DyteUiKit. You can customize the AppTheme by setting any object that confirms to the 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 DyteUiKit class, simply initialize DyteMeetingInfoV2 and provide the participant's authToken. You can get the authToken via the Add Participant API.

Try this in viewDidAppear()

import DyteUiKit
import DyteiOSCore

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    var dyteUikit: DyteUiKit!

   override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        dyteUikit = DyteUiKit(meetingInfoV2: DyteMeetingInfoV2(authToken: authToken, enableAudio: true, enableVideo: true, baseUrl: Constants.BASE_URL))
        let controller = dyteUikit.startMeeting {
            [weak self] in
            guard let self = self else {return}
            self.dismiss(animated: true)
        }
        controller.modalPresentationStyle = .fullScreen
        self.present(controller, animated: true)
    }
}

Here's a visual representation of all the configuration options described.