How would I make user wait to join until meeting organizer joins first

Question

I am implementing a video conference room in which a user can create a video conference and invite other users.

Now I want to make sure that the user can't join the conference until the meeting organizer opens the room.

I have the following code but it is not working. The meeting organizer can open the room but when users click on "join conference" it doesn't join.

// https://github.com/muaz-khan/RTCMultiConnection

var rmc = new RTCMultiConnection();

rmc.userid = "<?php echo $user->fname . ' ' . $user->lname . ' (' . $user->username . ')' ; ?>";
rmc.session = {
    video: true,
    audio: true,
    data: true
};

var room_status = 0; //room closed
$('#open-room').click(function () {
    // http://www.rtcmulticonnection.org/docs/open/
    room_status = 1; //room opened
    rmc.open();
    rmc.streams.mute({video : true});
    document.getElementById("on-off-video").style.color= 'red';
});

$('#join-room').click(function () {
    if(room_status == 1) {
        // http://www.rtcmulticonnection.org/docs/connect/
        rmc.connect();
        rmc.streams.mute({video: true});
        document.getElementById("on-off-video").style.color= 'red';
    }
    console.log("Waiting for meeting organizer");
});

// display a notification box
window.addEventListener('beforeunload', function () {
    return 'Do you want to leave?';
}, false);

// leave here
window.addEventListener('unload', function () {
    rmc.leave();
}, false);

rmc.onMediaCaptured = function () {
    $('#share-screen').removeAttr('disabled');
    $('#open-room').attr('disabled', 'disabled');
    $('#join-room').attr('disabled', 'disabled');
};

//chat
rmc.onopen = function (event) {
    //alert('Text chat has been opened between you and ' + event.userid);
    document.getElementById('input-text-chat').disabled = false;
    room_status = 1;
};

//end of chat
$('#disconnect').click(function () {
    room_status = 0; //room closed
    rmc.leave();
    setTimeout("location.href = '../';",2000);
});

//to know the stream type
rmc.onstream = function (e) {
    if (e.type == 'local') {
        // alert("the stream is local");
    }
    if (e.type == 'remote') {
        // alert("the stream is remote");
    }
    if (e.isVideo) {
        var uibox = document.createElement("div");
        uibox.appendChild(document.createTextNode(e.userid));
        uibox.className = "userid";
        uibox.id = "uibox-" + e.userid.replace(/ |\(|\)/g, '');
        document.getElementById('video-container').appendChild(e.mediaElement);
        document.getElementById('video-container').appendChild(uibox);
    }
    else if (e.isAudio) {
        document.getElementById('video-container').appendChild(e.mediaElement);
    }
    else if (e.isScreen) {
        $('#cotools-panel iframe').hide();
        $('#cotools-panel video').remove();
        document.getElementById('cotools-panel').appendChild(e.mediaElement);
    }

};

//removes the div containing the userid of the user who is leaving
rmc.onleave = function (e) {
    $('#' + "uibox-" + e.userid.replace(/ |\(|\)/g, '')).remove();
};

Answer 1

It seems you have 3 problems here.

1) First, I think you can't use only one RTCMultiConnection object to open and join a room. You have to create 2 separate objects. But, your code is not supposed to run in the same window for opening and joining the room. So It's not a problem if you run it once in a window to open the room and one in another window to join it.

In this case you have a more important problem. Your variable room_status is set to 1 when you open the room in one window. But in the other window, room_status is still equals to 0 so you don't call the code inside the if() in $('#join-room').click function.

It's not a big deal, for now, let's delete the if statement to be sure your code is executed (and read my point 3 for your original goal).

2) I look to the simple example given on https://github.com/muaz-khan/RTCMultiConnection : https://jsfiddle.net/c46de0L8/ and it seems you should use join and not connect. And above all, you should use a Channel ID and a Room Id to be able to connect 2 users.

So I change your code a little and it seems to work well :

var CHANNEL_ID = "MYCHANNEL-" + window.RMCDefaultChannel;
var ROOM_ID = "MYROOM";
var SESSION = {
    video: true,
    audio: true,
    data: true
};
var USERID = "<?php echo $user->fname . ' ' . $user->lname . ' (' . $user->username . ')' ; ?>";

var rmc = undefined;

var room_status = 0; //room closed
$('#open-room').click(function () {
    // http://www.rtcmulticonnection.org/docs/open/
    room_status = 1; //room opened
    rmc = new RTCMultiConnection(CHANNEL_ID);
    rmc.userid = USERID;
    rmc.session = SESSION;
    rmc.open({
        dontTransmit: true,
        sessionid: ROOM_ID
    });
    rmc.streams.mute({video : true});
    document.getElementById("on-off-video").style.color= 'red';
});

$('#join-room').click(function () {
    //if(room_status == 1) {
        // http://www.rtcmulticonnection.org/docs/connect/
        rmc = new RTCMultiConnection(CHANNEL_ID);
        rmc.join({
            sessionid: ROOM_ID,
            userid: USERID,
            session: SESSION
        });
        rmc.streams.mute({video: true});
        document.getElementById("on-off-video").style.color= 'red';
    //}
    console.log("Waiting for meeting organizer");
});

The rest of the code remains unchanged.

I put a rough working code in a JSFiddle: https://jsfiddle.net/sebdoncker/fjtkvnjq/2/

3) Now you still have the problem : How to be sure that the room is opened before to be able to join it. I think you can use the ROOM ID for this. When one user open a new room you should generate a ROOM ID. Now, you have to send this ROOM ID to your joiner user (by server communication or another way depending of your application architecture). And Since the joiner user doesn't have the ROOM ID, you can disable the join button.

It's just a lead, this depends of your overall application architecture.