WebRTC

   Peer A                                         Peer B
 ┌───────────────────┐   SDP offer/answer    ┌───────────────────┐
 │ RTCPeerConnection │ ◄── ICE candidates ──►│ RTCPeerConnection │
 └─────────┬─────────┘   (your signaling     └─────────┬─────────┘
           │              server, e.g. WS)             │
           │  "what is my public ip:port?"             │
           ├──────────────► STUN ◄─────────────────────┤
           │                                           │
           │ ◄════ direct UDP: DTLS-SRTP + SCTP ═════► │
           │                                           │
           └────────────► TURN relay ◄─────────────────┘
                     (fallback when NAT/firewall
                      blocks the direct path)

   audio / video            RTCDataChannel
 ┌──────────────┐          ┌──────────────┐
 │     SRTP     │          │     SCTP     │
 └──────┬───────┘          ├──────────────┤
        │ keys from DTLS   │     DTLS     │
 ┌──────┴──────────────────┴──────────────┐
 │        ICE (STUN checks, TURN)         │
 ├────────────────────────────────────────┤
 │   UDP  (TCP or TLS/443 via TURN)       │
 └────────────────────────────────────────┘

const pc = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});
 
pc.addEventListener("negotiationneeded", async () => {
  await pc.setLocalDescription(); // implicit offer
  signal({ description: pc.localDescription!.toJSON() });
});
 
declare function signal(msg: unknown): void;

export const config: RTCConfiguration = {
  iceServers: [
    { urls: "stun:stun.example.com:3478" },
    {
      urls: [
        "turn:turn.example.com:3478?transport=udp",
        "turns:turn.example.com:443?transport=tcp",
      ],
      username: "1790000000:alice", // short-lived
      credential: "base64-hmac",
    },
  ],
  iceTransportPolicy: "all", // "relay": TURN only
  bundlePolicy: "max-bundle", // one transport for all
  iceCandidatePoolSize: 0, // >0 pre-gathers
};

pc.addEventListener("icecandidate", ({ candidate }) => {
  if (candidate) signal({ candidate: candidate.toJSON() });
});
 
// ICE restart after a network change or failure
pc.addEventListener("iceconnectionstatechange", () => {
  if (pc.iceConnectionState === "failed") pc.restartIce();
});

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});
for (const track of stream.getTracks()) {
  pc.addTrack(track, stream); // stream ids tie a/v together
}
 
pc.addEventListener("track", ({ track, streams }) => {
  remote.srcObject = streams[0] ?? new MediaStream([track]);
});
 
declare const remote: HTMLVideoElement;

// cap the video bitrate without renegotiating
async function capBitrate(
  sender: RTCRtpSender,
  bps: number,
) {
  const params = sender.getParameters();
  await sender.setParameters({
    ...params,
    encodings: params.encodings.map((e) => ({
      ...e,
      maxBitrate: bps,
    })),
  });
}
 
// prefer AV1, keep the rest as fallbacks
function preferCodec(t: RTCRtpTransceiver, mime: string) {
  const caps = RTCRtpReceiver.getCapabilities("video");
  const all = caps?.codecs;
  if (!all) return;
  t.setCodecPreferences([
    ...all.filter((c) => c.mimeType === mime),
    ...all.filter((c) => c.mimeType !== mime),
  ]);
}
preferCodec(pc.getTransceivers()[0]!, "video/AV1");

// reliable + ordered by default
const chat = pc.createDataChannel("chat");
const state = pc.createDataChannel("state", {
  ordered: false,
  maxRetransmits: 0, // fire and forget
});
 
// remote side, for channels it didn't create itself
pc.addEventListener("datachannel", ({ channel }) => {
  channel.addEventListener("message", (e) => {
    console.log(channel.label, e.data);
  });
});

// send a big file without blowing the SCTP buffer
async function sendFile(dc: RTCDataChannel, file: Blob) {
  const CHUNK = 16 * 1024;
  const HIGH = 4 * 1024 * 1024;
  dc.bufferedAmountLowThreshold = 1024 * 1024;
  for (let at = 0; at < file.size; at += CHUNK) {
    if (dc.bufferedAmount > HIGH) {
      await new Promise((r) =>
        dc.addEventListener("bufferedamountlow", r, {
          once: true,
        }),
      );
    }
    dc.send(await file.slice(at, at + CHUNK).arrayBuffer());
  }
}

pc.addEventListener("connectionstatechange", () => {
  switch (pc.connectionState) {
    case "failed":
      pc.restartIce();
      break;
    case "closed":
      cleanup();
      break;
  }
});
 
declare function cleanup(): void;

// is this call going through TURN?
async function isRelayed(pc: RTCPeerConnection) {
  const stats = await pc.getStats();
  let pair: any;
  for (const s of stats.values()) {
    if (s.type === "transport" && s.selectedCandidatePairId)
      pair = stats.get(s.selectedCandidatePairId);
  }
  // Firefox before 153 has no "transport" entry
  pair ??= [...stats.values()].find(
    (s) => s.type === "candidate-pair" && s.nominated &&
      s.state === "succeeded",
  );
  const local = pair && stats.get(pair.localCandidateId);
  return local?.candidateType === "relay";
}

pc.addTransceiver(camTrack, {
  direction: "sendonly",
  sendEncodings: [
    { rid: "q", scaleResolutionDownBy: 4, maxBitrate: 15e4 },
    { rid: "h", scaleResolutionDownBy: 2, maxBitrate: 5e5 },
    { rid: "f", maxBitrate: 1.5e6 },
  ],
});
 
declare const camTrack: MediaStreamTrack;

type Data = { room: string };
 
const server = Bun.serve({
  port: 8080,
  fetch(req, server) {
    const room = new URL(req.url).searchParams.get("room");
    if (!room) return new Response("room?", { status: 400 });
    // authenticate here (cookie, token) before upgrading
    if (server.upgrade(req, { data: { room } })) return;
    return new Response("upgrade failed", { status: 500 });
  },
  websocket: {
    data: {} as Data,
    open(ws) {
      ws.subscribe(ws.data.room);
    },
    message(ws, msg) {
      ws.publish(ws.data.room, msg); // everyone but sender
    },
  },
});
console.log(`signaling on :${server.port}`);

bun signal.ts          # dev
bun build signal.ts --target=bun --outfile=dist/signal.js

export type Signal =
  | { description: RTCSessionDescriptionInit }
  | { candidate: RTCIceCandidateInit };
 
export interface Signaling {
  send(msg: Signal): void;
  onMessage(fn: (msg: Signal) => void): void;
}
 
export function wsSignaling(ws: WebSocket): Signaling {
  return {
    send: (msg) => ws.send(JSON.stringify(msg)),
    onMessage: (fn) =>
      ws.addEventListener("message", (e) =>
        fn(JSON.parse(String(e.data)) as Signal),
      ),
  };
}
 
// create + send the offer or answer the state calls for
export async function describe(
  pc: RTCPeerConnection,
  sig: Signaling,
) {
  await pc.setLocalDescription();
  sig.send({ description: pc.localDescription! });
}

listening-port=3478
tls-listening-port=5349
realm=turn.example.com
external-ip=203.0.113.10
min-port=49152
max-port=65535
fingerprint
use-auth-secret
static-auth-secret=CHANGE_ME
cert=/etc/ssl/turn/fullchain.pem
pkey=/etc/ssl/turn/privkey.pem
no-cli
no-multicast-peers
denied-peer-ip=10.0.0.0-10.255.255.255
denied-peer-ip=172.16.0.0-172.31.255.255
denied-peer-ip=192.168.0.0-192.168.255.255

docker run -d --network=host \
  -v "$PWD/turnserver.conf:/etc/coturn/turnserver.conf" \
  coturn/coturn

import { createHmac } from "node:crypto";
 
function requireEnv(name: string): string {
  const value = process.env[name];
  if (!value) throw new Error(`${name} not configured`);
  return value;
}
const secret = requireEnv("TURN_SECRET");
 
export function turnCredentials(user: string, ttl = 3600) {
  const expires = Math.floor(Date.now() / 1000) + ttl;
  const username = `${expires}:${user}`;
  const credential = createHmac("sha1", secret)
    .update(username)
    .digest("base64");
  return {
    urls: [
      "turn:turn.example.com:3478",
      "turns:turn.example.com:5349?transport=tcp",
    ],
    username,
    credential,
  };
}

bun add livekit-client            # npm i / pnpm add
bun add mediasoup mediasoup-client

import { describe, type Signaling } from "./signaling";
 
export async function connect(
  sig: Signaling, caller: boolean, cfg: RTCConfiguration,
) {
  const pc = new RTCPeerConnection(cfg);
  // negotiated: both sides create it, no datachannel event
  const dc = pc.createDataChannel("chat", {
    negotiated: true, id: 0,
  });
  pc.onicecandidate = ({ candidate }) =>
    candidate && sig.send({ candidate: candidate.toJSON() });
  sig.onMessage(async (m) => {
    if ("candidate" in m)
      return pc.addIceCandidate(m.candidate);
    const d = m.description;
    await pc.setRemoteDescription(d);
    if (d.type === "offer") await describe(pc, sig);
  });
  if (caller) await describe(pc, sig);
  await new Promise((r) => (dc.onopen = r));
  return { pc, dc }; // dc.send("hi"); dc.onmessage = ...
}

import { describe, type Signaling } from "./signaling";
 
export function negotiate(pc: RTCPeerConnection,
  sig: Signaling, polite: boolean) {
  let making = false, ignore = false, answering = false;
  pc.onnegotiationneeded = () => {
    making = true;
    describe(pc, sig).finally(() => (making = false));
  };
  pc.onicecandidate = ({ candidate }) =>
    candidate && sig.send({ candidate: candidate.toJSON() });
  sig.onMessage(async (m) => {
    if ("candidate" in m) return pc.addIceCandidate(
      m.candidate).catch((e) => { if (!ignore) throw e; });
    const offer = m.description.type === "offer";
    const busy = making ||
      (pc.signalingState !== "stable" && !answering);
    ignore = !polite && offer && busy;
    if (ignore) return;
    answering = !offer;
    await pc.setRemoteDescription(m.description); // rollback
    answering = false;
    if (offer) await describe(pc, sig);
  });
}

import { negotiate } from "./negotiate";
import type { Signaling } from "./signaling";
 
export async function startCall(
  sig: Signaling, polite: boolean, cfg: RTCConfiguration,
  local: HTMLVideoElement, remote: HTMLVideoElement,
) {
  const pc = new RTCPeerConnection(cfg);
  negotiate(pc, sig, polite);
  const inbound = new MediaStream();
  remote.srcObject = inbound; // <video autoplay playsinline>
  pc.ontrack = ({ track }) => inbound.addTrack(track);
  const cam = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: { width: 1280, height: 720 },
  });
  local.srcObject = cam; // local preview must be muted
  for (const t of cam.getTracks()) pc.addTrack(t, cam);
  return function hangUp() {
    for (const t of cam.getTracks()) t.stop();
    pc.close();
  };
}

export function watchBitrate(
  pc: RTCPeerConnection,
  onKbps: (kbps: number) => void,
  everyMs = 1000,
) {
  let prev: { bytes: number; ts: number } | undefined;
  const id = setInterval(async () => {
    let bytes = 0, ts = 0;
    for (const s of (await pc.getStats()).values()) {
      if (s.type !== "outbound-rtp") continue;
      if (s.kind !== "video") continue;
      bytes += s.bytesSent ?? 0; // sums simulcast layers
      ts = Math.max(ts, s.timestamp);
    }
    if (prev && ts > prev.ts) {
      onKbps(((bytes - prev.bytes) * 8) / (ts - prev.ts));
    }
    prev = { bytes, ts };
  }, everyMs);
  return () => clearInterval(id);
}