1

我正在做一个群聊项目，它工作正常，但有时流媒体没有发生。并且任何没有网络摄像头或在浏览器中阻止网络摄像头的用户都无法加入。

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

查看下面的屏幕截图以获取更多说明。

在此处输入图像描述

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

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

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

4

0 回答 0