# Help Me Understand the MediaSoup Integration Flow **URL:** \ **Category:** Integration\ **Created:** [January 11, 2025, 8:04am UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427 "2025-01-11T08:04:19Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Naveenravi07](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/naveenravi07/32/2023_2.png) [@Naveenravi07](https://mediasoup.discourse.group/u/Naveenravi07)\ **Post date:** [January 11, 2025, 8:04am UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/1 "2025-01-11T08:04:19Z")
I’ve been trying to implement group video calling using MediaSoup, following the documentation carefully, but it’s not working as expected. Here’s the flow of my app: - **Client 1 (Sender)**: - Joins a room, gets RTP capabilities, and loads the device. - Creates a WebRTC transport on the server for receiving media (`consumer=true`) and sends transport details to the client. - Creates a `recvTransport` on the client and attaches a `connect` event to send the transport ID and DTLS parameters back to the server. - The server connects the transport and checks for producers in the room. If producers exist, it consumes their media and sends the data to the client. - The client maps through the consumed data and calls `consume` on the `recvTransport`. - If camera permission is denied, the process stops. Otherwise: - Creates a WebRTC transport on the server for sending media (`consumer=false`) and uses the returned transport data to create a `sendTransport` on the client. - Attaches `connect` and `produce` event listeners to the `sendTransport` and sends the necessary parameters to the server to connect the transport and create a producer. - **Client 2 (Receiver)**: - Joins the same room, gets RTP capabilities, and loads the device. - Since camera permission is off, only creates a WebRTC transport on the server for receiving media (`consumer=true`) and sends transport details to the client. - Creates a `recvTransport` on the client and attaches a `connect` event to send the transport ID and DTLS parameters back to the server. - The server connects the transport, checks for producers in the room, consumes their media, and sends the consumed data to the client. - The client maps through the consumed data and calls `consume` on the `recvTransport`. ---
**Author:** ![BlueMagnificent](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/bluemagnificent/32/841_2.png) [@BlueMagnificent](https://mediasoup.discourse.group/u/BlueMagnificent)\ **Post date:** [January 11, 2025, 8:10pm UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/2 "2025-01-11T20:10:36Z")
Can you detail the issue you are encountering, like the error you are getting, if any. ---
**Author:** ![Naveenravi07](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/naveenravi07/32/2023_2.png) [@Naveenravi07](https://mediasoup.discourse.group/u/Naveenravi07)\ **Post date:** [January 12, 2025, 6:46am UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/4 "2025-01-12T06:46:42Z")
From my understanding, the media produced by the sender is not being sent to the server. Here is a short video of the Chrome WebRTC internals when the sender’s camera is turned on and the producer is generating data. However, on the receiving end, the receiver is receiving the media track from the server, and I tried resuming the media track, but it’s not displaying anything [![](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/8/81cdc4a08bf724d7f10ecd4e9ea9e8286f87b4fe.jpeg "Mediasoup debug on chrome webrtc internals") ](https://www.youtube.com/watch?v=jLpUmjiDL-w) ---
**Author:** ![BlueMagnificent](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/bluemagnificent/32/841_2.png) [@BlueMagnificent](https://mediasoup.discourse.group/u/BlueMagnificent)\ **Post date:** [January 12, 2025, 1:10pm UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/5 "2025-01-12T13:10:54Z")
Unfortunately, the video just shows that the sender is sending media (to mediasoup). I am much more interested on what is happening on the receiver end since that is where the issue could be coming from. How is the receiver consuming the produced media? Any code snippet you could share for both client and server side of this? and also, are there any errors logged on the client side, like the browser console? ---
**Author:** ![Naveenravi07](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/naveenravi07/32/2023_2.png) [@Naveenravi07](https://mediasoup.discourse.group/u/Naveenravi07)\ **Post date:** [January 13, 2025, 4:25am UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/6 "2025-01-13T04:25:28Z")
This is how i structured storing all the needed data for a group video call. ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/c/c07ef8fa3e99ae71bd729fa605548690767ed89a.png) This is the code block for creating consumers in server. ``` async createConsumerFromTransport(data: any, roomId: string, userId: string) { const { rtpCapabilities }: { rtpCapabilities: RtpCapabilities } = data; const room = this.rooms.get(roomId); if (!room || !room.router) { throw new Error("Room or router not found"); } let consumersInfo: any[] = [] for (const user of room.users.values()) { if (user.id === userId) continue; //Prevent consuming same user stream for (const producerId of user.producersIds) { const producer = room.producers.get(producerId); if (!producer) continue; if (!room.router.canConsume({ producerId, rtpCapabilities })) { console.error(`Router cannot consume for producer ${producerId}`); continue; } const transport = room.transports.get(producer.transportId); if (!transport) { console.error(`Transport not found for producer ${producerId}`); continue; } try { const consumer = await transport.transport.consume({ producerId, rtpCapabilities, paused: true, }); user.consumersIds.push(consumer.id); room.consumers.set(consumer.id, { consumer, producerId, transportId: transport.transport.id, userId, }); consumersInfo.push({ id: consumer.id, producerId: producerId, kind: producer.kind, rtpParameters: consumer.rtpParameters, userId: producer.userId }) } catch (err) { console.error(`Failed to create consumer for producer ${producerId}:`, err); } } } return consumersInfo } ``` And this my client side for consuming media ``` const receiveAllVideoFromServer = async () => { console.log("Emitting createTransport for consuming ") socket.emit('createTransport', { consumer: true }, (data: any) => { const recvTRansport = device.current.createRecvTransport(data); // Connect will be triggerd on the first call to recvTransport.consume() recvTRansport.on('connect', async ({ dtlsParameters }, callback, errback) => { console.log('Recv transport connect event fired internally'); try { console.log(`Emitting transportConnect event with id=${recvTRansport.id} and dtlsParameters`); socket.emit("transportConnect", { dtlsParameters: dtlsParameters, transportId: recvTRansport.id, consumer: true }, (stat: any) => { console.log("Got response from server for setting dtls on consumer transport", stat) callback() }) } catch (err) { console.log("Error occured", err) errback(err as Error) } }); socket.emit('transportConsume', { rtpCapabilities: device.current.rtpCapabilities, }, async (consumeData: any) => { console.log("Ready to consume", consumeData); // Create an array to store all consumer operations const consumers: any[] = [] for (const obj of consumeData) { let consumer = await recvTRansport.consume({ id: obj.id, producerId: obj.producerId, kind: obj.kind, rtpParameters: obj.rtpParameters, }) consumers.push(consumer) } console.log(consumers) consumers.forEach((obj: any) => { console.log(obj) socket.emit('resumeConsumeTransport', { consumerId: obj.id }) }) //Some ui related react code to render videos on screen }); }) } ``` ---
**Author:** ![BlueMagnificent](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/bluemagnificent/32/841_2.png) [@BlueMagnificent](https://mediasoup.discourse.group/u/BlueMagnificent)\ **Post date:** [January 13, 2025, 9:56pm UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/7 "2025-01-13T21:56:35Z")
At this point and with the information at hand, it is quite diffcult to pinpoint what the issue is. The code snippet you pasted looks good so far, perhapes the issue is from another part of the code. You can try any or all of the following ( in no particular order) to get further information. - Check the webrtc internals at the receiver’s browser to see if packets are being received. - Enable logging for mediasoup both for [client](https://mediasoup.org/documentation/v3/mediasoup-client/debugging/#Enable-Logging) and [server](https://mediasoup.org/documentation/v3/mediasoup/debugging/#Enable-Logging) to see if any interesting message gets logged to the console. - [Enable trace event](https://mediasoup.org/documentation/v3/mediasoup/debugging/#trace-Event-Consumer) at one of the consumers of the receiving peer (server side). Use with caution. This can help determine, from mediasoup end, if the consumer is actually getting RTP packets among other things. ---
**Author:** ![Naveenravi07](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/naveenravi07/32/2023_2.png) [@Naveenravi07](https://mediasoup.discourse.group/u/Naveenravi07)\ **Post date:** [January 15, 2025, 4:34pm UTC](https://mediasoup.discourse.group/t/help-me-understand-the-mediasoup-integration-flow/6427/8 "2025-01-15T16:34:57Z")
While debugging the Mediasoup client on the receiving device, I found that the ICE connection state transitions to “connected,” and the `MediaStreamTrack` is successfully loaded into the browser’s video element. ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/e/ee36053bf18179b23012ca69423b7840a2a691f1.png) Upon inspecting the receiving client using the Chrome WebRTC debugger, I observed incoming data. However, I also noticed outgoing data, even though I joined from the receiver device with both video and audio turned off ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/1/1c10641e7b84aa4810ac09c4ddc096f76cf4b95d.png) PS: I am running both clients in same computer and connected to same network. and this is how my config looks like ``` let transport = await room.router.createWebRtcTransport({ listenInfos: [ { ip: "0.0.0.0", announcedIp: "127.0.0.1", protocol: "udp" }, { ip: "0.0.0.0", announcedIp: "127.0.0.1", protocol: "tcp" } ], enableTcp: true, enableUdp: true, preferUdp: true, }) ``` And one more thing is that i have attached a onLoadMetaData event listener to the video element and when the recieving client loads the streames video this event is not firing ```auto