Mediasoup unable to produce/consume stream after sucessfull connection

mediasoup libraries
1

I’ve been trying to implement mediasoup in my code.

I’m using socket.io for signalling purposes and thus you will see I’ve implemented callbacks in the socket emit events so that I don’t have to set up listen handlers.

Here’s the code

        // meetingID: Identifier for room ID
        const meetingId = store.getState().meeting.id;
        socket.emit(events.GET_ROUTER_CAPABILITIES, meetingId, async (routerRtpCapabilities: RtpCapabilities) => {
            await device.load({ routerRtpCapabilities });
            socket.emit(events.CREATE_WEBRTC_TRANSPORT, meetingId, async (params: TransportOptions) => {
                sendTransport = await device.createSendTransport(params);

                sendTransport.on('connect', async ({ dtlsParameters }, callback, err) => {
                    socket.emit(events.CONNECT_TRANSPORT, meetingId, sendTransport.id, dtlsParameters, () => {
                        callback();
                    });
                });

                sendTransport.on("produce", async ({ kind, rtpParameters, appData }, callback, err) => {
                   socket.emit(events.PRODUCE, meetingId, kind, rtpParameters, sendTransport.id, (producerId: string) => {
                       callback(producerId);
                   })
                });
            });

            socket.emit(events.CREATE_WEBRTC_TRANSPORT, meetingId, async (params: TransportOptions) => {
                receiveTransport = await device.createRecvTransport(params);

                receiveTransport.on('connect', async ({dtlsParameters}, callback, err) => {
                    socket.emit(events.CONNECT_TRANSPORT, meetingId, receiveTransport.id, dtlsParameters, callback);
                });

                socket.emit(events.GET_PRODUCERS, meetingId, (producers: any[]) => {
                    for (const producer of producers) {
                        socket.emit(events.CONSUME, meetingId, receiveTransport.id, producer.producer_id, device.rtpCapabilities, async ({ id, kind, rtpParameters}: any) => {
                            const consumer = await receiveTransport.consume({
                                id,
                                producerId: producer.producer_id,
                                kind,
                                rtpParameters,
                            });
                            const stream: MediaStream = new MediaStream();
                            stream.addTrack(consumer.track);
                            store.dispatch(addStream(stream));
                        })
                    }
                });
            })

            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            const producer = await sendTransport.produce({
                track: stream.getVideoTracks()[0],
                codec: device.rtpCapabilities.codecs?.find((codec) => codec.mimeType.toLocaleLowerCase() === 'video/h264'),
                codecOptions : {
                    videoGoogleStartBitrate : 1000
                }
            });
        });

I cannot see remote streams in my application and I have no idea what I’m missing out on.

1 Like
2

Change this line:

To:

callback({ id: producerId });
1 Like