基于WebRTC与SignalR的多用户视频聊天室故障排查求助

结合你的场景（双人通信正常，三人及以上时第三方看不到其他参与者流），核心问题基本集中在信令分发逻辑、PeerConnection实例管理或流绑定流程上，以下是针对性排查点和修复方案：

1. 检查SignalR Hub的房间消息分发逻辑 #

多人场景下，新用户加入时必须通知房间内所有已存在的用户，同时向新用户同步所有在线用户列表，而不是仅通知单个用户或只同步部分列表。

错误示例（常见问题）： #

public async Task JoinRoom(string roomId, string userId)
{
    await Groups.AddToGroupAsync(Context.ConnectionId, roomId);
    // 仅向当前用户发送在线列表，未通知其他用户有新成员加入
    var onlineUsers = await GetRoomUsers(roomId);
    await Clients.Client(Context.ConnectionId).SendAsync("OnlineUsers", onlineUsers);
}

正确实现： #

public async Task JoinRoom(string roomId, string userId)
{
    await Groups.AddToGroupAsync(Context.ConnectionId, roomId);
    // 获取房间内排除当前用户的所有成员
    var existingUsers = await GetRoomUsers(roomId).Where(u => u.Id != userId).ToList();
    
    // 通知每个现有用户：新用户已加入
    foreach (var user in existingUsers)
    {
        await Clients.Client(user.ConnectionId).SendAsync("UserJoined", userId);
    }
    
    // 向新用户同步所有现有成员
    await Clients.Client(Context.ConnectionId).SendAsync("ExistingUsers", existingUsers.Select(u => u.Id));
}

2. 确保为每个对端创建独立的PeerConnection实例 #

绝对不能复用单个RTCPeerConnection处理多个对端，否则会导致流混乱、协商失败。必须用键值对存储每个用户ID对应的PeerConnection。

前端正确实现： #

// 存储每个对端的PeerConnection，key为用户ID
const peerConnections = {};
const rtcConfig = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };

// 处理新用户加入：为该用户创建独立PeerConnection
async function handleUserJoined(userId) {
    // 避免重复创建
    if (peerConnections[userId]) return;

    const pc = new RTCPeerConnection(rtcConfig);
    peerConnections[userId] = pc;

    // 将本地流添加到当前PeerConnection
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

    // 监听远程流：收到后创建并绑定video元素
    pc.ontrack = (event) => {
        const videoContainer = document.getElementById("videos-container");
        if (!document.getElementById(`video-${userId}`)) {
            const video = document.createElement("video");
            video.id = `video-${userId}`;
            video.srcObject = event.streams[0];
            video.autoplay = true;
            video.muted = false;
            videoContainer.appendChild(video);
        }
    };

    // 监听ICE候选并发送给对端
    pc.onicecandidate = (event) => {
        if (event.candidate) {
            connection.invoke("SendIceCandidate", roomId, userId, event.candidate);
        }
    };

    // 创建Offer并发送给对端
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    await connection.invoke("SendOffer", roomId, userId, offer);
}

3. 信令转发必须精准到单个用户 #

发送Offer、Answer、ICE候选时，必须直接转发给目标用户，而不是广播到整个房间（否则会收到自己的信令，导致逻辑混乱）。

SignalR Hub正确实现： #

// 转发Offer：仅发送给目标用户
public async Task SendOffer(string roomId, string targetUserId, RTCSessionDescription offer)
{
    await Clients.User(targetUserId).SendAsync("ReceiveOffer", Context.UserIdentifier, offer);
}

// 转发Answer：仅发送给发起Offer的用户
public async Task SendAnswer(string roomId, string targetUserId, RTCSessionDescription answer)
{
    await Clients.User(targetUserId).SendAsync("ReceiveAnswer", Context.UserIdentifier, answer);
}

// 转发ICE候选：仅发送给目标用户
public async Task SendIceCandidate(string roomId, string targetUserId, RTCIceCandidate candidate)
{
    await Clients.User(targetUserId).SendAsync("ReceiveIceCandidate", Context.UserIdentifier, candidate);
}

4. 检查ICE候选的完整传递 #

ICE候选是建立P2P连接的关键，必须确保所有候选都被发送并添加到对应的PeerConnection。

前端接收ICE候选的正确逻辑： #

async function handleIceCandidate(senderId, candidate) {
    // 确保对应的PeerConnection存在
    if (!peerConnections[senderId]) return;
    try {
        await peerConnections[senderId].addIceCandidate(candidate);
    } catch (err) {
        console.error("添加ICE候选失败:", err);
    }
}

5. 补充错误监听便于排查 #

为PeerConnection添加状态监听，快速定位连接失败原因：

pc.onconnectionstatechange = () => {
    console.log(`与${userId}的连接状态:`, pc.connectionState);
    if (pc.connectionState === "failed") {
        console.error(`与${userId}的连接失败，尝试重新协商`);
        // 可在此处添加重连逻辑
    }
};

内容的提问来源于stack exchange，提问作者navid abbasnejad