video_chat.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>
<video id="peer_video" controls></video>

<script>
async function connect(ev) {
  // Disable inputs
  window.your_id.disabled = window.peer_id.disabled = ev.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 camera and voice
  const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: { echoCancellation: true } });
  // Convert MediaStream to ReadableStream
  const readableStream = mediaStreamToReadableStream(mediaStream, 100);
  // Send to peer
  fetch(`https://ppng.io/${window.peer_id.value}`, {
    method: 'POST',
    body: readableStream,
    allowHTTP1ForStreamingUpload: true,
  });
  // Play the peer video
  window.peer_video.src = `https://ppng.io/${window.your_id.value}`;
  window.peer_video.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>