JSFiddle - React, Tailwind, and code Playground

HTML

<div id="console">
</div>

JavaScript

var start = Date.now();
let stream = null;
const media = navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then((media) => {
	stream = media; 
  pc1.addStream(stream); 
  pc2.addStream(stream);   
  includeOffer();
})
.catch(console.log)

let includeOffer = () => {
  pc1.createOffer().then((offer) => {
    pc1.setLocalDescription(offer);
  });
  pc2.createOffer().then((offer) => {
    pc2.setLocalDescription(offer);
  });

};
let config1 = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]};
let config2 = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}], iceCandidatePoolSize: 5};
var pc1 = new RTCPeerConnection(config1);
var pc2 = new RTCPeerConnection(config2);

const gatheringFinished = function(prefix) {
  return function () {
    	if (this.iceGatheringState === 'complete') {
        document.getElementById("console").innerHTML += "ICE gathering " + prefix +" iceCandidatePoolSize: " + (Date.now() - start) + "<br/>";
      }
  };
}

pc1.onicegatheringstatechange = gatheringFinished('without').bind(pc1);
pc2.onicegatheringstatechange = gatheringFinished('with').bind(pc2);