How To Implement Video Call in SwiftUI with Two Lines of Code

Introducing a video calling feature to your application adds a powerful way for your users to communicate and interact with each other.

If you want to include video call in your application but don’t want to go through all the heavy lifting of reading the documentations and debugging the APIs, or if you just want to build a proof-of-concept (POC) application within a limited timeline, look no further. With AgoraUIKit, you can add a video call to your application with only two lines of code.

Prerequisites

1. An Agora developer account with an App ID
2. Xcode and an iOS device
3. CocoaPods (If you don’t have CocoaPods installed, you can find instructions here)

Overview

We’re going to use the Agora iOS UIKit to implement our video call. This module wraps the Agora Video SDK with a pre-made UI layer. This means you don’t need to spend any time implementing the video call logic, or even building your own UI. That’s all handled for you.

Import the SDK

We’re going to use CocoaPods to import the SDK into our app. Create a new SwiftUI project. Navigate to the directory of the project Terminal, and run pod init. This initilizes CocoaPods for your project. Open the Podfile that was created, and add the Pod for AgoraUIKit:

Save the file, and then run pod install in Terminal. From now on, open the .xcworkspace file to edit your project, instead of the .xcodeproj.

Add Camera and Microphone Permissions

In order to use the microphone and camera, we’ll need to ask the user for permission to do so. In your Info.plist add the following keys:

Privacy - Microphone Usage Description
Privacy - Camera Usage Description

Make sure you add a value for each. These values are user-facing, and will be displayed when the app asks for these permissions from the user.

Wrapping the Agora UI

AgoraUIKit is built using a UIViewController. As such, we’ll need to wrap it in something SwiftUI understands in order to display it in our app. Fortunately, SwiftUI has made that easy.

Create a new file, and import SwiftUI and AgoraUIKit. Then make a new struct that conforms to the UIViewControllerRepresentable protocol.

We then need to tell SwiftUI what kind of UIViewController we’re wrapping, and implement two functions to create and update the view.

We don’t need to update the view ourselves, so we can leave that blank. Creating an AgoraVideoViewController is as simple as passing in our App ID and desired channel name.

And that’s all there is to it. We now have a working video call view that we can add into our main ContentView like any other SwiftUI View.

Testing

You can confirm that the call works just by running the content preview on two devices and verifying that the audio is connected (beware of feedback). The video won’t work in the preview, as it lacks a camera, but you can use the Agora web demo as a second user if you only have one physical device to run the app.

Done!

Thats it! You now have a working video call app. For basic customization options, take a look at the Agora UIKit docs, and if you want to use the full power of Agora, you can view their documentation here.

Thanks for following along. If you have any questions, feel free to send an email to devrel@agora.io, or join the Agora Developer Slack community.

---