logo

Babylon.js Market

By Lawrence

5 minutes

Last lesson ended with a seat and a signaling URL. That tells you where to reach the other browsers. But knowing where to reach them is not the same as reaching them. You can have two tabs, each with a room code, and still send zero bytes between them. A room code and a seat are only a start, not a real connection. This lesson opens the channel.

There is no scene change this time. All the mesh code lives in P2PNetwork.transport.ts. You reach it only through the MeshConnection contract from lesson 2. The Net entity and its System come later. Everything here is the transport that sits behind the System's injectable factory.

Checking for WebRTC support

Before it does anything, the transport asks one question. RTCPeerConnection and fetch exist in a browser tab. They do not exist in a Node test runner. So the live code runs only after a capability check passes.

From the transport:

src/components/P2PNetwork/P2PNetwork.transport.ts
export function browserHasWebRTC(): boolean {
  return (
    typeof window !== 'undefined' &&
    typeof RTCPeerConnection !== 'undefined' &&
    typeof fetch !== 'undefined'
  );
}

Sometimes this returns false, like during SSR or in a vitest worker. Then the System never opens a real mesh. It injects a fake one instead, which is lesson 6's whole subject. This is why the WebRTC code lives in its own file. It needs the DOM, so it stays out of the renderer-agnostic System.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search