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
- Add the following line to your
Podfile
.
pod 'DyteUiKit'
OR for a specific version, use
pod 'DyteUiKit', '0.3.5'
- Install the client SDK as a CocoaPods dependency.
pod install
- 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.
DesignLibrary
is a singleton class that relies on theDesignLibraryConfiguratorProtocol
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 theDesignLibrary
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.
AppTheme
is a singleton class that relies on theAppThemeProtocol
to set corner radius and border size for various components used withinDyteUiKit
. You can customize theAppTheme
by setting any object that confirms to theAppThemeProtocol
.
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.