Video calling example #4399

frankvp11 · 2025-02-28T01:22:51Z

frankvp11
Feb 28, 2025

Question

Hello all!
I've been working with NiceGUI for quite some time now and I've been wanting to do a project that relates to this for quite some time aswell.
Basically, I'm looking to have a way that you can do something similar to Microsoft Teams or Zoom. For now, I just want to get something related to webcams working, as I imagine that something like sharing a screen would follow nicely.
The part that I've been struggling with in this project is actually making it so that all the users see eachother video feeds. I am able to make it so that you can go to a route and view your own webcam feed, then if you access it via your phone you can see your phone webcam feed, but I can't get it to display eachother's feeds.
I've also looked around on FastAPI to see if there were any examples, however in both these examples:

https://github.com/priyanshu88064/video-calling-app
https://github.com/matacoder/p2p-video-calling-app
I was unable to get it running / working. I've also seen the following nicegui discussions about this (wherein I've conversed also):
Best way to add WebRTC stream to Nicegui app #3147
Push notifications to connected clients #4071
Streamlit seems to have something implemented for this already:
https://github.com/whitphx/streamlit-webrtc

However, I have not made much progress from them. I am looking to the community for help in facing this task.
I've set up this code which is barely an MRE:

from fastapi import WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
from nicegui import ui, app
# HTML page that uses WebRTC to capture and display video streams.
html = """
<!DOCTYPE html>
<html>
<head>
    <title>Simple Video Call</title>
    <style>
        video { width: 45%; margin: 2%; border: 1px solid black; }
        body { display: flex; flex-direction: column; align-items: center; }
        #videos { display: flex; justify-content: center; width: 100%; }
    </style>
</head>
<body>
    <h2>Simple Video Call</h2>
    <div id="videos">
        <video id="localVideo" autoplay playsinline muted></video>
        <video id="remoteVideo" autoplay playsinline></video>
    </div>
    <script>
        let localStream;
        let peerConnection;
        const configuration = {
            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
        };

        const wsProtocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
        const ws = new WebSocket(wsProtocol + location.host + "/signaling");

        ws.onmessage = async (event) => {
            const data = JSON.parse(event.data);
            console.log("Received:", data);

            if (data.type === "offer") {
                await setupPeerConnection();
                await peerConnection.setRemoteDescription(data.offer);
                const answer = await peerConnection.createAnswer();
                await peerConnection.setLocalDescription(answer);
                ws.send(JSON.stringify({ type: "answer", answer: answer }));
            } else if (data.type === "answer") {
                await peerConnection.setRemoteDescription(data.answer);
            } else if (data.type === "candidate") {
                try {
                    await peerConnection.addIceCandidate(data.candidate);
                } catch (e) {
                    console.error('Error adding received ICE candidate', e);
                }
            }
        };

        // Start by capturing the local media.
        async function start() {
            try {
                localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                document.getElementById('localVideo').srcObject = localStream;
                if (!peerConnection) await setupPeerConnection();
            } catch (err) {
                console.error('Error accessing media devices.', err);
            }
        }

        // Initialize the RTCPeerConnection and add the local stream tracks.
        async function setupPeerConnection() {
            peerConnection = new RTCPeerConnection(configuration);

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

            // When an ICE candidate is found, send it to the other peer.
            peerConnection.onicecandidate = event => {
                if (event.candidate) {
                    ws.send(JSON.stringify({ type: "candidate", candidate: event.candidate }));
                }
            };

            // When a remote track is received, display it.
            peerConnection.ontrack = event => {
                document.getElementById('remoteVideo').srcObject = event.streams[0];
            };

            return peerConnection;
        }

        // When the WebSocket is open, create an offer.
        ws.onopen = async () => {
            await start();
            const offer = await peerConnection.createOffer();
            await peerConnection.setLocalDescription(offer);
            ws.send(JSON.stringify({ type: "offer", offer: offer }));
        };
    </script>
</body>
</html>
"""

@ui.page("/")
async def get():
    return HTMLResponse(html)

# Simple connection manager to handle two WebSocket clients.
class ConnectionManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)
        print("Client connected. Total clients:", len(self.active_connections))

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)
        print("Client disconnected. Total clients:", len(self.active_connections))

    async def broadcast(self, message: str, sender: WebSocket):
        for connection in self.active_connections:
            if connection != sender:
                await connection.send_text(message)

manager = ConnectionManager()

# Use a custom endpoint '/signaling' instead of '/ws'
@app.websocket("/signaling")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            await manager.broadcast(data, sender=websocket)
    except WebSocketDisconnect:
        manager.disconnect(websocket)

ui.run(on_air=True, host="0.0.0.0", port=8000)

This code is able to ask the user for their webcam and show it to them when running on localhost, but unable to do so on air. When it's on air, it's unable to connect to the websocket for some reason :(

I would greatly appreciate any help with this endeavour.
Thanks a ton

falkoschindler · 2025-03-03T10:49:21Z

falkoschindler
Mar 3, 2025
Maintainer

Hi @frankvp11,

NiceGUI On Air doesn't support websocket connections (at the moment).
While video calls would be an interesting feature, we would need to consider bandwidth limitations in order to keep our servers alive.

1 reply

frankvp11 Mar 3, 2025
Author

I just used On Air to bypass the getUserMedia problem that I faced with native (when I try to access via another device it wouldn't be able to request camera permissions). Besides that, I don't plan to run it on NiceGUI's servers.
It is definitely worthwhile considering though 👍

frankvp11 · 2025-03-13T14:03:18Z

frankvp11
Mar 13, 2025
Author

I'm curious on if anyone has any ideas on this? The problem has been sitting stale for some time now. I haven't been able to make much progress with it myself :(

0 replies

git2212 · 2025-08-13T13:43:17Z

git2212
Aug 13, 2025

This thread is a bit old but I am having similar streaming situ/requirements but with sound...
From what I can tell so far, the client->server streaming is not well supported so a separate wss connection seems to be required for this with possibly additional JS on the front-end.

While shoehorning this into existing NiceGUI setups may not be the path of least resistance... this problem only has to be solved once... I'll take a look at the implementation of Button or Toggle and see if the bind is implemented such that delays can be minimal, if not... a custom control is likely necessary, within or outside NiceGUI.

Both for video/sound you don't want to send the data to the server only to have it streamed back to the client...

If the Devs have any suggestions how to tackle this it would be greatly appreciated

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Video calling example #4399

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Video calling example #4399

Uh oh!

Uh oh!

frankvp11 Feb 28, 2025

Question

Replies: 3 comments · 1 reply

Uh oh!

falkoschindler Mar 3, 2025 Maintainer

Uh oh!

frankvp11 Mar 3, 2025 Author

Uh oh!

frankvp11 Mar 13, 2025 Author

Uh oh!

git2212 Aug 13, 2025

frankvp11
Feb 28, 2025

Replies: 3 comments 1 reply

falkoschindler
Mar 3, 2025
Maintainer

frankvp11 Mar 3, 2025
Author

frankvp11
Mar 13, 2025
Author

git2212
Aug 13, 2025