Build a Virtual Classroom App with Video Chat for iOS Using Swift

In this article, you will learn how to build an online classroom app for iOS where students and teachers can connect over video chat. This tutorial will guide you step by step in building a virtual setup for educational purposes with end-to-end encrypted SDKs from MirrorFly. 

This tutorial was built using:

• Xcode 13+
• Swift 5.0+
• iOS 13+
• MirrorFly Video SDKs

Note: If you’d like to build the video call on our sample app, you can check out our GitHub repositories.

Set Up Your iOS Virtual Classroom Project

Step 1: Create an Xcode Project

• Launch Xcode
• Create a New Project 
• Select Single View App from the Template grids

• In the following form, configure your project with the necessary details

Step 2: Get MirrorFly License Key

• Go to MirrorFly Console Page
• Fill in your basic details
• Click on Sign Up
• Verify your account using your registered email ID
• Login to your MirrorFly Account
• In your Account Overview page, download the iOS SDK file

Step 3: Integrate MirrorFly SDKs 

i. Extract and Import the framework files into the Project

• From the downloaded SDK package, extract the framework files

FlyCall.xcframework
FlyCore.xcframework
FlyCommon.xcframework
FlyNetwork.xcframework
FlyDatabase.xcframework
FlyXmpp.xcframework
FlyTranslate.xcframework

• Go to Project
• Select Target, then General
• Click on Frameworks, libraries, and Embedded Content
• Against all the xcframeworks, select Embed & Sign

ii. Disable the bitcodes

• Go to Project
• Click on Build Settings
• Search for the term ‘Bitcode’ and filter it
• Select ‘No’ from the dropdown

• Iii.  Initiate the Pods for your Project

 pod 'libPhoneNumber-iOS'
 pod 'Alamofire'
 pod 'RealmSwift', '10.20.1'
 pod 'XMPPFramework/Swift'
 pod 'SocketRocket'
 pod 'Socket.IO-Client-Swift'
 pod 'GoogleWebRTC'

iv. At the end of the pod file, add the pod hook block and continue to install the pods

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

v.  Configure your project with the below capabilities

• Go to Project
• Select Target > Signing & Capabilities
• Click ‘+’ at the top left corner 
• Search for the capabilities: App groups and Background Mode
• Under Background Mode, enable the following:
  • Audio, Airplay, and Picture in Picture
  • Remote notifications
  • Voice over IP
  • Background fetch

vi. Enable the permissions for audio and video 

• In this step, grant access to the camera and Microphone in your plist

Step 4: Perform SDK Configuration

• Use the AppDelegate class and configure server details in the SDK 
• Provide the License Key you generated in the first step of this tutorial

let BASE_URL = "https://api-preprod-sandbox.mirrorfly.com/api/v1/"
let LICENSE_KEY = "xxxxxxxxxxxxxxxxxxxxxx"
let CONTAINER_ID = "group.com.mirrorfly.qa"

Step 5: User Registration 

Next, you need to register a user in sandbox and live mode. Use the below method in the ChatSDK.Builder class.

try! ChatManager.registerApiService(for:  USER_IDENTIFIER ) { isSuccess, flyError, flyData in
        var data = flyData
        if isSuccess {
         // This is your Password
           guard let password = data["password"] as? String else{
               return
           }
           // This is your Username
           guard let username = data["username"] as? String else{
               return
           }
        }else{
            let error = data.getMessage()
            print("#chatSDK (error)")
        }
    }

Step 6: Initialization of the Call SDK

• Once you complete with the registration process, you need to call the below method:

try! CallManager.initCallSDK()

Step 7: Connect the SDK to the Chat Server

• You need to establish a chat server connection to transfer the initial call data payload

ChatManager.connect()

Step 8: Disconnect the SDK from the Chat Server

• Use the below method to disconnect the SDK from the Chat Server

ChatManager.disconnect()

Step 9: Observe Connect Events of Your Virtual Classroom App

• Confirm the ConnectionEventDelegate to track and monitor the connection status of your iOS app. 

• You can do this by setting up ‘delegate’ in the viewDidAppear method of the ViewController

ChatManager.shared.connectionDelegate = self

• Once you set the ConnectionEventDelegate, you will receive the status of the connection in the delegate as given below

func onConnected() {
  // Navigate to Conversation screen
  }

Step 10: Observation of the Call Events 

• To observe you call events, you need to create and set a Singleton Class. 
• Then, pass the object to the below method

CallManager.setCallEventsDelegate(delegate:CALLMANAGER_DELEGATE)

Step 11: Set Up the Call UI of Your Online Classroom App

• This step will implement the Call UI that will be displayed on the user screen of your classroom app during an outgoing call. 
• To do this, you need to pass an instantiated view controller object as mentioned below:

CallManager.setCallViewController(CALL_VIEW_CONTROLLER)

Step 12: Present the Call UI for an Outgoing Call

• To present the call UI of an outgoing call, you need to call the below method after declaring the call SDK or before making a call.

CallManager.setViewToPresentController("VIEW_TO_PRESENT")

Step 13: Make a Virtual Group Video Call

Connect multiple students and staff in the same call using the below method

CallManager.makeGroupVideoCall(USERID_LIST, GROUP_ID, (isSuccess, message) -> {
 }

Step 14: Add Students/Staff to the Call

• To add students or staff to an ongoing video call by inviting them using the below method. 
• Once the invited participant accepts the call, he/she will be added to the online classroom.

CallManager.inviteUsersToOngoingCall(USERID_LIST);

Step 15: Receive an Incoming Video Call

• The NotificationCenter will report to the FlyCallSDK, whenever a participant receives an incoming call from other users. 
• To set this up, you need to use the below method:

NotificationCenter.default.post(name: NSNotification.Name("CallPayloadReceived"), object: messageDict)

Step 16: Disconnect an Ongoing Call

• When a student or staff needs to leave the ongoing classroom, the below method will disconnect the participant from the ongoing call.

CallManager.disconnectCall()

That’s a Wrap

Yes, you’ve made it! You’ve built a fully functioning EdTech app that can work on any iOS device. If you’d like to experiment other interesting features on this app, I highly encourage you to explore the many functionalities here. I hope to meet you soon with yet another interesting insight. Until then, good luck on your app development journey!