Build a Scalable Video Chat App with Agora in Flask
Tags: flask, python, agora, videocall
Published: 2021-04-13 14:56:46



#Introduction
Flask is a micro web framework written in Python. It is mostly used to build API endpoints but can be extended to build fully-fledged applications. We are going to build a one-on-one video call application with Flask on the hassle-free Real-Time Engagement platform; Agora.

Previously, I built a video chat app with WebRTC and Laravel and wrote about it here: {% link https://dev.to/mupati/adding-video-chat-to-your-laravel-app-5ak7 %}
WebRTC is only one of the ways that people can implement video chat features. Companies like <a href="https://www.agora.io/en/" target="_blank">Agora</a> also provide a fully packaged video chat SDK to provide a high-quality Real-Time Engagement video chat experience. As someone who has WebRTC development experience, I can tell you there are some limitations with WebRTC, such as:

<ol>
<li><strong>Quality of experience:</strong> Since WebRTC is transmitted over the Internet, which is a public domain, the quality of experience is hard to guarantee.</li>
<li><strong>Scalability:</strong> Scalability is fairly limited on group video calls due to the peer-to-peer nature of WebRTC.</li>
</ol>

After my experience with the Agora platform, I concluded it was not worthwhile for a company to invest a lot of development hours into building a video call feature as part of their main application with WebRTC. Agora is here to save you in that light. Through this article, I'm going to show you how to achieve that in your application you built with Flask.


# Why Agora Is the Preferred Solution
After building a video chat app with Agora, I want to highlight some of the advantages:

<ol>
<li>There's one SDK for everything - voice, video, live streaming, screen sharing, and so on.</li>
</li>

<li>I didn't have to set up a turn server with <a href="https://github.com/coturn/coturn" target="_blank">coturn</a> on Amazon EC2 as I did in the other implementation to relay traffic between peers on different networks.</li>

<li>You get <a href="https://www.agora.io/en/pricing/" target="_blank">10,000 minutes every month </a>free, and this gives you the flexibility to develop your solution prototype for free.</li>

<li>You don't have the challenge of managing the underlying infrastructure supporting the video call functionality.</li>

<li>Intuitive API documentation is available.</li>

</ol>

# Prerequisites
<ul>
<li>Python 3.8.5</li>
<li>A Flask application with authentication. Download the following starter project to get started: <a href="https://github.com/Mupati/agora-flask-starter" target="_blank">Flask Auth Starter Project</a>. We are going to build on top of this starter project.</li>

<li>A fair understanding of the factory and blueprint pattern in Flask. The starter project has been structured that way.</li>

<li>A free pusher account on <a href="https://pusher.com/" target="_blank">pusher.com</a></li>

<li>An understanding of <a href="https://pusher.com/docs/channels/using_channels/presence-channels" target="_blank">pusher presence channels</a> and the <a href="https://github.com/pusher/pusher-http-python#installation" target="_blank">python server library</a>.</li>

<li>Agora Developer Account: (See <a href="https://www.agora.io/en/blog/how-to-get-started-with-agora" target="_blank">How to get started with Agora</a>)</li>
</ul>


# Project Setup

1. Create and activate a python3 virtual environment for this project.

2. Open your terminal or command prompt and navigate to the starter project you downloaded as part of the prerequisites. The folder is named <strong>agora-flask-starter</strong>.

3. Follow the instructions in the README.md file in the agora-flask starter to set up the application.

4. Install additional dependencies from your terminal or command prompt.

    ```

        pip install pusher

    ```
5. Download the AgoraDynamicKey Python3 code from the Agora repository: <a href="https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey/python3" target="_blank">AgoraDynamicKey</a>

Keep the downloaded folder in a location outside the project folder. Some of these files from the folder will be copied into our project when we're configuring the back end.


# Configuring the Backend
We are going to create the views for the agora blueprint and import the classes needed to generate the Agora token to establish a call. We will set up Pusher at the server-side as well.

### 1. Add the downloaded AgoraDynamicKey generator files

* Open your terminal or command prompt and navigate into the agora blueprint directory.
    ```

        cd app/agora

    ```

* Create a subdirectory named <strong>agora_key</strong>.
    ```

        mkdir agora_key

    ```

* Copy <strong>AccessToken.py</strong> and <strong>RtcTokenBuilder.py</strong> from the <strong>src</strong> directory in the downloaded files and add them to the <strong>agora_key</strong> directory.


### 2. Create the agora view
Add the following code to the <strong>views.py</strong> file in the <strong>app/agora</strong> directory.
{% gist https://gist.github.com/Mupati/27221a76bcd33d9989934313e96db418 %}

#### Breakdown of Methods in agora/views.py
<ul>
<li><strong>index:</strong> To view the video call page. Only authenticated users can view the page but non-authenticated users are redirected to the login page. We return a list of all the registered users.</li>

<li><strong>pusher_auth:</strong> It serves as the endpoint for authenticating the logged-in user as they join the pusher's presence channel. The ID and name of the user are returned after successful authentication with the pusher.</li>

<li><strong>generate_agora_token:</strong> To generate the Agora dynamic token. The token is used to authenticate app users when they join the agora channel to establish a call.</li>

<li><strong>call_user:</strong> This triggers a <strong>make-agora-call</strong> event on the <strong>presence-online-channel</strong> to which all logged-in users are subscribed.</li>
</ul>

The data broadcast with the <strong>make-agora-call</strong> event across the <strong>presence-online-channel</strong> contains the following:
<ul>
<li><strong>userToCall:</strong> This is the ID of the user who is supposed to receive a call from a caller.</li>
<li><strong>channelName:</strong> 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 client-side. It is the room the caller has already joined, waiting for the callee to also join to establish a call connection.</li>
<li><strong>from:</strong> The ID of the caller.</li>
</ul>

From the <strong>make-agora-call</strong> event, a user can determine whether they are being called if the userToCall value matches their ID. We show an incoming call notification with a button to accept the call. They know who the caller is by the value of from.


# 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. Update the HTML file for the index view.
The HTML file will contain the links to the CDN for Agora SDK, Vue.js, Pusher, Bootstrap for styling, and our custom CSS and Javascript.

The index.html file will also inherit a base template which is used to render the view.
<ul>
<li>Open the <strong>index.html</strong> file in the agora subdirectory in the templates directory. The location is <strong>app/templates/agora</strong><br/>
Currently, it only displays a welcome message for an authenticated user</li>

<li>Update the index.html file with the following code.
{% gist https://gist.github.com/Mupati/7e9ddc307f2ec4437c0e2ca67550a9f3 %}
</li>
</ul>

We use Flask's templating language to help with code reuse. As indicated early on, we inherit a base template named base.html. It has the following blocks:
<ul>
<li><strong>head_scripts:</strong> This is the block where we place the link to the Agora SDK and our index.css for styling the video call page.</li>
<li><strong>content:</strong> The content block contains the user interface for rendering the video stream with its control buttons.</li>
<li><strong>bottom_scripts:</strong> This block contains the links to the Pusher SDK, an instance of the Pusher Class with the presence channel authentication, Axios for sending AJAX requests, and Vuejs for writing the client-side logic for our video chat application.</li>
</ul>

### 2. Create the static files
We have index.css for custom styling and index.js; our script for handling the call logic.

Run the following command to create the files from your terminal or command prompt.

```bash
    cd static/agora/
    touch index.css index.js
```

Add the following to <strong>index.js</strong>

{% gist https://gist.github.com/Mupati/d82046799825bd4f37c69a578fbec9ba %}


Add the following to <strong>index.css</strong>

#### Breakdown of the Agora Call Page
On the video call page, i.e <strong>app/templates/agora/index.html</strong>, we display buttons that bear the name of each registered user and whether they are online or offline at the moment.

To place a call, we click the button of a user with online status. An online user indicates one who is available to receive a call. For our demo, we see a list of users. The user named <strong>Bar</strong> is indicated as being online. The caller named <strong>Foo</strong> can call <strong>Bar</strong> by clicking the button.

![Users with Call Buttons](https://cdn-images-1.medium.com/max/800/0*P2jNnqj_GriDK5eL)

<strong>Bar</strong> gets an incoming call notification with Accept and Decline buttons and the name of the caller.

![Incoming Call Notification](https://cdn-images-1.medium.com/max/800/0*uLdMRCpbatnuyyt7)


From the call notification image above, we see that the caller's name is <strong>Foo</strong>. <strong>Bar</strong> can then accept the call for a connection to be established.

The following diagram explains the call logic in terms of the code:

![Call Logic](https://cdn-images-1.medium.com/max/2560/1*WWf_DkRuKz0-cFywT7uXBg.jpeg)

### 3. Update flaskenv variables with Pusher and Agora keys
The <strong>.flaskenv</strong> file is located at the root of your project folder. Add the credentials you got from Agora and Pusher. Add the secret key too if you didn't add it during the project setup.

{% gist https://gist.github.com/Mupati/0c42768dd83d6b7d184dd5c459b21349 %}

# Testing
1. Start the Flask development server from your terminal.
    ```bash

        flask run

    ```

2. Open two different browsers or two instances of the same browser, with one instance in incognito mode, and navigate to the registration page.<br/>
<a href="http://127.0.0.1:5000/register
 target="_blank">http://127.0.0.1:5000/register</a>

3. In one of the browsers create about 4 users by registering 4 times.

4. Login with the account details you just created on each of the browsers from the login page: <a href="http://127.0.0.1:5000/login
 target="_blank">http://127.0.0.1:5000/login</a>

5. In each of the browsers you opened, the other users registered on the application are displayed.

6. In one browser, you can call the user who is logged in and on the other browser by clicking the button that bears their name.

7. The other user is prompted to click the Accept button to fully establish the call.


# Video Demonstration of the Video Call
To confirm that your demo is functioning properly, see my demo video as an example of how the finished project should look and function:
{% youtube aEPQlOMCTnQ %}


# Conclusion
You have now implemented the video call feature in your Flask application! It's not that hard, right?

To include video calling functionality in your web app, you don't have to build it from scratch.

Agora provides a lot of great features out of the box. It also helps businesses save development hours when implementing video chat into existing projects. The only thing a developer has to do is build a compelling front end - Agora handles the video chat back end.

Online Demo link: [https://watermark-remover.herokuapp.com/auth/login?next=%2Fagora](https://watermark-remover.herokuapp.com/auth/login?next=%2Fagora)

Completed Project Repository (it is located on the branch named completed in the starter kit):
https://github.com/Mupati/agora-flask-starter/tree/completed

Make sure the demo link or production version is served on HTTPS.


Test accounts:<br/>
foo@example.com: DY6m7feJtbnx3ud<br/>
bar@example.com: Me3tm5reQpWcn3Q<br/>

# Other Resources
<ul>
<li><a href="https://docs.agora.io/en/Video/API%20Reference/web/interfaces/agorartc.client.html#agorartc.client.html%23on" target="_blank">Available events on the Agora Client</a></li>
<li>For more information about Agora.io applications, take a look at the: <a href="https://docs.agora.io/en/Video/run_demo_video_call_web?platform=Web" target="_blank">Agora Quickstart Guides</a></li>
<li>Take a look at the complete documentation for the functions discussed above and many more: <a href="https://docs.agora.io/en/Video/API%20Reference/web/index.html" target="_blank">Agora Web SDK API</a></li>
</ul>

I also invite you to <a href="https://app.slack.com/client/T265K8ZT9/C263V5MFV/thread/CPQP4GMJ9-1585749906.115600" target="_blank">join the Agora.io Developer Slack community</a>.