async function setupIframe(el, polite, r1, g1, b1, r2, g2, b2) {
  el.srcdoc = `<!DOCTYPE html>
      <html>
      <body>
      <h3 style="font-family: 'Roboto', sans-serif; font-weight: 400;">${polite ? 'Polite' : 'Impolite'} Peer's iframe</h3>
      <div id="buttons">
        <button onclick="(${startLocalVideo.toString()})(${r1},${g1},${b1},${r2},${g2},${b2});" id="${polite ? 'politeStart' : 'impoliteStart'}">Start</button>
        <button onclick="window.parent.run(window, 'swapTransceivers');">Swap Sending Track</button>
      </div>
      <p id="videos">
        <video id="localVideo1" autoplay></video>
        <video id="localVideo2" autoplay></video>
        <video id="remoteVideo" autoplay></video>
      </p>
      </body>
      <script>
        (${peer.toString()})(window.parent.document.getElementById("${polite ? 'impolite' : 'polite'}").contentWindow, ${polite});
      </script>
      <html>`;
  await new Promise(resolve => el.onload = resolve);
}
@param {HTMLIFrameElement} el
@param {boolean} polite
@param {number} r1 Video 1 Red channel level [0-1]
@param {number} g1 Video 1 Green channel level [0-1]
@param {number} b1 Video 1 Blue channel level [0-1]
@param {number} r2 Video 2 Red channel level [0-1]
@param {number} g2 Video 2 Green channel level [0-1]
@param {number} b2 Video 2 Blue channel level [0-1]