How to Setup Video Calling in iOS App using Agora.io?

Posted by Monicajose on April 3rd, 2021

Modern-day Mobile App Development Company in Saudi Arabia are getting down to the roots to satisfy the user’s requirements. This blog explains How to Setup Video Calling in iOS App using Agora.

As most of the users got exposed to the technology trends are looking for face to face real-time virtual communication. Mobile apps play a bridge between the users to make the communication session, interactive and engaging.

Every industry is clubbing up the video chat facility in their IOS Mobile App Development or Android Mobile App Development.

But building a video calling in the iOS app is not an easy to do process using WebRTC!

There are plenty of limitations to develop a video calling feature in iOS or Android by the Top Mobile Application Development Services in Saudi Arabia.

• OS support
• Browser Support
• Global Scalability 

Where the Agora Video SDK can help to come over these limitations and help the android iOS mobile app developer focus on delivering a better user experience.

Steps to set up one to one Video calling feature in iOS app using Swift:

Step 1: Use CocoaPods to add Agora SDK to the Mobile application.

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

Set up Story Board:

In the Main.storyboard add two subviews-

• local Video
• remoteVideo

Add Addition features like;

1. Mute Audio Call
2. Mute local Video
3. Hang-up Call
4. Stich (Front/Back) Camera

Code Sample is “VideoCallViewController.swift” inform the application about Agora engine runtime events such as joining or leaving a channel and the addition of new participants.

AgoraRtcEngineKit is the interface of the Agora API that provides communication functionality.

All about Agora API:

The agora instance will inform the application about Agora engine runtime events such as joining or leaving a channel and the addition of new participants.

Video Mode Configuration:

Step 1: Enable video mode – enableVideo()

Step 2: Configure the video encoding profile – setupVideo ()

Step 3: Specify the video dimension that can change if the camera is switched between portrait to landscape mode – viewDidLoad()

How to Setup Video Calling in iOS App using Agora.io?

Set the video configuration as mentioned below:

Dimensions -> 640×360,

Frame rate -> 15 fps,

Bit rate -> Standard 

Orientation -> adaptive 

Join a Channel:

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

The channelName parameter provides the name of the channel to join for example:`demoChannel1` and the uid parameter passes the assigned user ID for the user joining the channel.

*The call using agoraKit enables the speakerphone when using Agora, and UIApplication.shared.isIdleTimerDisabled disables the application’s idle timer to prevent the iOS application development from idling while the app is running.

Join Channel()

Set up Local Video:

Within helper method setupLocalVideo(), is invoked by viewDidLoad().

setupLocalVideo() creates an AgoraRtcVideoCanvas object for the video stream.

Initializes the following properties:

uid: A value of 0 allows Agora to choose a random ID for the streaming feed.

view: Set to the localVideo view from the storyboard.

renderMode: Set to hidden to uniformly scale the video until it fills the visible boundaries.

Set up Video Call View Controller:

The VideoCallViewController class extends AgoraRtcEngineDelegate:

The rtcEngine 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:

• Checks if the remoteVideo view is hidden and unhides it if it is hidden.
• Initializes the AgoraRtcVideoCanvas object.
• Sets the uid property to 0 to allow Agora to choose a random UID for the streaming feed.
• Sets the view property to the remoteVideo view from the storyboard.
• Sets renderMode to adaptive to ensure the video is resized proportionally to fit the display window.
• Invokes agoraKit.setupRemoteVideo(videoCanvas) passing in the AgoraRtcVideoCanvas object that was just created.

Hang Up and End the Call:

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:

• Invokes agoraKit.leaveChannel() to leave the channel
• Invokes the helper method hideControlButtons() to hide the controlButtons view containing the bottom buttons.
• Re-enables the application’s idle timer.
• Removes both the local and remote video views.
• Sets agoraKit to nil to remove the reference to the AgoraRtcEngineKit object.

Mute Audio and Video:

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

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

Flip Camera:

To enable the user to choose between the front and rear cameras, an IBAction for the camera switch button invokes switchCamera() to add the camera switch functionality:

Hide Video Views:

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:

Conclusion about How to Setup Video Calling in iOS App using Agora.io?

That’s it, now you can run the Video Calling in the IOS app using Agora. Connect one to one or multiple devices to test the video calls. 

If you have further question, Contact Yellostack. The iOS experts at the best mobile application development company in Saudi Arabia is here to support or guide you in all instance.