Building a mobile video chat app for iOS using Swift

Rapidly embed group video chat into your mobile projects

Since Apple first introduced Swift in 2014, it has witnessed rapid adoption and become the programming language of choice for mobile app development on iOS. While some people prefer Objective-C, a large number of iOS developers are now moving to Swift.

When it comes to building a high-quality group video chat application using vidyo.io, should you use Objective-C or Swift? The answer is either. Whichever programming language you prefer, vidyo.io has you covered. To quickly start building an iOS app, download the iOS package. The iOS package comes with the VidyoConnector reference application written in Objective-C. So if you are planning to use Objective-C, you are good to go. You can follow along with the quick start guide or check out the how-to video to initiate the process.

But if you want to use Swift, fret not. The vidyo.io framework is completely compatible. You can use Swift by adding a bridging header that will add all of vidyo.io’s functionality to your project. This lets you take full advantage of the coding benefits in Swift. In this article I’ll guide you through a step-by-step process to get your multiparty Swift video chat app off the ground.

Required software

• Xcode – version 8 or above
• VidyoClient-iOS framework

 Download the latest iOS package.

Create a new project

Let’s begin by creating a new application on Xcode. From the template selection page you can select any template that suits your project, but for our sample purpose, select “Single View App” and click “Next.”

This will bring you to the next screen, where you must enter the product name. For this exercise I will name my product VidyoConnectorSwift but you can obviously choose an appropriate name for your project. Make sure you select the language as “Swift.”

After you click “Next,” Xcode asks you where to save the VidyoConnectorSwift project. Pick any folder (e.g., Documents) on your Mac and click “Create” to continue.

Adding VidyoClient Framework

Next let’s copy the VidyoClientIOS.framework from the downloaded VidyoClient-iOSSDK package to our newly created project folder. You can find the framework file under the lib folder of the package. Once you copy the file your project folder should look like this:

To link this framework in our Xcode project, go back to your newly created project, select “VidyoConnectorSwift” on the left pane, then select “VidyoConnectorSwift” in “Targets” and select the “General” tab. Under “Embedded Binaries” click on the “+” icon.

This will open up a pop-up menu, where you’ll select the “Add Other” option.

Go to the project folder where you copied the VidyoClientIOS.framework and select it.

Adding Keychain Sharing Capability

The vidyo.io SDK needs the “Keychain Sharing” capability turned on so that it can install the Vidyo license and certificate and code-sign your application. To enable this, go to the VidyoConnectorSwift target and turn on “Keychain Sharing” under the “Capabilities” tab.

Once you turn it on, it will automatically add your application bundle identifier to the keychain groups list. Click “+” to also add “VidyoLicense” to the list.

Keychain Groups:

• io.vidyo.VidyoConnectorSwift (your application ID)
• VidyoLicense

Update Info.plist

Since we’re building a video chat application, this app will access both the camera and microphone. Apple requires you to ask permission from the user to gain access to these resources. We can do this by simply adding the description text in the info.plist file.

Add two new entries under “Information Property List”:

• Privacy – Microphone Usage Description
• Privacy – Camera Usage Description

Adding bridging header

The current version of the VidyoClientIOS.framework is written in Objective-C. To access the objects from your Swift project, we are going to create a bridging header. To do so, hit ⌘N or go to File->New->File.

Select “Header File” and click “Next.” Let’s name this VidyoConnectorSwift-Bridging-Header.h.

This will create your header file, open it, and add the following code to reference the Vidyo connector objects:

Next, you need to tell Xcode where your bridging header is located. Go back to your build settings, and search for “Objective-C Bridging Header.” Add the relative path to the header file we just created:

We still need one more setting in the build settings. Look for “Header Search Paths” and tell Xcode to look for header files under this directory:

Now your Swift project is ready to consume Vidyo objects.

Connecting to a video room

Now that we’ve got the setup done, lets add some code to join a video conference. The single-view application comes with a default view controller, which is the starting point for your application. In this view controller I added a UIView object and also added “Connect” and “Disconnect” buttons. I connected the UIView to an IBOutlet in its corresponding ViewController class, calling it “vidyoView.” Finally, I connected the buttons to an IBAction to register for the click events.

I am going to use vidyoView as my video conference UI. In other words, this is the view where I am going to tell the vidyo.io SDK to draw my preview and the remote participants. I will use the “Connect” and “Disconnect” button click events to join or leave the video call.

Here are the steps to follow:

1. Initialize VidyoConnector 
   VCConnectorPkg.vcInitialize()
2. Construct the VidyoConnector object and pass the UIView object where the preview and participants should be rendered.
   var connector = VCConnector(UnsafeMutableRawPointer(&vidyoView),
                               viewStyle: .default,
                               remoteParticipants: 4,
                               logFileFilter: UnsafePointer("warning"),
                               logFileName: UnsafePointer(""),
                               userData: 0)
3. Tell the vidyoconnector object where to show the view and at what size
   connector.showView(at: &vidyoView,
                      x: 0,
                      y: 0,
                      width: UInt32(vidyoView.frame.size.width),
                      height: UInt32(vidyoView.frame.size.height))
4. Connect to a video conference call
   connector.connect("prod.vidyo.io",
                      token: "XXXX",
                      displayName: "Sachin",
                      resourceId: "demoRoom",
                      connect: self)

Note: In this step, to connect to a video conference call, you will need a valid token. A token is a short-lived authentication credential that you create for your users. Learn more about tokens and how to generate them.

And that’s it! Your application is ready to join multiparty video conferences. Putting this all together, this is how the view controller class would look:

To see a complete project, along with both composited and custom view layout options, see the sample project shared on our Github page.

Getting started on vidyo.io is easy. Sign up for free today, and don’t miss this video that shows how to build a video chat app in Objective-C in under nine minutes. And be sure to follow us on Twitter at @vidyo_io to stay up to date on our latest releases, news, and tutorials.