simple_phone.html

<input placeholder="Your ID" id='your_id'>
<input placeholder="Peer ID" id='peer_id'>
<button onclick='connect(this)'>Connect</button>
<div id="message"></div>
<audio id="peer_audio"></audio>
<script>
async function connect(e) {
  // Disable inputs
  window.your_id.disabled = window.peer_id.disabled = e.disabled = true;
  // Synchronize
  await Promise.all([
    fetch(`https://ppng.io/wait/${window.your_id.value}`),
    fetch(`https://ppng.io/wait/${window.peer_id.value}`, { method: 'POST' })
  ]);
  window.message.innerText = "Started!";
  // Get audio
  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true } });
  // Convert MediaStream to ReadableStream
  const readableStream = mediaStreamToReadableStream(mediaStream, 100);

  fetch(`https://ppng.io/${window.peer_id.value}`, {
    method: 'POST',
    body: readableStream,
    allowHTTP1ForStreamingUpload: true,
  });

  // Play the peer audio
  window.peer_audio.src = `https://ppng.io/${window.your_id.value}`;
  window.peer_audio.play();
}

// Convert MediaStream to ReadableStream
function mediaStreamToReadableStream(mediaStream, timeslice) {
  return new ReadableStream({
    start(ctrl){
      const recorder = new MediaRecorder(mediaStream);
      recorder.ondataavailable = async (e) => {
        ctrl.enqueue(new Uint8Array(await e.data.arrayBuffer()));
      };
      recorder.start(timeslice);
    }
  });
}
</script>