JSFiddle - React, Tailwind, and code Playground

by mickel8

JavaScript

async function run() {
  pc1 = new RTCPeerConnection();
  pc2 = new RTCPeerConnection();

  tr1 = pc1.addTransceiver("audio");
  tr2 = pc1.addTransceiver("video");

  offer = await pc1.createOffer();
  await pc1.setLocalDescription(offer);
  await pc2.setRemoteDescription(offer);
  answer = await pc2.createAnswer();
  await pc2.setLocalDescription(answer);
  await pc1.setRemoteDescription(answer);

  tr1.stop();

  offer = await pc1.createOffer();
  await pc1.setLocalDescription(offer);
  await pc2.setRemoteDescription(offer);
  answer = await pc2.createAnswer();
  await pc2.setLocalDescription(answer);
  await pc1.setRemoteDescription(answer);

  tr3 = pc1.addTransceiver("video");

  // Notice that createOffer will reuse (recycle)
  // free m-line, even though its initiall type was audio.
  // However, pc1.getTransceivers() will return [tr1, tr3].
  // That's important as the order of transceivers doesn't
  // have to match the order of m-lines i.e. tr3 maps to m-line
  // with index 0 and tr1 maps to m-line with index 1.
  offer = await pc1.createOffer();
  await pc1.setLocalDescription(offer);
  await pc2.setRemoteDescription(offer);
  answer = await pc2.createAnswer();
  await pc2.setLocalDescription(answer);
  await pc1.setRemoteDescription(answer);
  
  // notice that after renegotiation
  // pc1.getTransceivers() will only
  // return two (video) transceivers
  console.log(pc1.getTransceivers());
};

run();