demo · v142

Sync Display Wall

The use case the spec leads with: a shopping-mall video wall where ten displays show the exact same animation. Unicast = N TCP streams; multicast = one UDP send. Below is a sender (you) and eight simulated receivers all joined to 239.1.1.1:9000. Press play and watch them tick in lock-step. Toggle packet loss to see how the wall degrades.

IWA-only. The real UDPSocket + multicast API only works inside an Isolated Web App. The probe below shows whether your runtime grants it. The wall simulates the network deterministically so this page demonstrates the topology and timing characteristics even from a normal browser tab.
—
packets sent
0
packets delivered
0
receivers joined
8
spread (worst lag)
— ms

relevant markup

// Sender: one socket, one send() per frame — N receivers consume.
const sock = new UDPSocket({
  remoteAddress: "239.1.1.1",
  remotePort: 9000,
  multicastTimeToLive: 1
});
const { writable } = await sock.opened;
const w = writable.getWriter();
for await (const frame of animationFrames) {
  await w.write({ data: encode(frame) });
}

// Receiver
const rx = new UDPSocket({
  localAddress: "0.0.0.0",
  localPort: 9000,
  multicastGroupAddress: "239.1.1.1"   // ← new in Chrome 142
});
for await (const { data } of rx.readable) {
  paint(decode(data));
}

see also