Hello I’m trying to create a video conferencing application based on Mediasoup but I get this error when I do a “transport.produce()” client-side.
Cannot destructure property 'id' of '(intermediate value)' as it is undefined.
I have no idea what it is due to, even after doing a lot of research, so I would like to know if you have a solution.
client-side
socket.once('transport.config', (data) => {
    if (!device) return;
    device.load({
        routerRtpCapabilities: { codecs: rtp.mediaCodecs, headerExtensions: rtp.headerExtensions }
    }).then(async () => {
        if (device.canProduce('video')) {
            const videoStream = await navigator.mediaDevices.getUserMedia({ video: true }).catch(console.error),
                videoTrack = videoStream.getVideoTracks()[0];
            const { sendTransport, rcvTransport } = data;
            console.log(rcvTransport);
            const transportSend = device.createSendTransport({ ...rcvTransport });
            transportSend.on('connect', async ({ dtlsParameters }, callback, errback) => {
                socket.emit('transport-connect', { dtlsParameters, transportId: rcvTransport.id });
                socket.once('transport-connect-response', callback);
            });
            transportSend.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
                socket.emit('transport-produce', {
                    transportId: rcvTransport.id,
                    kind,
                    rtpParameters,
                    appData
                });
                socket.once('transport-produce-response', callback);
            });
            transportSend.on('connectionstatechange', (connectionState) => console.log('TransportSend ConnectionState:', connectionState));
            transportSend.produce({ track: videoTrack }).then((producer) => {
                console.log('produced', producer);
            }).catch(console.error);
        } else {
            console.log('cant do video');
        }
    }).catch(console.error);
});
server-side
const sendTransport = await router.createWebRtcTransport({
    listenIps: [
        { ip: '127.0.0.1', announcedIp: null },
        { ip: '172.17.0.1', announcedIp: null },
    ],
    enableUdp: true,
    enableTcp: true,
    preferUdp: true
});
sendTransport.on('icestatechange', (icestate) => console.log('IceState =>', icestate));
socket.once('transport-connect', ({ transportId, dtlsParameters }) => {
    sendTransport.connect({ dtlsParameters });
    console.log('connecting');
    socket.emit('transport-connect-response');
});
socket.once('transport-produce', ({ transportId, kind, rtpParameters, appData }) => {
    console.log('producing', kind, rtpParameters);
    const produced = sendTransport.produce({ kind, rtpParameters, appData });
    socket.emit('transport-produce-response');
});
socket.emit('transport.config', {
    rcvTransport: {
        id: sendTransport.id,
        iceParameters: sendTransport.iceParameters,
        iceCandidates: sendTransport.iceCandidates,
        dtlsParameters: sendTransport.dtlsParameters,
        sctpParameters: sendTransport.sctpParameters
    }
});
Thank you in advance for your help.
