Welcome to my series of diving into the world of real time communication with Fast API and Vanilla Javascript (React will be introduced later...Maybe).
In this tutorial we will be trying to make a real time video chat web application. In this tutorial we will try to accomplish the following goals.
Goals
- Covering the theory (Mostly)
- Initializing the project
Technologies Used
- For the Backend we will be using FastAPI.
- For the frontend side we will keep it simple and use vanilla JS and Jinja2 templates.
What is WEBRTC
WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user install plug-ins or any other third-party software. (Taken directly form MDN dont @ me)
Keyword here being peer-to-peer. Media streams and text can be sent from one connection to the other without the middle server (After initial connection). At this point you might be Wondering why not use Websockets ? I mean you already know WebSocket's and you know that you can create Realtime communication with WebSocket's too.
Why WebRTC and not WebSocket.
The main difference between them is the middle man\server.
In WebSockets, you connect to a server, You don't connect directly with a client\endpoint.
- You send a web socket request to the backend server and the server keeps that request alive.
- When another user opens a WebSocket connection with the backend server, The backend servers keeps the connection alive and adds both to a room (depending on the implementation).
- Now when you send a message to the a user, It first goes the server, the server finds the valid Websockets and then forwards the message to the valid connection.
This process does take some milliseconds which is fine for textual data but it can be an issue incase of voice and video streams.
I case of WebRTC However data is directly send from one client to the other without the middle man saving us those precious few millisecond.
How does WebRTC work
This article is getting too long so lets just get the basics out to the way. Like explained before WebRTC works by establishing peer to peer connection. Now because of NATs, private networks direct connections cannot be established directly.
- First we need to generate ICE candidates using STUN servers.
- The you need to send the peer connection offer and the ICE candidates to the callee.
- The other user then accepts the offer and sends his set of ice candidates to the caller.
STUN servers are just servers which use the STUN protocol to establish a UPD connection between two users. In this tutorial we will be using free stun servers provided by google but you can set your up too.
ICE candidates are basically offers describing how to connect two endpoints. They are generated using the STUN servers and we will see how the rtc generates them going forward.
That's all for the theory.
Setting Up the project
We will be using python3+ for this tutorial,
Create folder and name it what ever you like. I will be going with google meet clone.
First lets create a virtualenv. Go to your newly created folder and open up the terminal by right clicking and selecting open in terminal. Run the following command
Before running the above command make sure
- You can access python 3+ by writing python in the terminal.
- You have venv installed.
Create a requirements.in file in the folder and paste the following dependencies
Then run the following command to install the dependencies
Now create a main.py and the root of your directory and paste the following command
Now your file directory should look something like this
google-meet-clone (what ever you named your project)
|---- .env
|---- main.py
|---- requirements.in
Run the following command in the terminal
uvicorn main:app --reload
Visit localhost:8000 and you should get a Hello world in JSON
Conclusion
Although this tutorial was more theory than could but we successfully covered some basic contexts and have setup a FastAPI project.
In the next tutorial we will get to the fun stuff
References
- https://developer.liveswitch.io/liveswitch-server/guides/what-are-stun-turn-and-ice.html
- https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
- https://medium.com/@iftimiealexandru/from-zero-to-hero-with-webrtc-in-javascript-and-python-in-small-snippets-of-code-part-1-1c4154d6ed9d
Top comments (0)