WebRTC more than one peer connection

Question

I searched almost everywhere and can't seem to find any resource on this scenario for some reason. Any help would greatly be appreciated.

The problem is this:

I have 4 users. Lets say: A,B,C and D. I want to match them according to url. For example, if A and B connects to &room=1 and C and D connects to &room=2 I want to establish the connection between A and B pairs and C and D pairs.

Currently my code only establishes connection between A and B, and if one of the C or D users initiates the call, the connection between A and B gets disconnected and C cannot find D.

---

In order to solve this problem I tried to create an object like this:

{ room: 1, peer: RTCPeerConnection }

and store it in an array and get the peer connection according to room id and establish the connection based on RTCPeerConnection that is stored according to roomId. But that didn't work.

How would I go around fixing this without establishing a socket server that handles this communication?

---

I currently establish connections this way if it helps:

navigator.mediaDevices
    .getUserMedia({
        audio: true,
        video: true
    })
    .then(function (stream) {
        localStream = stream;
        localVideo.srcObject = localStream;
        try {
            conn = new RTCPeerConnection(servers);
        } catch (err) {
            console.log("Can't establish connection");
            return;
        }
        localStream.getTracks().forEach(function (track) {
            conn.addTrack(track, localStream);
        });
        conn.onaddstream = function (event) {
            setTimeout(() => {
                callButton.click();
            }, 2000);
            remoteVideo.srcObject = event.stream;
        };
        conn.onicecandidate = function (event) {
            if (event.candidate) {
                chat.server.iceCandidate(
                    JSON.stringify({ candidate: event.candidate })
                );
            }
        };
    })
    .catch(function (err) {
        console.log("Error", err);
    });

---

And this is my failed solution:

    var connections = JSON.parse(localStorage.getItem("connections")) || [];
    var connection;
    if (connections) {
        connection = connections.find(function (conn) {
            return conn.id = roomId;
        })
    }
    if (!connection) {
        conn = new RTCPeerConnection(servers);
        var data = {
            id: roomId,
            peer: conn
        }
        localStorage.removeItem("connections");
        localStorage.setItem("connections", JSON.stringify(connections));
    } else {
        conn = JSON.parse(connection.peer);
        conn.__proto__ = new RTCPeerConnection();
    }

This fails because of course you can't store proto of an object in localStorage (RTCPeerConnection). When I stringify/parse it peer attribute comes as an empty object. If I try a global variable, instead of localStorage, it always comes empty. I'd very appreciate any tip about this issue.

Answer 1

It's like your messing up with the localStorage variable, for testing purpose and avoid the signaling server implementation, I advice to use the serverless-webrtc or an updated by jameshfisher

With this you can create the rooms (separate the clients) and show you a sdp message to copy and paste to the other client (without localStorage) to make the peer connection. This will be better to test between browsers firefox <-> chrome, safari, etc.