Chrome环境下WebRTC ontrack事件不触发问题排查求助

问题概述 #

Chrome环境下使用WebRTC时，ontrack事件始终无法触发，已确认RTC连接正常建立，但找不到事件不触发的原因。同时createVideoStream函数未处理ontrack事件，需明确该事件的正确处理方式及遗漏步骤。

核心问题分析 #

从提供的代码来看，ontrack不触发主要源于以下几点：

1. Offer接收参数限制：发起方创建Offer时设置了offerToReceiveVideo: false，这会告知对方当前端不需要接收视频轨道，即使对方发送视频，本地也不会触发ontrack事件；若需接收视频，该参数必须设为true。
2. 事件绑定时机过晚：videoState回调中才给RTCPeerConnection添加track事件监听，此时远程轨道可能已完成传输，导致错过事件触发。WebRTC的ontrack事件在轨道到达时立即触发，必须在创建RTCPeerConnection后、设置远程描述前完成绑定。
3. 未在PeerConnection初始化阶段绑定事件：当前仅在外部回调中绑定track事件，未在createRTC函数初始化时绑定，极易出现事件丢失。

正确处理方式与修复步骤 #

1. 修正Offer的接收配置 #

根据业务需求调整createOffer参数，确保需要接收的轨道类型设为true：

peerConnection.createOffer({
    offerToReceiveVideo: true, // 需接收视频则设为true
    offerToReceiveAudio: true,
})

2. 提前绑定ontrack事件 #

在createRTC函数中，创建RTCPeerConnection后立即绑定ontrack事件，确保不会错过轨道接收：

const createRTC = (user: string) => {
    const peerConnection = new RTCPeerConnection()
    
    // 初始化时绑定ontrack事件，确保捕获所有轨道
    peerConnection.ontrack = (event) => {
        const [remoteStream] = event.streams
        console.log('收到远程轨道', remoteStream)
        // 此处可添加流处理逻辑，比如通知外部组件绑定视频元素
    }
    
    createVideoStream(peerConnection)
    peerConnection.onicecandidate = (e) => 
        socket.emit('SEND_ICE_CANDIDATE', {
            candidate: e.candidate,
            user,
        })
    return peerConnection
}

3. 优化videoState回调（动态绑定视频元素场景） #

若需外部动态绑定视频元素，需同时检查已存在的轨道，避免错过已到达的流：

const videoState = useCallback((instance: HTMLVideoElement | null, peerConn: RTCPeerConnection) => {
    if (!instance || !peerConn) return
    
    // 先检查已有轨道，处理已到达的流
    peerConn.getReceivers().forEach(receiver => {
        if (receiver.track?.stream) {
            instance.srcObject = receiver.track.stream
        }
    })
    
    // 绑定track事件，处理后续到达的轨道
    peerConn.addEventListener('track', (event) => {
        const [remoteStream] = event.streams
        instance.srcObject = remoteStream
    });
}, [])

4. 完整修改后的useWEBRTC函数示例 #

export const useWEBRTC = (socket: Socket) => {
    const dataChannels = useRef<{ [key:string]: RTCDataChannel }>({})
    const peerConnections = useRef<{ [key:string]: RTCPeerConnection }>({})

    const createVideoStream = useCallback( async (peerConnection: RTCPeerConnection) => {
        const contains = await navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const cams = devices.filter(device => device.kind === "videoinput")
            const constraints = { video: {}, audio: true }
            if(cams.length > 0)
                constraints.video = {
                    width: {
                        min: 320,
                        ideal: 1280,
                        max: 1920,
                    },
                    height: {
                        min: 240,
                        ideal: 720,
                        max: 1080,
                    },
                }
            else constraints.video = false
            return constraints
        })
        await navigator.mediaDevices
            .getUserMedia(contains)
                .then((stream) => {
                    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream))
                }).catch((error) => {
                    switch(error.message) {
                        case 'Requested device not found':
                            console.log('Requested device not found')
                    }
                })
    }, [])

    const createRTC = (user: string) => {
        const peerConnection = new RTCPeerConnection()
        
        // 核心修改：初始化时绑定ontrack事件
        peerConnection.ontrack = (event) => {
            const [remoteStream] = event.streams
            console.log('Received remote track', remoteStream)
        }
        
        createVideoStream(peerConnection)
        peerConnection.onicecandidate = (e) => 
            socket.emit('SEND_ICE_CANDIDATE', {
                candidate: e.candidate,
                user,
            })
        return peerConnection
    }

    useEffect(() => {
        socket.emit('JOIN_ROOM', { room_id: 8 })
        socket.on('RECEIVE_CLIENT_JOINED', ({ user_server_id }: RECEIVE_CLIENT_JOINED) => {
            const peerConnection = createRTC(user_server_id)
            const dataChannel = peerConnection.createDataChannel(user_server_id)
            dataChannel.onmessage = e => console.log(e.data)
            dataChannel.onopen = () => dataChannel.send('Connection open!')
            dataChannels.current[user_server_id] = dataChannel
            peerConnection.createOffer({
                offerToReceiveVideo: true, // 修改为true，允许接收视频
                offerToReceiveAudio: true,
            })
            .then((offer) => {
                peerConnection.setLocalDescription(offer)
                socket.emit('SEND_OFFER', {
                    offer,
                    user: user_server_id,
                })
            })
            peerConnections.current[user_server_id] = peerConnection
        })
        socket.on('RECEIVE_OFFER', ({ offer, user }: RECEIVE_OFFER) => {
            const peerConnection = createRTC(user)
            peerConnection.setRemoteDescription(offer)
            peerConnection.createAnswer()
            .then((answer) => {
                peerConnection.setLocalDescription(answer)
                socket.emit('SEND_ANSWER', {
                    answer,
                    user
                })
            })
            peerConnection.ondatachannel = (e) => {
                const dataChannel = e.channel
                dataChannel.onopen = () => dataChannel.send('Connection open!')
                dataChannel.onmessage = e => console.log(e.data)
                dataChannels.current[user] = dataChannel
            }
            peerConnections.current[user] = peerConnection
        })
        socket.on('RECEIVE_ANSWER', ({ answer, user }: RECEIVE_ANSWER) => peerConnections.current[user].setRemoteDescription(answer))
        socket.on('RECEIVE_ICE_CANDIDATE', ({ candidate, user }: RECEIVE_ICE_CANDIDATE) => peerConnections.current[user].addIceCandidate(candidate))
        socket.on('RECEIVE_DISONECT', ({ user }: RECEIVE_DISONECT) => {
            if(peerConnections.current[user]) peerConnections.current[user].close()
            delete dataChannels.current[user]
            delete peerConnections.current[user]
        })

        return () => {
            socket.close()
            socket.off('RECEIVE_CLIENT_JOINED')
            socket.off('RECEIVE_OFFER')
            socket.off('RECEIVE_ANSWER')
            socket.off('RECEIVE_ICE_CANDIDATE')
            socket.off('RECEIVE_DISONECT')
        }
    },[socket])

    const videoState = useCallback((instance: HTMLVideoElement | null, peerConn: RTCPeerConnection) => {
        if (!instance || !peerConn) return
        
        // 检查已有轨道，避免错过已到达的流
        peerConn.getReceivers().forEach(receiver => {
            if (receiver.track?.stream) {
                instance.srcObject = receiver.track.stream
            }
        })
        
        // 绑定track事件处理后续轨道
        peerConn.addEventListener('track', (event) => {
            const [remoteStream] = event.streams
            instance.srcObject = remoteStream
        });
    }, [])

    return { peerConnections, videoState }
}

关键注意事项 #

• ontrack事件必须在设置远程描述前绑定，否则会错过轨道初始化的触发时机。
• Offer的offerToReceiveVideo/Audio参数决定本地是否愿意接收对应类型的轨道，需根据业务需求正确设置。
• 动态绑定视频元素时，必须同时检查已存在的轨道接收器（getReceivers()），避免错过已经到达的流。

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