Skip to main content

Quickstart

This quickstart shows how to use RealtimeKit's UI 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 GitHub repository.

Objective

You'll learn how to:

Before Getting Started

Before proceeding, ensure you have:

  1. Read the Getting Started with RealtimeKit guide
  2. Completed the Integrate RealtimeKit setup
  3. The following prerequisites:

Step 1: Install the SDK

Swift Package Manager

Add RealtimeKitUI SDK through Swift Package Manager in Xcode. Use https://github.com/dyte-in/RealtimeKitUI as the package source.

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: Configure a meeting

Configure the following properties in the RtkMeetingInfo class. You must pass a valid participant authToken obtained from the Add Participant API.

NameDescription
authTokenAuthentication token generated using the Add Participant API after meeting creation.
enableAudioSet whether to join the meeting with your Mic ON (true) or OFF (false).
enableVideoSet whether to join the meeting with your Camera ON (true) or OFF (false).
baseUrlBase URL of the RealtimeKit environment you have created the meeting on.
let meetingInfo = RtkMeetingInfo(authToken: "<authToken>",
enableAudio: true,
enableVideo: true)

Step 3: Initialize the SDK

To set the initialization properties in the DyteUiKit class, simply initialize DyteMeetingInfoV2 mention in the step 2

let rtkMeetingInfo = RtkMeetingInfo(authToken: "<authToken>",
enableAudio: true,
enableVideo: true)

let rtkUikit = RealtimeKitUI.init(meetingInfo: rtkMeetingInfo)

Step 4: Launch the meeting UI

To launch the meeting UI, call the startMeeting() method on the RealtimeKitUI instance as shown below.

This will take care of everything for you. Try this in viewDidAppear()

import RealtimeKitUI
import RealtimeKitCore

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
}
var rtkUikit: RealtimeKitUI!

override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let rtkMeetingInfo = RtkMeetingInfo(authToken: "<authToken>",
enableAudio: true,
enableVideo: true)
rtkUikit = RealtimeKitUI.init(meetingInfo: rtkMeetingInfo)

let controller = rtkUikit.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.

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