How can I add multiple chat rooms in RTCMultiConnection V3.0 in a single page

I want to create multiple chat rooms on a single page, where user can video/audio/text chat for different rooms. I have done for a single, but I don't have much idea about connection with on a single page.

I am using RTCMultiConnection V3.0 for single chat room.

I want to achieve mentioned in the below image.

Can anyone help me to achieve this?

Either use multiple RTCMultiConnection instances:

var room1 = new RTCMultiConnection();
var room2 = new RTCMultiConnection();
var room3 = new RTCMultiConnection();

room1.join('room1-unique-ID');
room2.join('room2-unique-ID');
room3.join('room3-unique-ID');

---

Or use this trick:

connection.session.broadcast = true;
connection.open('each-user-unique-id'); // each user should call this

Now each user can join any room:

connection.join('first-room');
connection.join('second-room');
connection.join('third-room');

Remember, we set {broadcast:true} above; which means that join method will merely allows you join only the room owner/moderator/initiator.

You need to ask room moderator to give you list of all his participants.

var alreadyGivedParticipants = {};

connection.onPeerStateChanged = function(state) {
    if (state.iceConnectionState !== 'connected') return; // ignore
    if (alreadyGivedParticipants[state.userid]) return;
    alreadyGivedParticipants[state.userid] = true; // to make sure we don't duplicate

    connection.socket.emit(connection.socketCustonEvent, {
        participants: connection.getAllParticipants(),
        onlyForThisUser: state.userid
    });
};

connection.connectSocket(function() {
    connection.socket.on(connection.socketCustonEvent, function(message) {
        if (message.onlyForThisUser !== connection.userid) return; // ignore

        message.participants.forEach(function(pid) {
            connection.join(pid); // join all room participants
        });
    });
});

You can even give each new user's information to existing participants.

var alreadyGivedParticipants = {};

connection.onPeerStateChanged = function(state) {
    if (state.iceConnectionState !== 'connected') return; // ignore
    if (alreadyGivedParticipants[state.userid]) return;
    alreadyGivedParticipants[state.userid] = true; // to make sure we don't duplicate  

    connection.socket.emit(connection.socketCustonEvent, {
        participants: connection.getAllParticipants(),
        onlyForThisUser: state.userid
    });

    // below block shares new user with existing participants
    connection.getAllParticipants().forEach(function(existingUser) {
        connection.socket.emit(connection.socketCustonEvent, {
            participants: [state.userid],
            onlyForThisUser: existingUser
        });
    });
};

connection.connectSocket(function() {
    connection.socket.on(connection.socketCustonEvent, function(message) {
        if (message.onlyForThisUser !== connection.userid) return; // ignore

        message.participants.forEach(function(pid) {
            connection.join(pid); // join all room participants
        });
    });
});

You can use getPublicModerators method to get list of all public rooms. A live demo.