Creating an Online Classroom in Laravel With Vonage Video API
This article will demonstrate how to set up a real-time Video/Virtual Classroom using the Vonage Video API where the teacher can be in any location in the world and still communicate and have lectures with the student in real-time.
What Exactly is Vonage Video API?
Vonage Video API is a service that makes it easy for developers to create applications that utilize WebRTC and Web Sockets to give real-time communication by video, text, audio, and others for web apps, mobile apps, and even desktop devices. They provide powerful SDKs for various platforms to implement and give users the API to use for their applications.
How Does It Work?
All applications that utilize the Vonage Video API consist of three main components and everything you do revolves around them. They are:
- Sessions
- Server
- Client
Let’s look at each of them in a little bit of detail.
Sessions
A session can be seen as the virtual chatroom where communications take place. In order for two computers to be able to exchange video or audio, they have to be connected to the same session. Sessions are hosted/stored in Vonage API’s cloud and they all have a unique ID. Sessions manage the user streams (video and audio feed) and keep track of all events (such as when users join or leave or send a text message).
Server
Servers are the backend code you write to manage the sessions in your application. For communication to take place, your server has to communicate with Vonage API’s cloud to create a session and use the session ID received to generate tokens that clients (browsers and mobile phones) can then use to join the session and exchange streams. In order to make your server work, you’d have to use one of Vonage API’s many server side SDKs available for various server-side languages.
Client
Clients are the browsers or mobile devices that users interact with directly to exchange video and audio feeds. Clients always require a token (generated by your server) to join a session so they can interact with other clients on the same session.
When a client is connected, they are able to publish (send video/audio feed) and subscribe (receive audio/video feed) to other clients on the same session. A client could either be a publisher, subscriber, or moderator.
Publishers are allowed to send and receive audio/video feed. Subscribers aren’t allowed to send, but they receive audio/video feed. Moderators are allowed to do what publishers can, but also prevent other clients from subscribing.
To recap, this is what happens for communication to occur when using the Vonage API:
Your server creates a session on the Vonage API Cloud that has a unique ID. When a client wants to join, your server uses the session ID to generate a token for your client. The client joins the session and publishes streams to the session. When another client joins, the server generates a new token, and the two clients can subscribe to each other in the session and receive each other’s streams.
Setting Up Our Online Class with Vonage API
In this tutorial, we’ll be setting up a basic video feed with the Vonage API to allow clients to send audio and video feed. Vonage API provides an SDK for PHP and we’ll be using it to create our virtual class.
Set Up a Laravel Project
The first step in creating our virtual class is setting up a Laravel Project.
It’s important to note that at the time of writing this, the Vonage API doesn’t work with the latest version of Laravel* *(8.x). This is because the Vonage API PHP SDK depends on version 6 of GuzzleHTTP but Laravel 8 uses version 7 of GuzzleHTTP. So for this tutorial, please install version 7 of Laravel. You can do so by running the install command like this:
Or you can also follow along by cloning the repository here.
Installing Vonage API PHP SDK
The next step is installing the Vonage API PHP SDK. We do that by installing the package with composer to our project.
Defining our Migrations and Models
Now we have to define our teachers and students so they can have different permissions in our virtual classroom. Our application would make use of two tables — users to store all the teachers & students and virtual_classes to store the session ids of our classes so that students can see the ongoing class when they log in and join it. These are the migrations for both tables:
Open the users migration at database/migrations/xxxxxx_create_users_xxxx.php
Open the virtual_classes migration at database/migrations/xxxxxx_create_virtual_classes_xxxx.php
After doing this, we’ll need to create a folder called Models in the app directory and move our models there. Then, we’ll update the namespace to App\Models on our models. Finally, we’ll update the User model to add user_type to the $fillable array and create a relationship to virtual classes so we can access them easily.
Open the User model at app/Models/Users.php
Authentication
Now that we have our model architecture setup, we need to allow users to register and log in. The first thing to do is to edit the providers in our project configuration. Since we changed the location of the User model, we need to reflect the change. We first go to config/auth.php and edit the providers array and run the commands to scaffold the authentication.
After doing this, we simply run the Laravel default authentication scaffold:
After running all four commands in that order, Laravel should add the required views to setup authentication. The final step in setting up our authentication is to edit the RegisterController and the register.blade.php file to know if a user is a student or teacher at the time of registration.
First, the app/Http/Controllers/Auth/RegisterController file:
Then the register view. It’s found in resources/views/auth/register.blade.php:
With this done, we should be able to register and login as either a teacher or a student.
Setting up Our Server
Before you can set up your server, you’d need a project API key and secret. To get that, you’d have to create a free Vonage API Account. Please do that by clicking this link. Once you follow through and create a project, then feel free to come back and continue :)
First, let’s store our API key and API secret in our .env file in our Laravel project:
Now, we’ll need to set up a controller actually to set up sessions and generate tokens for new users. Let’s create one and call it SessionsController:
Let’s fill it with the necessary methods in app/Http/Controllers/SessionsController.php:
When creating the token, we can set the role the current client can have. It could be either Publisher, Subscriber or Moderator. The roles are explained above. In the code snippet above, we’re giving all users publisher status, meaning all users can send and receive streams(video-audio feed)
We’ll need to create a classroom.blade.php file in our resources/views folder for the showClassroom method.
We’ll also need to create routes for the controller. We’ll add these routes in the routes/web.php file:
Finally, in our dashboard, we need to give teachers a point to create classes and give students the list of classes to join. To do this, we’ll need to update the HomeController and the home.blade.php file. Let’s do this; I hope y’all are still with me 🙂
We’ll start with the app/Http/Controllers/HomeController:
Next resources/views/home.blade.php:
This either provides a form to create a class if the user is a teacher or a virtual class list if the user is a student.
Setting up Our Client and Streaming Live Video-Audio Feed
In order to set up the client (which would be using the web SDK), we’ll need to create a blade file called resources/views/classroom.blade.php to match the showClassroom() method on our SessionsController. The file would need to have a link to the SDK's CDN. Our frontend should look just like this:
To test the application, run the following command your project root directory.
Open http://localhost:8000/ in your browser and click on the login menu.
If done correctly, you should log in with a teacher account and a student account and exchange audio and video feed.
When connected with a student, you should see this screen.
Conclusion
Real-time applications are amazing. They’re bringing the world together, and now when the world is growing remote, demand for such applications is high.
Working with WebRTC and WebSockets for real-time communication can be cumbersome, but Vonage API provides easy helper methods for a wide range of use-cases. This article demonstrated how to set up a video feed using Laravel. You can clone the repository here.
