WebRTC Video Channel

Media shares the connection. Capture a MediaStream with getUserMedia() (getUserMedia and Image Capture) or getDisplayMedia(), add its tracks to a peer such as alice from WebRTC Data Channel (this fires negotiationneeded, so offer and answer run again), and show remote streams from the track event.

const local = await navigator.mediaDevices.getUserMedia({ video: { width: 1280 }, audio: true });
document.querySelector('#me').srcObject = local;      // <video id="me" autoplay muted playsinline>
for (const track of local.getTracks()) alice.addTrack(track, local);
bob.ontrack = ({ streams: [remote] }) => {
  document.querySelector('#them').srcObject = remote;  // <video id="them" autoplay playsinline>
};

Browsers must implement VP8, H.264 and Opus, and encrypt media with SRTP. In a mesh call everyone uploads one copy per peer, so larger calls need a media server.