DEV Community: Wassaf Shahzasd

🕵🏽 Investigating python Callables : functions, methods and more...

Wassaf Shahzasd — Wed, 17 Apr 2024 04:41:50 +0000

The way python handles functions is a bit unique and the star ⭐ of the show is the "self" argument passed to every function defined within a class, But have you ever wondered, how self is passed to the function? We never pass it during the call.
How does it get there ? and how can we replicate it ?

Well in this article, we will try to understand and replicate it. Lets put the fun in functions🎉.

🧩 Types of functions in Python.

First, we need to understand is the type of functions. When using mypy, we annotate them as a Callable but that is not a python standard type. To figure this out lets get coding.
(I know that world is spelt wrong, GET OFF MY BACK)

Running the above code gives us the following results.

<class 'function'>

A bit anticlimactic, so a function is of type function, what about methods (foreshadowing...) or functions within a classes ?

Running the following code gives us a bit more idea. The Output shows us

<bound method Foo.foo of <__main__.Foo object at 0x0000020B6B999D00>>
<class 'method'>
<function Foo.foo at 0x0000020B6B9B91C0>

We learn 3 things from this.

The type of a function belonging to a class is method
The reference of a method is a bound method tied down to the instance.
Interestingly, a method on a class level is treated as a function.

🤨 How does self get there ?

When an instance of a class is created, the functions defined within them get replaced by descriptors, with the instance passed to them as the first argument.
You can learn more about descriptors from here. The TLDR is, that they are getter and setters for instance attributes.
Try the following code and see what happens 🤩

Checking the type of the function, reveals a funny thing. The type of the bar function has been changed to a method and is bound to the int object 10.

🤔 What if you don't want a bound method ?

In the above example, We create a bound method to tie some arguments to the function. What if you don't want to do that ? What if you don't want to use the get method ? How can we recreate the above functionality, Well we use decorators !!!!!.

If you don't want to use the decorator synthetic sugar, you can use this.

😎 One more thing.

Like we saw above methods are defined as a function type at the class level. Which means the first argument is unbound and we can do this.

🎆 Conclusion

Thanks for following this article and hope you learned something new about functions in python. Word of caution, don't use this in production level code, unless you want to annoy your co-workers, if so, go crazy.
Just cause we could to these shenanigans, doesn't mean we should.

Building Real-Time Communication: Harnessing WebRTC with FastAPI Part 3- Wrapping Every thing up

Wassaf Shahzasd — Sun, 07 Apr 2024 15:10:54 +0000

Welcome to the last part of my series where we will be building a google-meet-clone using FastAPI and WebRTC. If you haven't read the previous article you can read it here.

🚀 On the previous tutorial.

Create a new file on the same level as main.py called manager.py. Here we will create a WebSocket manager which will allow users to join, leave and message in a chat room.

from fastapi.websockets import WebSocket

class SignalManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    @property
    def is_empty(self):
        return len(self.active_connections) == 0

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def send_personal_message(self, message: str, websocket: WebSocket):
        await websocket.send_json(message)

    async def broadcast(self, message: dict, websocket: WebSocket):
        for connection in self.active_connections:
            if connection != websocket:
                await connection.send_json(message)

The Signal Manager class is responsible for accepting web socket connections and sending mass and/or personal messages. The active_connections property is responsible for managing all active connections. The broadcast function sends a message to all other web sockets in the room except the web socket which sent the message.

👨‍💼 Chat Room Manager Class

Now create a RoomManager class since there can be multiple rooms with multiple connections. just below the SignalManager class.

class MeetingManager:
    def __init__(self) -> None:
        self.rooms: dict[str, SignalManager] = {} 

    async def join(self, id: str, websocket: WebSocket):
        if id in self.rooms:
            await self.rooms[id].connect(websocket)
        else:
            self.rooms[id] = SignalManager()
            await self.rooms[id].connect(websocket)
        await self.rooms[id].broadcast({"type":"USER_JOIN"}, websocket)

    def leave(self, id: str, websocket: WebSocket):
        self.rooms[id].disconnect(websocket)
        if self.rooms[id].is_empty:
            del self.rooms[id]

This class is responsible to managing the chat rooms and for allowing users to join and disconnect a room.

One point of interest is scalable WebSocket . To implement scalable WebSocket's, We need to implement WebSocket with redis.

🔌 Plugging every thing together.

Open up main.py and import the Meeting Manager class from manager.py and create a manager instance.

from manager import MeetingManager

manager = MeetingManager()

Lets create a function which allows a WebSocket to join a room.

@app.websocket("/ws/{client_id}")
async def connet_websocket(websocket: WebSocket, client_id: str):
    await meeting_manager.join(client_id, websocket)
    try:
        while True:
            data = await websocket.receive_json()
            await meeting_manager.rooms[client_id].broadcast(data, websocket)
    except WebSocketDisconnect:
        meeting_manager.leave(client_id, websocket)

The above code accepts a WebSocket connection and then awaits until the WebSocket disconnects. Until then it waits to receive messages and broadcasts it to the whole room.
Like I explained previously, we will be using WebSocket's as a signaling server to send both SDP offers and ICE candidates.

Lets add the URL for the video page.

@app.get("/room/{roomName}")
def get_video(request: Request, roomName:str):
    return templates.TemplateResponse(request=request, name="index.html")

This is the URL which the home.js redirects to after your enter the meeting room name. Don't worry about the index.html, we will create that later.

📍Business on the front, Party on the back

Now lets create the index.html in the templates folder. This html file is responsible for rendering the video tags.

{% extends "main.html" %}
{% block script  %}
    <link rel='stylesheet' type='text/css' media='screen' href="{{ url_for('static', path='/index.css') }}">
    <script src="{{ url_for('static', path='/index.js') }}""></script>
{% endblock %}
{% block content %}
    <div id="videos">
        <video class="video-player" id="user-1" autoplay></video>
        <video class="video-player" id="user-2" autoplay></video>
    </div>
{% endblock %}

Right now we are only working with the assumption that only two users will join the call, later on you can add on to this and create it for multiple video calls.

🏆 Moving on to the Hard stuff.

Initializing some variables which will be used later on.

let localStream;
let remoteStream;
let peerConnection;
let socket;
let makingOffer = false;
let polite = false

Now lets create a connect function which connects the WebSocket to the chat room. So that we can use our FastAPI Server as the singling server.

let connect = async (callback) => {
  let roomName = window.location.pathname.split("/")[1];
  socket = new WebSocket(`ws://localhost:8000/ws/${roomName}"`);
  socket.onopen = async (_) =>  {
    await callback()
  };

  socket.onmessage = handleMessage;
};

This function takes in a callback which is called once the socket is successfully connected. We also assign a helper function called handleMessage to the onmessage event. Don't worry we will define the function later on.

Now lets create a init function which is first run when the index.js file is loaded.

let init = async () => {
  localStream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false,

.
  });
  document.getElementById("user-1").srcObject = localStream;
  await connect(createStreams);
}

This function does two things.

It gets the Users Media object and assigns it to the video tag, defined in the index.html.
It also calls the connect function, with the createStreams function as a callback.

📼 Creating Video Streams

Lets create a function which creates peerConnection object and remote media streams.The full function looks like this


let createStreams = async () => {
  peerConnection = new RTCPeerConnection(config);
  remoteStream = new MediaStream();

  localStream.getTracks().forEach((track) => {
    peerConnection.addTrack(track, localStream);
  });

  // This function is called each time a peer connects.
  peerConnection.ontrack = (event) => {
    console.log("adding track");
    event.streams[0]
      .getTracks()
      .forEach((track) => remoteStream.addTrack(track));
  };

  peerConnection.onicecandidate = async (event) => {
    if (event.candidate) {
      socket.send(
        JSON.stringify({ type: "candidate", candidate: event.candidate })
      );
    }
  };
  peerConnection.onnegotiationneeded = async () => {
    try {
      makingOffer = true;
      await peerConnection.setLocalDescription();
      // signaler.send({ description: pc.localDescription });
      socket.send(
        JSON.stringify({
          type: "OFFER",
          message: peerConnection.localDescription,
        })
      );
    } catch (err) {
      console.error(err);
    } finally {
      makingOffer = false;
    }
  };

  document.getElementById("user-2").srcObject = remoteStream;
};

This function first creates a peerConnection Object from the provided config and initializes a empty remoteStream.
The Config object specifies various options but the one we care about are the stun servers which allow us to establish a peer-to-peer connection.
Our Config Object looks something like this

const config = {
  iceServers: [
    {
      urls: [
        "stun:stun1.l.google.com:19302",
        "stun:stun1.l.google.com:19302",
        "stun:stun2.l.google.com:19302",
      ],
    },
  ],
};

The next thing we do is get out local tracks and add them to the peerConnection so its available so that they are available to other.(The full function is available just above, this part is just to make it easier to follow)

  localStream.getTracks().forEach((track) => {
    peerConnection.addTrack(track, localStream);
  });

I the next part of the function, we attach a callback to the ontrack event which is triggered every time a remote peer connects.

peerConnection.ontrack = (event) => {
    console.log("adding track");
    event.streams[0]
      .getTracks()
      .forEach((track) => remoteStream.addTrack(track));
  };

Now we create an event handler to trickle ice candidates to the connected peers and we use the socket object to send the ice candidates.

  peerConnection.onicecandidate = async (event) => {
    if (event.candidate) {
      socket.send(
        JSON.stringify({ type: "candidate", candidate: event.candidate })
      );
    }
  };

The next part peerConnection.onnegotiationneeded will be discussed next, lets just skip it for now. Finally we attack the remote stream the user-2 video object.

🤝 The Perfect Negotiation Pattern

For exchanging the SDP offers and answers we will be implementing the perfect negotiation pattern as described in the following article. The main gist of the article is that we will have two types of peers, A polite peer which in case of Offer collision ignores its offers and accepts the other senders offer. An impolite peer which in case keeps sending offers and in case of collision rudely ignores the others offer.
The way you decide who is polite and not depends on you, In this tutorial if a user is already present in the call he will always be polite otherwise impolite.

Lets go back to the createStreams functions and take a look on the onnegotiationneeded event handler. This event in triggered in the following casses

When your call addTrack or removeTrack
When track track constraints are changed
When you call setLocalDescription()
When you explicitly requests renegotiation by calling createOffer() or createAnswer()

 peerConnection.onnegotiationneeded = async () => {
    try {
      makingOffer = true;
      await peerConnection.setLocalDescription();
      socket.send(
        JSON.stringify({
          type: "OFFER",
          message: peerConnection.localDescription,
        })
      );
    } catch (err) {
      console.error(err);
    } finally {
      makingOffer = false;
    }
  };

First we set our local description and then send a message of type OFFER to other peers.

🪁 Handling the messages

If we go back to the connect function, we see that we attach a event handler called handleMessage to the onmessage event. This function will handle ice candidates and the SDP Answer and Offer we receive from out custom singling server.

let handleMessage = async ({ data }) => {
  data = JSON.parse(data);
  if (data["type"] == "USER_JOIN") {
    polite = true
    createStreams();
  }
  if (data["type"] === "OFFER") {
    console.log("received offer")
    handlePerfectNegotiation(data)
  }
  if (data["type"] === "ANSWER") {
    console.log("received answer")
    handlePerfectNegotiation(data)
  }
  if(data["type"] === "candidate") {
    handleIceCandidate(data)
  }
};

This is a relatively simple function, In case of a new user joining we set the polite to true which is false by default.
In case of the ANSWER or OFFER, we call the handlePerfectNegotiation function, This is the last piece of the puzzle. So lets go over it

let handlePerfectNegotiation = async ({ message }) => {
  try {
    if (message) {
      const offerCollision =
        message.type === "offer" &&
        (makingOffer || peerConnection.signalingState !== "stable");

      ignoreOffer = !polite && offerCollision;
      if (ignoreOffer) {
        return;
      }

      await peerConnection.setRemoteDescription(message);
      if (message.type === "offer") {
        await peerConnection.setLocalDescription();
        socket.send(JSON.stringify({
          type: "ANSWER",
          message: peerConnection.localDescription,
        }));
      }
    }
  } catch (err) {
    console.error(err);
  }
};

This function, when called from the side of the impolite peer ignores collision and keeps sending SDP offers and incase of the polite peer it acknowledges the collision, retracts its offers and accepts the offer of the impolite peer.
Now all we need is to handle the ice candidates and we are good to go.

let handleIceCandidate = async ({ candidate }) => {
  if (peerConnection && peerConnection.remoteDescription) {
    peerConnection.addIceCandidate(candidate);
  }
};

Tying everything together with

document.addEventListener(
  "DOMContentLoaded",
  async function () {
    await init();
  },
  false
);

and Boom we are done 🥳🥳🥳🥳🥳🥳🥳

Thank you for following along and please share your feedback if you have any.

Follow Best Practices

In this article we have not followed some best practices, In a production environment. The websocket URL would not be hardcoded and on disconnect we would remove the streams.

Useful Links.

MDN WebRTC article
Code Repository can be found here
Live demo here

Building Real-Time Communication: Harnessing WebRTC with FastAPI Part 2

Wassaf Shahzasd — Sun, 10 Mar 2024 16:35:48 +0000

Welcome to the second part of my series where we will be building a google-meet-clone using FastAPI and WebRTC. If you haven't read the previous article you can read it here.

Part 1 of the series.

In this tutorial we will be going through the 💻 meat of things.

🔮 On the last episode of DBZ

When we last left, we created a basic hello world app in FastAPI and provided an introductory overview of how WebRTC functions.
Our Folder structure looked something like this.
📁
|-- 🗋 main.py
|-- 🗋 requirements.py
|-- 📁 .env

💼 Business at the Front.

So first lets get started with front-end. As described in the previous tutorial we will be using Jinja templates. So create a templates folder in your root directory. The folder structure then becomes the following.

📁
|-- 🗋 main.py
|-- 🗋 requirements.py
|-- 📁 templates
|-- 📁 .env

You can name this folder whatever you want but for consistency, I will be using templates. You can get an overview of jinja template from here. Don't worry about python dependencies, we handled that in the previous tutorial.

Now create a main.html file in templates directory. This will be our entry point and any JS or CSS dependencies or stylesheets will be loaded here.

Paste to following code in main.html, We will go over the important part line by line.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>PeerChat</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    {% block script %} {% endblock %}
    <link href=" https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    {% block content %} {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

The first important part is the {% block script %} {% endblock %}.
This is a Jinja inheritance, which allows us to use this main.html as a parent for other templates. Since each child template will need to load its on scripts tags, we use this feature to dynamically load those. You can find more info here.
Other then that we are just loading some bootstrap dependencies and creating a block for out content using jinja inheritance mentioned above.

🚀 Creating the Home Page

with the following code.

{% extends "main.html" %}
{% block script  %}
    <link rel='stylesheet' type='text/css' media='screen' href="{{ url_for('static', path='/home.css') }}">
    <script src="{{ url_for('static', path='/home.js') }}""></script>
{% endblock %}
{% block content %}
    <div class="main-container">
            <div>
                <h1>Video Call for Every One</h1>
                <div class="input-row">
                    <div>
                        <button  type="button" class="btn btn-success" onclick="createRoom()">Create room</button>
                    </div>
                    <div class="input-container">
                        <input id="createRoom" class="form-control" placeholder="Enter room name">
                    </div>
                </div>
            </div>
    </div>
{% endblock %}

Don't worry about the CSS or the JS, we will create that later.
Know open up the 🐍 main.py and use the following code to load and return templates
Add the following imports

from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware
from fastapi.templating import Jinja2Templates

We will be using Jinja2Templates here to load the templates.
The following code loads the templates object from the templates directory.

templates = Jinja2Templates(directory="templates")

Add the following code to enable CORS Middleware. Since we will be making requests moving forward.

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Now lets update the read_root function and rename it as well while we are at it.

@app.get("/")
def home(request: Request):
    return templates.TemplateResponse(request=request, name="home.html")

Run the fast application and you should get the following page.

🧩 Adding Static files

As you can see we need to add a bit of styling and some onclick functionality to our home page. For that we will be using the static files.
Static files are files which are downloaded by the client on first load. Unlike templates which are sent from the server on a per request basis, static files are automatically downloading by the user client (browser) when the first connection is made.

To load static files from the server, add the following code to main.py

from fastapi import staticfiles

app.mount("/static", staticfiles.StaticFiles(directory="static"), name="static")

In the above code we are telling out application to mount the static directory under /static url.

Create a home.css, home.js file under the static directory and add the following code.
for home.css

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-container * {
    padding-top: 5%;
    padding-bottom: 5%;
}

.input-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.input-container {
    width: 70%;
}

In home.js, add the following

let createRoom = () => {
    const roomName = document.getElementById("createRoom").value
    if (roomName){
        window.location.href = `/room/${roomName}`
    }
    else {
        alert("Room Name cannot be empty")
    }
}

The above is just a JS funtion which tells the browser to redirect to /room/roomName where roomName is the value given in the input field.
Update home.html with the following code

{% extends "main.html" %}
{% block script  %}
    <link rel='stylesheet' type='text/css' media='screen' href="{{ url_for('static', path='/home.css') }}">
    <script src="{{ url_for('static', path='/home.js') }}""></script>
{% endblock %}
{% block content %}
    <div class="main-container">
            <div>
                <h1>Video Call for Every One</h1>
                <div class="input-row">
                    <div>
                        <button  type="button" class="btn btn-success" onclick="createRoom()">Create room</button>
                    </div>
                    <div class="input-container">
                        <input id="createRoom" class="form-control" placeholder="Enter room name">
                    </div>
                </div>
            </div>
    </div>
{% endblock %}

Here we update the onclick button property with out function and the script block with the valid static file paths. Now reload the fast app and you Would get Something like this.

🧨 Setting up the Video Page.

Create a new template called video.html and paste the following code.

{% extends "main.html" %}
{% block script  %}
    <link rel='stylesheet' type='text/css' media='screen' href="{{ url_for('static', path='/index.css') }}">
    <script src="{{ url_for('static', path='/index.js') }}""></script>
{% endblock %}
{% block content %}
    <div id="videos">
        <video class="video-player" id="user-1" autoplay></video>
        <video class="video-player" id="user-2" autoplay></video>
    </div>
{% endblock %}

Here 2 video players for people who will join the video call.
Now for the css. Create a video.css in the static folder and paste the following code.

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-container * {
    padding-top: 5%;
    padding-bottom: 5%;
}

.input-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.input-container {
    width: 70%;
}

I think this is good enough for now. In the next tutorial we will wrapping up the RTCpeerConnection logic and the singling server logic.

Building Real-Time Communication: Harnessing WebRTC with FastAPI Part 1

Wassaf Shahzasd — Sun, 03 Mar 2024 00:25:55 +0000

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

Live Demo

https://google-meet-clone-pipw.onrender.com/lobby

One click login using MetaMask with django-restframework and Web3

Wassaf Shahzasd — Tue, 19 Apr 2022 00:51:42 +0000

So, for a while now, I was looking for a way to create login and signup flow using blockchain and during my search I came across this fine article which details the authentication flow with great detail.
https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial``

But one problem its not in python 😤. Also you had to a lot tedious things to get it work. Only if some one would write a reusable application with all the boring bits already done.
Well lucky for you dear reader. I am that guy and I wrote this nifty little DRF app to solve this problem.

PYPI link : https://pypi.org/project/django-metamask-auth/

To get started go to the github repo and follow the getting started guide.

Hopefully this helps some you and I will be working on an npm package for the front side, keep a look out for that as well and don't forget to star the repo.