在会议组织者首次加入之前,我将如何让用户等待加入

Question

我正在实施一个视频会议室,用户可以在其中创建视频会议并邀请其他用户.

现在我想确保在会议组织者打开房间之前用户无法加入会议.

我有以下代码,但它无法正常工作.会议组织者可以打开房间,但当用户点击"加入会议"时,它不会加入.

// 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

看来你这里有3个问题。

1）首先，我认为你不能只使用一个 RTCMultiConnection 对象来打开和加入一个房间。您必须创建 2 个单独的对象。但是，您的代码不应该在打开和加入房间的同一窗口中运行。因此，如果您在一个窗口中运行一次以打开房间，然后在另一个窗口中运行一次以加入它，这不是问题。

在这种情况下，你有一个更重要的问题。当您在一个窗口中打开房间时，变量 room_status 设置为 1。但在另一个窗口中，room_status 仍然等于 0，因此您不会在 $('#join-room').click 函数中调用 if() 内的代码。

这不是什么大问题，现在，让我们删除 if 语句以确保您的代码被执行（并阅读我的第 3 点以了解您最初的目标）。

2）我查看了https://github.com/muaz-khan/RTCMultiConnection上给出的简单示例： https: //jsfiddle.net/c46de0L8/，看来您应该使用 join 而不是 connect 。最重要的是，您应该使用频道 ID 和房间 ID 才能连接 2 个用户。

所以我稍微改变了你的代码，它似乎工作得很好：

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");
});

其余代码保持不变。

我在 JSFiddle 中放置了一个粗略的工作代码：https ://jsfiddle.net/sebdoncker/fjtkvnjq/2/

3）现在你还有问题：如何确保房间已经打开才能加入。我认为您可以使用 ROOM ID 来实现此目的。当一个用户打开一个新房间时，您应该生成一个房间 ID。现在，您必须将此 ROOM ID 发送给您的加入用户（通过服务器通信或其他方式，具体取决于您的应用程序架构）。由于加入者用户没有 ROOM ID，因此您可以禁用加入按钮。

这只是一个线索，这取决于您的整体应用程序架构。