Add Peer to Peer Video Calling to your iOS app using Agora.io

A plethora of mobile developers are looking to add video chat in mobile apps to drive engagement and interactions between users. Whether we look at dating, telemedicine, gaming, and even e-commerce, more apps are adding live video chat or broadcasting to as a part of their offerings.

Building out video chat in your mobile applications using out of the box WebRTC is not an easy task. There are many limitations ranging from OS support, browser support, global scalability. The Agora Video SDK can help get past these limitations and allow you to focus on your app experience rather than the video stack.

Let’s get started by building a simple 1-to-1 video calling feature in your existing iOS app using Swift.

You can use CocoaPods to automatically add the Agora SDK to your application.

Add the following to the Podfile:

Install the Pod by running the following:

Open the newly created .xcworkspace project and navigate to the `Info.plist` file. Add the following keys in `Info.plist`:

* Privacy — Camera Usage Description

* Privacy — Microphone Usage Description

For each key, you will need to add a quick explanation on why you are using the camera/microphone

In Main.storyboard, add a new View Controller which contains 2 subviews: one for the local video feed (referred to `localVideo`) and the other for the remote video feed (referred to as `remoteVideo`). Add a few buttons for call functionality such as: muting the local video, muting the local audio, hanging up a call, and switching camera.

In the sample project, a helper method called initializeAgoraEngine() contains this logic and is invoked by viewDidLoad():

The next step is to enable video mode, configure the video encoding profile, and specify if the width and height can change when switching from portrait to landscape:

Create a helper method called setupVideo() which will contain this logic and is invoked by viewDidLoad(). It starts by enabling video with enableVideo(). The video configuration is then set to the following:

Dimensions -> 640x360,
Frame rate -> 15 fps,
Bit rate -> Standard (same as base frame rate),
Orientation -> adaptive (output video follows orientation of captured video)

If a device’s camera does not support the specified resolution, the SDK automatically chooses a suitable camera resolution.

A helper method called joinChannel() invokes agoraKit.joinChannel() enables a user to join a specific channel:

Note: Users in the same channel can talk to each other, but users with different app IDs cannot call each other even if they join the same channel.

In the sample, the helper method joinChannel() is invoked by viewDidLoad():

The logic for the local video feed is contained within a helper method called setupLocalVideo(), which is invoked by viewDidLoad():

setupLocalVideo() creates an AgoraRtcVideoCanvas object for the video stream and initializes the following properties:

The VideoCallViewController class extends AgoraRtcEngineDelegate:

The rtcEngine(engine: AgoraRtcEngineKit, firstRemoteVideoDecodedOfUid uid: UInt, size: CGSize, elapsed: Int) delegate method is invoked once connected with another user and the first remote video frame is received and decoded. This method performs the following actions:

The rtcEngine(engine: AgoraRtcEngineKit, didVideoMuted muted: UInt, byUid: UInt) is invoked when a remote user pauses their stream. This method toggles the remote video user interface elements.

Video Call View Controller contains a helper function called leaveChannel() with the logic to leave the current video call (channel). This is invoked by the IBAction for the Hang-Up button:

The leaveChannel() method:

To allow the user to mute local audio, the IBAction for the mute button invokes muteLocalAudioStream():

Once audio is muted, the helper method resetHideButtonsTimer() is invoked to cancel any view requests and to ensure the control buttons are hidden:

To allow the user to stop sharing local video, the IBAction for the video button invokes muteLocalVideoStream():

Once disabled, the views related to the local view are hidden and the helper method resetHideButtonsTimer() is invoked to cancel any perform requests and to ensure the control buttons are hidden.

To hide all the image views that are meant to appear when either the remote or local video feeds are paused, the sample defines the hideVideoMuted() helper method. This method is invoked from viewDidLoad() to ensure the videos are hidden on startup:

The sample uses a tap gesture recognizer (of type: UITabGestureRecognizer) as part of the view which performs the action of calling the viewTapped() function:

Related posts:

Axon is a popular framework for writing Java applications following DDD, event sourcing, and CQRS principles. While especially useful in a microservices context, Axon provides great value in building…

Are you facing sleep deprivation and insomnia? Here are some ways to improve your sleep quality and durarion.

We are experts in all kinds of glass replacement for auto, home and business.