Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building a Mobile Video Chat App for iOS Using Swift

DZone's Guide to

Building a Mobile Video Chat App for iOS Using Swift

Bring multiparty video chat capabilities to your iOS with vidyo.io. And while Vidyo is built for Objective-C, fear not! It's Swift-compatible, too.

· Mobile Zone ·
Free Resource

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.”

Swift Select Single View App

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.”

Swift Enter Product Name

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:

Swift copy Vidyo Client

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.

Swift Link Framework

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

Swift Add Other

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.

Swift Enable Keysharing

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

Swift Update Info.Plist

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.

Swift Add Bridging Header

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

Swift Save Bridging Header

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

#ifndef VidyoConnectorSwift_Bridging_Header_h
#define VidyoConnectorSwift_Bridging_Header_h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <VidyoClientIOS.framework/Headers/Lmi/VidyoClient/VidyoConnector_Objc.h>

#endif /* VidyoConnectorSwift_Bridging_Header_h */


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:

$(PROJECT_DIR)/VidyoConnectorSwift/VidyoConnectorSwift-Bridging-Header.h


Swift Briding Header Location

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:

$(PROJECT_DIR)


Swift look for header file

Now your Swift project is ready to consume Vidyo objects.

Connecting to a Video Room

Now that we’ve got the setup done, let's 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.

@IBOutlet weak var vidyoView: UIView!
@IBAction func connectClicked(_ sender: Any) {
}

@IBAction func disconnectClick(_ sender: Any) {
}


Swift Connect Vidyo Room

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:

class ViewController: UIViewController, VCIConnect {

    private var connector:VCConnector?
    @IBOutlet weak var vidyoView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        VCConnectorPkg.vcInitialize()
        connector = VCConnector(UnsafeMutableRawPointer(&vidyoView),
                                viewStyle: .default,
                                remoteParticipants: 4,
                                logFileFilter: UnsafePointer("warning"),
                                logFileName: UnsafePointer(""),
                                userData: 0)
        connector?.showView(at: &vidyoView,
                            x: 0,
                            y: 0,
                            width: UInt32(vidyoView.frame.size.width),
                            height: UInt32(vidyoView.frame.size.height))
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func connectClicked(_ sender: Any) {
        connector?.connect("prod.vidyo.io",
                           token: "XXXX",
                           displayName: "Sachin",
                           resourceId: "demoRoom",
                           connect: self)
    }

    @IBAction func disconnectClick(_ sender: Any) {
        connector?.disconnect()
    }

    // MARK: - VCIConnect delegate methods
    func onSuccess() {
        print("Connection Successful")
    }    

    func onFailure(_ reason: VCConnectorFailReason) {
        print("Connection failed \(reason)")
    }  

    func onDisconnected(_ reason: VCConnectorDisconnectReason) {
        print("Call Disconnected")
    }
}


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

Topics:
mobile ,ios app develoment ,video chat ,swift ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}