I just want to add this in case someone else struggles with this (even though I think the docs are explaining this well enough)
This is a simplified version of how the ‘connect’ procedure should look like.
Mediasoup client:
transport.on(
'connect',
async ({ dtlsParameters }, callback, errback) => {
try {
await signaling.request('connect-transport', dtlsParameters)
callback()
} catch (error) {
errback(error)
}
}
)
Mediasoup server:
mySignaling.on('connect-transport', (dtlsParameters) => {
const transport = getCorrectTransport() // Up to you how you get the right transport
try {
await transport.connect({ dtlsParameters });
} catch (error) {
mySignaling.throwError()
}
}
The ‘connect’ event is fired when you call consume
or produce
and will establish a PeerConnection to Mediasoup server.
After you have set up this procedure it should work. Any other issues with not seeing any video or whatever are probably related to failing ICE process. In this case make sure to double-check that you use correct listenIps for WebRtcTransport or, if you use it, WebRtcServer.
Edit: Adding our code line-by-line as a reference seeing that the minified example I posted does not cover transport identification
client
connectionCallback(id: string) {
return async ({ dtlsParameters }: any, callback: any, errback: any) => {
try {
await this.socket.request('mediasoup', {
type: 'connect-transport',
data: {
transportId: id,
dtlsParameters,
},
})
callback()
} catch (error: any) {
console.warn('ERROR CONNECTING TRANSPORT', error)
errback(error)
}
}
}
server
async connectTransport({
roomId,
transportId,
dtlsParameters,
}: IConnectTransportRequest) {
const router = this._routerService.getRouterBy(
'transportId',
roomId,
transportId,
);
if (!router) return; // < async fail-safe
const transport = router.appData.transports.get(transportId);
if (transport) {
try {
await transport.connect({ dtlsParameters });
return 1;
} catch {
console.warn('Transport connection failed');
}
}
return 0; // < will throw error in intermediate API layer
}