Peer Connections and SDP

const config = {
  iceServers: [
    { urls: 'stun:stun.example.org:3478' },
    // Ephemeral credentials come from your own endpoint, never from a constant in the bundle.
    { urls: ['turn:turn.example.org:3478?transport=udp', 'turns:turn.example.org:443?transport=tcp'],
      username: '1767225600:ana', credential: 'issued-by-your-server' },
  ],
  bundlePolicy: 'max-bundle',
  iceTransportPolicy: 'all',
};
const pc = new RTCPeerConnection(config);

const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.example.org:3478' }] });
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 640, height: 360 } });
for (const track of stream.getTracks()) pc.addTrack(track, stream);
pc.createDataChannel('chat', { ordered: true });
await pc.setLocalDescription();
console.log(pc.localDescription.type);
console.log(pc.localDescription.sdp);
pc.close();
window.__done = true;

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
  --use-fake-device-for-media-stream --use-fake-ui-for-media-stream \
  --remote-debugging-port=9222 http://localhost:8080/capture.html

alice negotiationneeded #1
alice signalingState -> have-local-offer
bob signalingState -> have-remote-offer
bob track event: audio mid 0 streams 1
bob track event: video mid 1 streams 1
bob signalingState -> stable
alice signalingState -> stable
bob iceConnectionState -> checking
alice iceConnectionState -> checking
bob iceConnectionState -> connected
alice iceConnectionState -> connected
bob connectionState -> connected
alice connectionState -> connected

// Huddle: two peers in one page, signalling replaced by direct function calls.
const log = (...a) => console.log(...a);
const config = { iceServers: [{ urls: 'stun:stun.example.org:3478' }], bundlePolicy: 'max-bundle' };

function watch(name, pc) {
  pc.addEventListener('signalingstatechange', () => log(name, 'signalingState ->', pc.signalingState));
  pc.addEventListener('iceconnectionstatechange', () => log(name, 'iceConnectionState ->', pc.iceConnectionState));
  pc.addEventListener('connectionstatechange', () => log(name, 'connectionState ->', pc.connectionState));
  pc.addEventListener('icegatheringstatechange', () => log(name, 'iceGatheringState ->', pc.iceGatheringState));
}

const alice = new RTCPeerConnection(config);
const bob = new RTCPeerConnection(config);
watch('alice', alice);
watch('bob', bob);

// Trickle ICE: each candidate goes straight to the other side (a real app sends it over the signalling channel).
alice.onicecandidate = ({ candidate }) => bob.addIceCandidate(candidate).catch((e) => log('bob addIceCandidate', e.name));
bob.onicecandidate = ({ candidate }) => alice.addIceCandidate(candidate).catch((e) => log('alice addIceCandidate', e.name));

const remoteKinds = [];
bob.ontrack = ({ track, transceiver, streams }) => {
  remoteKinds.push(track.kind);
  log('bob track event:', track.kind, 'mid', transceiver.mid, 'streams', streams.length);
};

let negotiations = 0;
alice.onnegotiationneeded = async () => {
  negotiations += 1;
  log('alice negotiationneeded #' + negotiations);
  await alice.setLocalDescription(); // implicit createOffer
  await bob.setRemoteDescription(alice.localDescription);
  await bob.setLocalDescription(); // implicit createAnswer
  await alice.setRemoteDescription(bob.localDescription);
};

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 640, height: 360 } });
const [audio, video] = [stream.getAudioTracks()[0], stream.getVideoTracks()[0]];
const audioSender = alice.addTrack(audio, stream);
const videoTransceiver = alice.addTransceiver(video, { direction: 'sendrecv', streams: [stream] });

// Prefer VP9 and AV1 for the camera, keep rtx/red/ulpfec at the end.
const caps = RTCRtpSender.getCapabilities('video').codecs;
const rank = (c) => (/vp9/i.test(c.mimeType) ? 0 : /av1/i.test(c.mimeType) ? 1 : /vp8/i.test(c.mimeType) ? 2 : /h264/i.test(c.mimeType) ? 3 : 4);
videoTransceiver.setCodecPreferences([...caps].sort((a, b) => rank(a) - rank(b)));

const until = (pc, prop, value) => new Promise((resolve) => {
  const check = () => { if (pc[prop] === value) { resolve(); return true; } return false; };
  if (!check()) { const id = setInterval(() => check() && clearInterval(id), 20); }
});
await Promise.all([until(alice, 'connectionState', 'connected'), until(bob, 'connectionState', 'connected')]);

log('alice transceivers:', alice.getTransceivers().map((t) => `${t.mid}:${t.sender.track?.kind}:${t.direction}/${t.currentDirection}`).join(' '));
const stats = await alice.getStats();
const codecs = [...stats.values()].filter((s) => s.type === 'codec' && s.mimeType.startsWith('video')).map((s) => s.mimeType);
log('negotiated video codec:', codecs.join(','));

// replaceTrack: swap the camera for a canvas stream without renegotiating.
const canvas = Object.assign(document.createElement('canvas'), { width: 320, height: 180 });
canvas.getContext('2d').fillRect(0, 0, 320, 180);
const slides = canvas.captureStream(5).getVideoTracks()[0];
const before = negotiations;
await videoTransceiver.sender.replaceTrack(slides);
await new Promise((r) => setTimeout(r, 300));
log('replaceTrack renegotiations:', negotiations - before);

// Mute without renegotiation: enabled=false sends silence/black frames, track stays.
audio.enabled = false;
log('audio.enabled', audio.enabled, 'sender track still', audioSender.track === audio);

// Rollback: alice offers, then bob also offers (glare); alice rolls back and takes bob's offer.
const polite = new RTCPeerConnection(config);
const impolite = new RTCPeerConnection(config);
polite.addTransceiver('video');
impolite.addTransceiver('audio');
await polite.setLocalDescription();
await impolite.setLocalDescription();
log('polite state before rollback:', polite.signalingState);
await polite.setLocalDescription({ type: 'rollback' });
log('polite state after rollback:', polite.signalingState);
await polite.setRemoteDescription(impolite.localDescription);
await polite.setLocalDescription();
await impolite.setRemoteDescription(polite.localDescription);
log('glare resolved:', polite.signalingState, impolite.signalingState);

// Close cleanly.
for (const pc of [alice, bob, polite, impolite]) pc.close();
stream.getTracks().forEach((t) => t.stop());
log('closed:', alice.connectionState, alice.signalingState, bob.connectionState);
window.__done = true;

alice transceivers: 0:audio:sendrecv/sendonly 1:video:sendrecv/sendonly
negotiated video codec: video/VP9
replaceTrack renegotiations: 0
audio.enabled false sender track still true
polite state before rollback: have-local-offer
polite state after rollback: stable
glare resolved: stable stable
closed: closed closed closed

const config = { bundlePolicy: 'max-bundle' };
const a = new RTCPeerConnection(config);
const b = new RTCPeerConnection(config);
a.onicecandidate = ({ candidate }) => b.addIceCandidate(candidate);
b.onicecandidate = ({ candidate }) => a.addIceCandidate(candidate);

async function negotiate(from, to) {
  await from.setLocalDescription();
  await to.setRemoteDescription(from.localDescription);
  await to.setLocalDescription();
  await from.setRemoteDescription(to.localDescription);
}
const ufrag = (pc) => /a=ice-ufrag:(\S+)/.exec(pc.localDescription.sdp)[1];
const connected = (pc) => new Promise((ok) => {
  if (pc.connectionState === 'connected') return ok();
  pc.addEventListener('connectionstatechange', () => pc.connectionState === 'connected' && ok());
});

a.addTransceiver('audio', { direction: 'sendrecv' });
const video = a.addTransceiver('video', { direction: 'sendonly' });
let needed = 0;
a.onnegotiationneeded = () => { needed += 1; };
await negotiate(a, b);
await Promise.all([connected(a), connected(b)]);
const first = ufrag(a);

a.restartIce(); // schedules negotiationneeded; the next offer carries fresh credentials
await new Promise((r) => setTimeout(r, 50));
console.log('negotiationneeded fired after restartIce:', needed >= 1);
await negotiate(a, b);
console.log('ufrag changed:', first !== ufrag(a));

video.stop(); // the m= section is rejected in the next offer
await negotiate(a, b);
const videoSection = a.localDescription.sdp.split('m=').find((s) => s.startsWith('video'));
console.log('video m= port after stop:', videoSection.split(' ')[1], 'currentDirection:', video.currentDirection);
console.log('transceivers left:', a.getTransceivers().length);
a.close(); b.close();
window.__done = true;

negotiationneeded fired after restartIce: true
ufrag changed: true
video m= port after stop: 0 currentDirection: stopped
transceivers left: 1