WebRTC对等连接远程轨道处理与UI更新问题排查

我在开发一款WebRTC应用，需要处理远程轨道并更新每位参与者的UI，目前在远程轨道处理、参与者UI更新及视频流正常显示方面遇到若干问题。

代码概述（对等连接创建） #

function addParticipantToUI(id, name) {
    //console.log(id);
    if (id === currentUserId) {
        console.warn(`Skipping UI update for current user ID: ${id}`);
        return;
    }
    //console.log(`Adding participant UI for ID: ${id}, Name: ${name}`);

    let participantDiv = document.getElementById(`participant-${id}`);
    if (!participantDiv) {
        participantDiv = document.createElement('div');
        participantDiv.className = 'video-container';
        participantDiv.id = `participant-${id}`;

        let nameLabel = document.createElement('div');
        nameLabel.className = 'name-label';
        nameLabel.innerText = name;
        participantDiv.appendChild(nameLabel);

        let videoElement = document.createElement('video');
        videoElement.id = `video-${id}`;
        videoElement.autoplay = true;
        participantDiv.appendChild(videoElement);

        document.getElementById('videos').appendChild(participantDiv);
        //console.log(`Participant UI added for ID: ${id}`);
    } else {
        console.warn(`Participant UI already exists for ID: ${id}`);
    }
}


async function initiateOffer(to) {
    //console.log(to);
    let peer = createPeerConnection(to);

    try {
        const offer = await peer.createOffer();
        await peer.setLocalDescription(offer);
        socket.send(JSON.stringify({ type: 'offer', offer: peer.localDescription, to: to }));
    } catch (error) {
        console.error('Error initiating offer:', error);
    }
}

async function handleOffer(offer, from) {
    //console.log(`Received offer from: ${from}`);
    let peer = createPeerConnection(from);

    try {
        await peer.setRemoteDescription(new RTCSessionDescription(offer));
        const answer = await peer.createAnswer();
        await peer.setLocalDescription(answer);
        socket.send(JSON.stringify({ type: 'answer', answer: peer.localDescription, to: from }));
    } catch (error) {
        console.error('Error handling offer:', error);
    }
}

async function handleAnswer(answer, from) {
    //console.log(`Received answer from: ${from}`);
    if (peers[from]) {
        try {
            //console.log(`Current signaling state: ${peers[from].signalingState}`);
            if (peers[from].signalingState === "have-local-offer") {
                await peers[from].setRemoteDescription(new RTCSessionDescription(answer));
                //console.log(`Set remote description successfully for peer ${from}`);
            } else if (peers[from].signalingState === "stable") {
                console.info(`Peer connection ${from} is already stable. Skipping setting remote description.`);
            } else {
                console.warn(`Skipping setting remote description for peer ${from} in state ${peers[from].signalingState}`);
            }
        } catch (error) {
            console.error('Error setting remote description:', error);
        }
    } else {
        console.error(`Peer connection not found for ID: ${from}`);
    }
}

async function handleCandidate(candidate, from) {
    //console.log(`Received ICE candidate from: ${from}`);
    if (peers[from]) {
        try {
            await peers[from].addIceCandidate(new RTCIceCandidate(candidate));
            //console.log(`Added ICE candidate for peer ${from}`);
        } catch (error) {
            console.error('Error adding ICE candidate:', error);
        }
    } else {
        console.error(`Peer connection not found for ID: ${from}`);
    }
}



function createPeerConnection(peerId) {
    console.log(`Creating peer connection for ID: ${peerId}`);
    //console.log(peers);

    // Create a new RTCPeerConnection
    let peer = new RTCPeerConnection();
    let hasStreamSet = false; // Flag to ensure stream is set only once

    // Handle ICE candidates
    peer.onicecandidate = (event) => {
        if (event.candidate) {
            if (peers[peerId]) {
                //console.log(`Sending ICE candidate to ${peerId} from tab ${tabId}`);
                socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate, to: peerId }));
            } else {
                console.warn(`No peer connection found for ${peerId}, cannot send ICE candidate`);
            }
        }
    };

    // Handle remote tracks
    peer.ontrack = (event) => {
        if (peers[peerId]) {
            console.log(`Received remote track from ${peerId}`);

            event.streams.forEach(stream => {
                //console.log('Remote Stream ID:', stream.id);
                stream.getTracks().forEach(track => {
                    //console.log(`Remote Track ID: ${track.id}, kind: ${track.kind}`);
                });

                let participantDiv = document.getElementById(`participant-${peerId}`);
                let videoElement = document.getElementById(`video-${peerId}`);

                if (!participantDiv) {
                    console.log(`Participant div not found for ID: ${peerId}. Adding to UI.`);
                    addParticipantToUI(peerId, userName);
                    participantDiv = document.getElementById(`participant-${peerId}`);
                    videoElement = document.getElementById(`video-${peerId}`);
                }

                if (videoElement && !hasStreamSet) {
                    console.log(`Setting remote stream for ${peerId}`);
                    videoElement.srcObject = stream;
                    console.log('Video element:', videoElement);
                    console.log('Stream assigned to video element:', videoElement.srcObject);
                    hasStreamSet = true; // Prevent redundant setting of the stream
                } else {
                    console.warn(`Video element not found for ${peerId} or stream already set`);
                }
            });
        } else {
            console.warn(`Ignoring remote track from unknown peer ID: ${peerId}`);
        }
    };

    // Add local tracks to peer connection
    localStream.getTracks().forEach(track => peer.addTrack(track, localStream));

    // Store the peer connection in the peers object
    peers[peerId] = peer;
    console.log(peers);
    return peer;
}

日志输出 #

Creating peer connection for ID: 1d317817-94d3-438b-95d4-ed7c0df3214f  // Remote user
Creating peer connection for ID: 05ee421f-3cfd-41cc-a997-29734c698624  // Current user
Received remote track from 05ee421f-3cfd-41cc-a997-29734c698624
Skipping UI update for current user ID: 05ee421f-3cfd-41cc-a997-29734c698624
Video element not found for 05ee421f-3cfd-41cc-a997-29734c698624 or stream already set // Intentionally not set because it's the current user
Received remote track from 05ee421f-3cfd-41cc-a997-29734c698624
Participant div not found for ID: 05ee421f-3cfd-41cc-a997-29734c698624. Adding to UI.
Skipping UI update for current user ID: 05ee421f-3cfd-41cc-a997-29734c698624
addParticipantToUI // Intentionally not set because it's the current user
Video element not found for 05ee421f-3cfd-41cc-a997-29734c698624 or stream already set        
Peer connection 05ee421f-3cfd-41cc-a997-29734c698624 is already stable. Skipping setting remote description. // Intentionally not set because it's already stable

问题详情 #

• 参与者UI已创建，但媒体内容未填充
• 远程用户媒体轨道无法正常显示：日志显示对等连接已创建，但视频元素未加载媒体

针对问题的解决方案 #

1. 确保参与者视频正确更新至UI的方法 #

• 跳过当前用户轨道处理：在ontrack事件开头直接判断peerId === currentUserId，符合条件则立即返回，避免无效的UI创建尝试和日志干扰。
• 传入正确的远程用户名称：调用addParticipantToUI时，要传入远程用户的名称，而非当前用户的userName，否则UI显示名称错误且逻辑混乱。
• 直接返回视频元素引用：修改addParticipantToUI函数，让它在创建或找到UI元素后直接返回对应的视频元素，避免后续重复查询DOM可能出现的找不到元素问题。

2. 视频未填充至目标元素的原因及解决方法 #

核心原因

• 当前用户的轨道被误触发处理，导致大量无效日志，掩盖了远程用户轨道的实际处理逻辑。
• hasStreamSet局部变量限制了流的重复设置，而WebRTC中音频、视频轨道可能分别触发ontrack事件，导致视频轨道被音频轨道的处理阻塞。
• DOM插入存在延迟，创建UI后立即查询元素可能失败。

解决步骤

1. 过滤当前用户轨道：

peer.ontrack = (event) => {
    if (peerId === currentUserId) return; // 直接跳过当前用户的轨道处理
    if (peers[peerId]) {
        // 后续远程轨道处理逻辑
    }
};

2. 移除流设置限制：
   删除hasStreamSet变量，直接设置视频元素的srcObject，WebRTC会自动处理流的更新：

if (videoElement) {
    console.log(`Setting remote stream for ${peerId}`);
    videoElement.srcObject = stream;
} else {
    console.warn(`Video element not found for ${peerId}`);
}

3. 优化UI创建逻辑：
   修改addParticipantToUI返回视频元素：

function addParticipantToUI(id, name) {
    if (id === currentUserId) {
        console.warn(`Skipping UI update for current user ID: ${id}`);
        return null;
    }
    let participantDiv = document.getElementById(`participant-${id}`);
    let videoElement;
    if (!participantDiv) {
        participantDiv = document.createElement('div');
        participantDiv.className = 'video-container';
        participantDiv.id = `participant-${id}`;

        let nameLabel = document.createElement('div');
        nameLabel.className = 'name-label';
        nameLabel.innerText = name;
        participantDiv.appendChild(nameLabel);

        videoElement = document.createElement('video');
        videoElement.id = `video-${id}`;
        videoElement.autoplay = true;
        videoElement.playsInline = true; // 兼容移动端
        participantDiv.appendChild(videoElement);

        document.getElementById('videos').appendChild(participantDiv);
    } else {
        console.warn(`Participant UI already exists for ID: ${id}`);
        videoElement = document.getElementById(`video-${id}`);
    }
    return videoElement;
}

在ontrack中直接使用返回的引用：

let videoElement = addParticipantToUI(peerId, remoteUserName); // 传入远程用户名称
if (videoElement) {
    videoElement.srcObject = stream;
}

3. 更可靠的对等连接状态处理方式 #

• 监听连接状态变化：添加connectionstatechange事件监听，实时处理连接断开、失败等情况，及时清理UI和对等连接：

peer.onconnectionstatechange = () => {
    switch (peer.connectionState) {
        case "connected":
            console.log(`Peer ${peerId} connected successfully`);
            break;
        case "disconnected":
        case "failed":
            console.log(`Peer ${peerId} disconnected or failed, cleaning up`);
            const participantDiv = document.getElementById(`participant-${peerId}`);
            if (participantDiv) participantDiv.remove();
            delete peers[peerId];
            break;
        case "closed":
            console.log(`Peer ${peerId} connection closed`);
            break;
    }
};

• 优化远程描述设置逻辑：在handleAnswer中，仅当连接关闭时才跳过设置远程描述，避免因状态判断延迟导致的失败：

async function handleAnswer(answer, from) {
    if (peers[from]) {
        try {
            if (peers[from].signalingState !== "closed") {
                await peers[from].setRemoteDescription(new RTCSessionDescription(answer));
            } else {
                console.warn(`Peer connection ${from} is closed, cannot set remote description`);
            }
        } catch (error) {
            console.error('Error setting remote description:', error);
        }
    } else {
        console.error(`Peer connection not found for ID: ${from}`);
    }
}

• 避免重复创建对等连接：在createPeerConnection开头检查是否已存在对应连接，存在则直接返回：

function createPeerConnection(peerId) {
    if (peers[peerId]) {
        console.log(`Peer connection for ${peerId} already exists, returning existing one`);
        return peers[peerId];
    }
    // 后续创建逻辑
}

内容的提问来源于stack exchange，提问作者Crazy Programmer