javascript - เหตุการณ์ ontrack ไม่ทำงาน webRTC - Chrome

เหตุการณ์ ontrack ในฟังก์ชัน callback ที่ฉันเรียกที่ด้านล่างสุดไม่ทำงานสำหรับฉัน ฉันได้ตรวจสอบการมีอยู่ของการเชื่อมต่อ และการเชื่อมต่อเกิดขึ้นอย่างรวดเร็ว แต่ฉันไม่สามารถเข้าใจได้ว่าทำไมเหตุการณ์ ontrack ถึงไม่เกิดขึ้น

ฉันจะจัดการเหตุการณ์นี้อย่างถูกต้องได้อย่างไร? ฉันกำลังพลาดอะไรอยู่หรือเปล่า ขอโทษนะ ฉันไม่ค่อยเข้าใจ webRTC เท่าไหร่

export const useWEBRTC = (socket: Socket) => {

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

    const [_, setConnection] = useState(peerConnections.current)

    const createVideoStream = useCallback( async (peerConnection: RTCPeerConnection) => {
        const contains = await navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            setConnection({...peerConnections.current})
            const cams = devices.filter(device => device.kind === "videoinput")
            const constraints = { video: {}, audio: true }
            if(cams.length > 0)
                constraints.video = {
                    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':
                            return console.log('Requested device not found')
                    }
                })
    }, [])

    const createRTC = (user: string) => {
        const peerConnection = new RTCPeerConnection()
        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: false,
                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((instace: HTMLVideoElement | null, _: RTCPeerConnection) => {
        /// not working ;(
        _.addEventListener('track', async (event) => {
            const [remoteStream] = event.streams
            if(instace) instace.srcObject = remoteStream
        });
    }, [])

    return { peerConnections, videoState }
}

การจัดการเหตุการณ์ ontrack ก็ไม่ได้ถูกสังเกตในการสร้างฟังก์ชัน "createVideoStream" ด้วย