DEV Community

Cover image for How to Write a Few Lines of Code to Create an iOS Video Call App
Yogender Singh
Yogender Singh

Posted on

How to Write a Few Lines of Code to Create an iOS Video Call App

As digital communication expands rapidly, app-to-app calling is an intriguing new feature to test. While it may seem enticing to rapidly add an audio/video calling feature to your iOS app, it is not a simple task. That's because starting from scratch requires a lot of coding and intricate integration.

This is where the EnableX CallKit framework comes into play. It simplifies the procedure and saves you time and energy from writing endless lines of code!

This comprehensive video on 'How to Build an iOS Video Call App' looks at how to leverage the WEBRTC-based EnableX Video framework and the EnableX CallKit to allow Audio & Video functionality with a native dialer UI on your app.

How Does the EnableX Calling UI Framework Work?

All it takes is a few lines of code to enable audio and video features in an application thanks to this framework! There are two components to the framework:

Built on top of the native UI elements, the EnableX iOS Audio/Video calling framework is called EnableX UIKit.

The Issue It Resolves: EnableX CallKit Framework

Before we delve into the specifics, let's review some background information. Initially, we introduced an iOS SDK to enable developers to build an iOS Video Call App with audio and video features. However, this still required developers to create a calling UI and code all the calling-related events, resulting in a significant amount of coding work.

To simplify and accelerate this process, EnableX introduced UIKit. By integrating UIKit into a project, it automatically installs the necessary iOS SDKs and handles all the UI and calling-related events. It also helps in creating a fully native UI. This feature allows developers to incorporate audio and video functionalities into an app with just a few lines of code. UIKit facilitates live video chat and manages all calling-related events.

However, when entering a room and wanting to add other participants to the session, they need to be notified. This involves creating events to send notifications to end-users (or participants). For this to work, a calling UI is necessary on their end; otherwise, they cannot join the call. This is a crucial feature for a seamless audio or video call experience. Nonetheless, it still requires extensive coding.

Building an iOS Video Call App Requires

To build an iOS video call app, you need a basic-to-intermediate level understanding of Swift or Objective-C and Xcode. Ensure that the Voice-Over IP feature is enabled in the application under the background mode.

To begin, create an EnableX Developer Account to access the tutorial. You'll need Xcode 10 or a higher version, and your device must be running iOS 12 or above to install EnableX CallKit.
Here’s a step-by-step guide to building a simple and seamless app-to-app calling mechanism. We’ll start by installing the EnableX CallKit:

  1. Use CocoaPods to install project files and dependencies:

o Visit the CocoaPods 'Getting Started' webpage to install CocoaPods.
o Open your project’s profile and add pod 'Enx_CallKit_iOS'.
o In the terminal, navigate to your project directory and type pod install.
o Reopen your project in Xcode using the newly created *.xcworkspace file.

Once you’ve completed these steps, EnableX CallKit is installed. Before proceeding further, it’s important to familiarize yourself with the basics of the EnableX CallKit framework.

Activate X CallKit Framework Callbacks & Behaviors

First, you need to pass an instance of the class where you will receive event callbacks. The EnableX CallKit UI can be opened after your app receives push notifications.
For example:

let backGroundTaskIndet = UIApplication.shared.beginBackgroundTask(expirationHandler: nil)

CallManager.reportIncomingCall(uuid: UUID(), caller name: “Caller Name”, hasVideo: true/False) { _ in
UIApplication.shared.endBackgroundTask(backGroundTaskIndet)
}
Users need to initiate a background task before loading the calling UI. Once the UI has loaded, the background task should be ended. This is necessary because when an app opens another app, the first app remains open in the background.
To end a call, use the following API:
callManager.endCall()
After the user receives the call, EnableX CallKit starts providing notifications about user behavior.
For example:

Call Answered: func callAnswer() - Called when you answer the call.
Call Rejected: func callReject() - Called when you reject the call.
Call Timeout: func call timeout () - Called when you don’t respond to the call within 45 seconds.
Call Ended: func callEnd() - Called when you end the call.
Call Hold: func callHold() - Called when you put the call on hold.

To join the EnableX room after receiving a call via CallKit, you need to create an Access Token.

Create Access Token

To connect to a room, every user requires a unique Access Token. This is typically accomplished via a **[REST API call](https://openapi.enablex.io/video/v1/api-docs/?_gl=1*23vat8*_ga*MTA2NTc5NDYyNS4xNzE2MTg0NTI1*_ga_XK68MTBLGX*MTcxODA4MzM3NS41MC4xLjE3MTgwODQ2NjguNjAuMC4w#/Rooms)**.
Enter fullscreen mode Exit fullscreen mode

To generate the Access Token and Room ID, use the following link: https://openapi.enablex.io/video/v1/api-docs/#/Rooms.
To join an EnableX room, users need an Access Token from the EnableX server and the EnableX iOS SDK.
You can generate this token using either the EnableX UIKit or the EnableX audio/video framework:

Using EnableX UIKit Framework

  1. Install EnableX UIKit Using Pod Add the following line to your pod file:
    ruby
    pod 'Enx_UIKit_iOS'
    Then, install the pod. The EnableX UIKit SDK will be integrated into your application.

  2. Import UIKit in Your Controller Import Enx_UIKit_iOS and initiate EnxVideoViewClass.

let enxViewer = EnxVideoViewClass(token: “a valid room token”, delegate: self)

  1. Add the Viewer Object to Your View
    view.addSubview(enxViewer)

  2. Set the Frame
    enxViewer.frame = self. view. bounds

  3. Set Constraints for UI Adjustment on Orientation Change
    enxViewer.auto resizing mask = [.flexibleWidth, .flexibleHeight]
    Your video integration is now complete. You will receive callbacks for disconnection or errors while joining the room:

• Room disconnected:
func disconnect(response: [Any]?)

• Connection error:
func connectError(reason: [Any]?)

Using EnableX Audio/Video Framework

  1. Install EnableX iOS SDK Using Pod Add the following line to your pod file:
    ruby
    pod 'EnxRTCiOS'
    Then, install the pod. The EnableX iOS SDK will be integrated into your application.

  2. Join the Room
    func join call(_ token: String) {
    // Set video size
    let video size: NSDictionary = ["minWidth": 320, "minHeight": 180, "maxWidth": 1280, "max-height": 720]

    // Setup room configuration
    let room info: [String: Any] = ["allow_reconnect": true, "number_of_attempts": 3, "timeout_interval": 20, "activities": "View"]

    // Local stream configuration
    let localStreamInfo: NSDictionary = ["video": true, "audio": true, "data": true, "name": "Jay", "type": "public", "audio_only": false, "video size": videoSize]

    // Join EnableX room and get the local stream instance
    guard let stream = self.objection.join the room(token, delegate: self, publishStreamInfo: (localStreamInfo as! [AnyHashable: Any]), room info: room info, advance options: nil) else {
    return
    }

    self.localStream = stream
    self.localStream.delegate = self as EnxStreamDelegate
    }
    Once users join the EnableX room, they will be notified through EnxRoomDelegate with the following callbacks:

• Room connected:
func room(room: EnxRoom?, didConnect roomMetadata: [AnyHashable: Any]?)

• Connection error:
func room(room: EnxRoom?, didError reason: [Any]?)
Upon publishing a local stream and subscribing to a remote stream, users will receive updates on Active Talkers:

• Active Talker view:
func room(_ room: EnxRoom?, didActiveTalkerView view: UIView?)

• Active Talker list:
func room(room: EnxRoom?, didActiveTalkerList data: [Any]?)

For disconnections:

func didRoomDisconnect(_ response: [Any]?)
To learn more about EnableX iOS SDK and APIs, visit the provided link.

Calling UI Screen (Audio Video Framework)

• At the start of the call.
• When the screen is unlocked.
• After the call is received by the end user, show the native dialer interface (for audio-only calls).

Calling UI Screen (UIKit)

• When you join a call using UIKit.
• While waiting for other users to join the call.
• When a user joins the room.
• When multiple users join the room.

Final Words

Gone are the days of tedious and exhausting coding, thanks to the EnableX CallKit framework!

Sign up now to quickly build your own iOS Video Call App using the EnableX CallKit Framework!

Let's create something exciting together!

The EnableX Video Platform leverages top-tier technologies and infrastructure to provide the best possible customer experience. Utilizing WebRTC as the core real-time communication framework, we ensure smooth communication across various endpoints and mobile devices. We offer native APIs and SDKs along with hybrid frameworks for both web and mobile applications, including ReactNative, Flutter, and Cordova, to facilitate quick integration for developers.

Top comments (0)