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
- Add the following line to your
Podfile
pod 'DyteUiKit'
OR for specific version:
pod 'DyteUiKit', '0.1.1'
- Install the client SDK as CocoaPods dependency
pod install
- 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.
DesignLibrary
is the singleton class which is depend on protocolDesignLibraryConfiguratorProtocol
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.
AppTheme
is the singleton class which is depend on protocolAppThemeProtocol
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.