How to Build a Virtual Classroom iOS App with Video and Chat
In this tutorial, we'll build an iOS app where students and teachers can interact in a virtual classroom using Stream Chat, to deliver fully featured chat components, and Dolby.io, to provide quality audio and video. By the end, we'll have an application similar to the screenshots below. As a bonus, it's compatible with both light and dark mode.
What is Stream Chat?
Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure. Drive in-app conversion, engagement, and retention with the Stream Chat messaging platform API & SDKs.
What is Dolby.io's Client SDK?
Dolby Interactivity APIs provide a platform for unified communications and collaboration. In-flow communications refers to the combination of voice, video, and messaging integrated into your application in a way that is cohesive for your end-users. This is in contrast to out-of-app communications where users must stop using your application and instead turn to third-party tools.
Set up project
Create the Xcode project
First, we open Xcode and create a Single View App project.
And make sure to select 'Storyboard' for the User Interface.
In the folder where you saved the project, run
pod init and add
VoxeetUXKit to the
Podfile. It should look similar to this:
After you do that, run
pod install, wait a bit for it to finish, and open the project via the
.xcworkspace that CocoaPods created.
Configure the Stream Chat dashboard
Sign up at GetStream.io, create the application, and make sure to select development instead of production.
To make things simple for now, let's disable both auth checks and permission checks. Make sure to hit save. When your app is in production, you should keep these enabled.
Now, save your Stream credentials, as we'll need them to power the chat in the app. Since we disabled auth and permissions, we'll only really need the key for now. Still, in production, you'll use the secret in your backend to implement proper authentication to issue user tokens for Stream Chat, so users can interact with your app securely.
As you can see, I've blacked out my keys. You should make sure to keep your credentials safe.
Configure the Dolby.io dashboard
Configuring the Dolby.io dashboard is simpler. Just create an account there, and it should already set up an initial application for you.
Now, save your credentials, as we'll need them to power the audio and video streaming in the app. As with the Stream credentials, you use these for development. In production, you'll need to set up proper authentication. It's described in detail here.
Configure Stream Chat and Dolby.io's SDKs
The first step with code is to configure the Stream and Dolby SDK with the credentials from the dashboards. Open the
AppDelegate.swift file and modify it, so it looks similar to this:
That code initializes the Dolby.io and Stream Chat SDKs with credentials you got in the previous two steps.
Create the Join Screen
Let's start building the "Join" screen. This screen consists of two
UIButton instances. One to join as a Student, and the other to participate as the teacher. That is an oversimplification to make this tutorial short and get to the chat, audio, and video features faster. In your complete app, you'll need proper registration, database, and all that. For this tutorial, the screen will look similar to the screenshot below.
Go to the storyboard, select the default view controller, and click
Editor > Embed In > Navigation Controller. That will place it under a navigation controller, which we'll use to navigate to the classroom screen.
Make sure to rename
JoinViewController, so you don't get confused later. You can do this easily by right-clicking on
ViewController.swift and selecting
To make things simple, let's leave the storyboard like this and use only code from now on. To set up the two buttons, we need the following code in
That code sets up the views, the constraints, and the handlers we need. Let's start by extending
JoinViewController to define
That code will create the buttons and add them to the controller's view. Next, we need to define constraints between the three. Let's do this by extending
JoinViewController to define
That code will ensure the
studentButton stays in the center of the screen and the
teacherButton below it. Now we need to set up the handler for when the user presses the buttons. Let's do this again by extending the controller to define
That code will make it so, when the user presses the button, a
ClassViewController is created and set up for the teacher or a student, depending on which button the user pressed. We'll create
ClassViewController in the next step.
Create the Classroom Screen
Now, let's create the screen where the students and teacher will talk via chat and where they may begin a video call. We'll start by defining ClassViewController. It will look similar to the screenshots below.
The first step is to create a ClassViewController.swift file and paste the code below.
That code defines a subclass of ChatViewController, which provides most of the chat behavior and UI we need. It also defines the student and teacher
User objects and a
Channel object. These objects will be used to interact with the Stream API. Additionally, we're generating a random id for the student using the String extension below.
viewDidLoad, we also call
setupHandlers to set up the views and handlers needed. We'll define those functions next.
But, let's first define the
setupStudent function that sets the current Stream Chat user as a student, and the
setupTeacher function that sets it as the teacher.
Now we define
setupViews to set up the views we need.
Those functions will display a button which starts a call. For it to work, we'll need to define
setupHandlers as well.
Those functions set
callButtonPressed as the function to be called when the call button is pressed, which in turn calls
startCall, which we define next.
Finally, that function uses the Dolby.io SDK to start a conference call.
Configure usage descriptions
If you run the app now, you'll be able to chat, but pressing the call button will cause the application to crash. That happens because we need to configure the usage descriptions for microphone and video in the
Info.plist file. To do this, just open
Info.plist and set the
NSCameraUsageDescription keys as pictured below.
Finally, we open the app in two devices, and, from the chat, we can start a call.
Congratulations! You've built the basis of a functioning EdTech app with Stream Chat and Dolby.io. I encourage you to browse through Stream Chat's docs, Dolby.io's docs, and experiment with the project you just built. Good luck on your EdTech app development!