Build a Scalable Video Chat App with Agora in Laravel

Introduction

Laravel is a powerful PHP framework that aims to make the web development process easier without sacrificing application functionality. This is especially true when you try to build a video chat app with Laravel.

  1. Scalability: Scalability is fairly limited on group video calls due to the peer-to-peer nature of WebRTC.

Why Agora Is the Preferred Solution

After building a video chat app with Agora, I want to highlight some of the advantages:

  1. I didn’t have to set up a turn server with coturn on Amazon EC2 as I did in the other implementation to relay traffic between peers on different networks.
  2. You get 10,000 minutes every month free, and this gives you the flexibility to develop your solution prototype for free.
  3. You don’t have the challenge of managing the underlying infrastructure supporting the video call functionality.
  4. Intuitive API documentation is available.

Prerequisites

Project Setup

  1. Open your terminal or console and navigate to your Laravel project directory.
  2. Install the necessary packages.
composer require pusher/pusher-php-server "~4.0"
npm install --save laravel-echo pusher-js

Configuring the Back end

We will set up the various controllers and classes with methods needed to generate the Agora token to establish a call. Laravel’s broadcasting system will also be activated.
We begin with the endpoints that will be accessed from the front end.

1. Add application routes

Add the following code to routes/web.php:

2. Activate Laravel’s broadcasting system

Uncomment BroadcastServiceProvider in config/app.php in your project folder.

Change//App\Providers\BroadcastServiceProvider::classto App\Providers\BroadcastServiceProvider::class

3. Create a presence channel in routes/channels.php

We get to know online users by looking at who has subscribed to this channel on the front end. We return their ID and name.

4. Create an event for making a call named MakeAgoraCall

This event will be used to make a call by broadcasting some data over the agora-online-channel.
Run the following command in your terminal/console:

php artisan make:event MakeAgoraCall

5. Add the downloaded AgoraDynamicKey generator files

  • Open your command line, and in your project’s app directory create a directory named Class along with a subdirectory named AgoraDynamicKey.
cd app
mkdir -p Class/AgoraDynamicKey
  • Open AccessToken.php and RtcTokenBuilder.php, and add the project’s namespace to make them accessible in a controller.

6. Create the AgoraVideoController.php

Next, create the AgoraVideoController using the command line.

php artisan make:controller AgoraVideoController
  • token: To generate the Agora dynamic token. The token generation code is taken from sample/RtcTokenBuilderSample.php, which can be found in the files downloaded during the project setup.
  • callUser: To call a particular user by broadcasting a MakeAgoraCall event across a Laravel presence channel that I’ve named agora-online-channel. All logged-in users subscribe and listen to events on this channel.
  • channelName: This is the call channel that the caller has already joined on the front end. This is a channel created with the Agora SDK on the front end. It is the room the caller has already joined, waiting for the callee to also join to establish a call connection.
  • from: The ID of the caller.

Configuring the Front End

We are going to create the user interface for making and receiving the video call with the ability to toggle the on and off states of the camera and the microphone.

1. Add a link to the Agora SDK

Add the following <script src=”https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.3.1.js"></script> to the head tag of resources/views/layouts/app.blade.php.

2. Instantiate Laravel Echo and Pusher

Instantiate Laravel Echo and Pusher in resources/js/bootstrap.js by uncommenting the following block of code:

3. Create an Agora chat component

On your terminal or command line, create a component called AgoraChat.vue with the following command:

touch resources/js/components/AgoraChat.vue

4. Register the AgoraChat.vue component

Add the following code to resources/js/app.js:

5. Create an Agora chat view

On your terminal or command line, create a view called agora-chat.blade.php with the following command:

touch resources/views/agora-chat.blade.php

6. Update env variables with Pusher and Agora keys

The .env file is located at the root of your project folder. Add the credentials you got from Agora and Pusher.

Testing

  1. Start the Laravel development server from your terminal.
php artisan serve
npm run dev

Conclusion

You have now implemented the video chat feature in Laravel! It’s not that hard, right?

Other Resources

Building Products and Services, and Sharing Knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store