How to implement the Web Video SDK on a Python + Django Framework? – Agora Support Center

Problem:
502 Bad Gateway error, missing remote user video streams, problems on publishing and or subscribing into the channel and other related issues when implementing the Web Video SDK into a Django Framework for the first time.
Causes:

An improper implementation of the Agora Web SDK within a Django framework can result in multiple technical issues, affecting real-time communication capabilities.

As Python maintains its position as one of the most widely used programming languages in 2024 and early 2025, more developers are expected to integrate Python and eventually choosing Django into their projects. Consequently, the likelihood of encountering these problems will increase, leading to a growing need for effective troubleshooting strategies.Here are some professional studies that rates the most commonly used languages

https://www.tiobe.com/tiobe-index/

https://spectrum.ieee.org/top-programming-languages-2024

https://pypl.github.io/PYPL.html

Solution:

It is our first option to inform the customer that there are supporting documents for implementations on the Django Framework such as this article published last 2021 which focuses on using the CDN to load the Web Video SDK: https://www.agora.io/en/blog/build-a-scalable-video-chat-app-with-agora-in-django/

But to simplify the process, this document can serve as another option if we choose to try and address the customer's problem that requires hands-on assistance on issue topics closer to the downloaded Web Video SDK contents in https://docs.agora.io/en/sdks?platform=web

Here are some basic steps that can help with the implementation:

Please inform the customer that the following steps are for serving static content into the public. This will expose all assets into the end-user's browser. These steps are intended for local tests only.

Pre-requisites:

VSCode
Python3 installation
Django installation
Agora Account ( appID )

Project Setup:

Download and extract the latest Web Video SDK
Create a new folder, open VS Code and then open its command terminal to start a Python environment:
Example:
```
Bash:

brew install python3
```
Or if already installed
```
Bash:

brew update

brew upgrade python3
```

Activate environment after installation.
Example:


Bash:

python3 -m venv agora

And for activation


Bash:

source agora/bin/activate

For Windows:


Bash:

agora\Scripts\activate

Install Django and create a new project :
Example:
Django installation:
```
(agora) admin ~ % pip install django
```
Creating a new project:
```
django-admin startproject agoraproject
```
Navigate to the newly created folder and then transfer the extracted Web Video SDK files. Please use this sample structure:

File Modifications

urls.py
views.py ( add a new .py file )

settings.py
Scroll down and add [BASE_DIR / 'templates'] to the 'DIRS' parameter of the Template section:

Scroll down again and add a new section STATICFILES_DIRS under STATIC_URL

index.html
Add {% load static %} at the beginning of your template file ( html ) to link all the required assets when running in a Django environment.

And lastly at the bottom your template file ( html ) please add all the assets similar to:

Running the project

While the Python environment is activated, please type the command:

python3 manage.py runserver

Open http://127.0.0.1:8000/ on a browser
Input AppID, token and ChannelName
Example Output:

Connection test:

Related to