How to establish multi-party video calls with Cloudflare Calls (SFU REST API) and Socket.IO in React?

[Xenex Ashura]

I am  building a multi-party video call app using Cloudflare Calls SFU for WebRTC media routing and Socket.IO for signaling. I ran into two issues:

1. `navigator.mediaDevices.getUserMedia` throws an OverconstrainedError on desktop Brave when using `facingMode: 'user'`.

2. When two users join the same room, `socket.io` exchanges `sessionId` and `trackName` arrays, but remote streams either get dropped in `pc.ontrack` or fail to re-render in React `<video>` elements.

#### 1. Backend Track Pulling Endpoint (`server.js`):

app.post('/api/session/:sessionId/pull', async (req, res) => {

const { sessionId } = req.params;

const { tracks, sdp } = req.body; // tracks: [{ location: 'remote', sessionId, trackName, mid }]

const pullResp = await fetch(`https://rtc.live.cloudflare.com/v1/apps/${APP_ID}/sessions/${sessionId}/tracks/new`, {

method: 'POST',

headers: { 'Authorization': `Bearer ${API_TOKEN}`, 'Content-Type': 'application/json' },

body: JSON.stringify({ sessionDescription: { type: 'offer', sdp }, tracks })

});

const data = await pullResp.json();

res.status(200).json(data);

});

#### 2. Frontend Track Pulling & Stream Binding (`RoomPage.tsx`):

const transceiver = pc.addTransceiver('video', { direction: 'recvonly' });

const offer = await pc.createOffer();

await pc.setLocalDescription(offer);

const pullResp = await fetch(`/api/session/${currentSessionId}/pull`, {

method: 'POST',

body: JSON.stringify({

tracks: [{ location: 'remote', sessionId: remoteSessionId, trackName, mid: transceiver.mid }],

sdp: pc.localDescription?.sdp

})

});

const data = await pullResp.json();

await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: data.sessionDescription.sdp }));

### Questions:

1. What are the best practices for setting `getUserMedia` constraints to ensure desktop/Brave compatibility?

2. How should transceiver `mid` mappings be tracked when pulling remote tracks via Cloudflare Calls?

3. How can we ensure immutable state updates in React so incoming `RTCTrackEvent` streams properly trigger video element re-renders?

This is so humiliating i don't understand what I am doing wrong with AI doing WebRTC so anyone could help me here??

[Octavian Naicu]

Why are you using facingMode on desktop? It feels like an unnecessary constraint. facingMode is generally for mobile devices where you have out of the box a front camera and a back camera. In theory you can run getSupportedConstraints() before getUserMedia(). 

Also, is your userbase heavily skewed towards Brave? How does your video call app behave on Chrome, Edge, Safari or Firefox? 99% of the time, your users will be using one of these major browsers. My suggestion is to support major browsers 1st.

--
This list falls under the WebRTC Code of Conduct - https://webrtc.org/support/code-of-conduct.
---
You received this message because you are subscribed to the Google Groups "discuss-webrtc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to discuss-webrt...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/discuss-webrtc/304ba2c8-f6a3-494c-bf16-4a8e7fa3ed1dn%40googlegroups.com.

--

Best Regards,
--
Octavian Naicu,
Founder and CTO @ Pipe

https://addpipe.com 
X @piperecorder