Question

我正在开发一个群组聊天项目，它工作正常，但有时流媒体不会发生。任何没有在浏览器中屏蔽过网络摄像头或网络摄像头的用户都无法加入。

我开始加入房间，所以当任何用户加入房间时，流媒体会自动启动，但我不想这样做。我正在创建加入房间的用户列表，每个用户在列表中的名称旁边都有相机图标。通过单击该相机图标，希望为特定用户流式传输。因此，如果我已经开始流式传输，那么所有加入房间的用户都可以看到我的摄像头。如果他们点击他名字旁边的相机图标开始流媒体，那么其他用户应该能够查看包括我在内的他的相机。如果再次单击相机图标以禁用相机，则所有用户将无法查看其相机。

查看以下屏幕截图以获取更多解释。

默认情况下，当前用户的相机图标将可见。所有其他用户的相机图标都将被隐藏。 Cam将在流媒体开始时显示。

我尝试使用下面的代码，但只有我的cam开始流式传输无法在对等端查看cam。

myConnection.addStream({
    audio: true,
    video: true
});

在当前系统中，如果用户在浏览器中没有网络摄像头或阻止的摄像头，则用户无法加入。

我创建了一个脚本，即使用户没有网络摄像头，用户也可以加入房间。如果用户有网络摄像头，它将开始流式传输，同伴用户将能够看到当前的用户流式传输。

$(document).on("click", ".show-hide-user-cam", function () {
    var username = $(this).data("list-username");
    $(this).toggleClass("user-active");
    var room_id = $(this).data("room-id");

    var myConnection = getConnection(allConnections, room_id);

    var unique_identifier = $(this).data("list-unique_identifier");
    unique_identifier = unique_identifier.split("_");
    if ($("#chat-tab-" + room_id + " .show-hide-user-cam.user-active").length) {
        $("#chat-tab-" + room_id + " .activity-message").removeClass("height-409").addClass("height-259");
        $("#chat-tab-" + room_id + " .video-carousel").removeClass("hide");
    } else {
        $("#chat-tab-" + room_id + " .activity-message").removeClass("height-259").addClass("height-409");
        $("#chat-tab-" + room_id + " .video-carousel").addClass("hide");
    }
    $("#chat-tab-" + room_id + " .usercam_" + username).not("#my-webcam-container-" + room_id + " .usercam_" + username).toggleClass("hide");
    $("#my-webcam-container-" + room_id + " .usercam_" + username).toggleClass("hide");
    var streamId = $("#chat-tab-" + room_id + " .usercam_" + username).attr("id");

    if (CommonFunctions.getLocalStorage("is_room_streamed_" + room_id) == 0) {
        myConnection.addStream({
            audio: true,
            video: true
        });
        CommonFunctions.setLocalStorage("is_room_streamed_" + room_id, 1);
    } else {
        if ($(this).hasClass("user-active")) {
            myConnection.attachStreams.forEach(function (stream) {
                if (stream.id == streamId) {
                    stream.unmute('audio');
                }
            });
        } else {
            myConnection.attachStreams.forEach(function (stream) {
                if (stream.id == streamId) {
                    stream.mute('audio');
                }
            });
        }
    }
});

我在GitHub中提出了更多信息。

https://github.com/muaz-khan/WebRTC-Experiment/issues/578

如何在RTCMulticonnection v3

0 个答案: