index.html

<style>
textarea {
  width: 100%;
  height: 20%;
}
video {
  width: 160px;
  height: 120px;
}
</style>
<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<div>
  <p>OFFER <button id="copy-offer" disabled>copy</button></p>
  <textarea id="offer" disabled></textarea>
</div>
<div>
  <p><button id="paste-answer" disabled>paste answer and set remote description</button></p>
  <textarea id="answer" disabled></textarea>
</div>
<div id="ice"></div>
<div id="err"></div>
<p>Paste it to <a href="answer.html">answer.html</a>, copy the answer back.</p>
<script>
let localStream;
const pc = new RTCPeerConnection();
pc.onicegatheringstatechange = (event) => {
  if (pc.iceGatheringState !== 'complete') return;
  document.getElementById('offer').value = pc.localDescription.sdp;
}
pc.oniceconnectionstatechange = () => {
  ice.innerText = pc.iceConnectionState;
};
pc.ontrack = (event) => {
  if (!remoteVideo.srcObject) {
    remoteVideo.srcObject = event.streams[0];
  }
};
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then(async (stream) => {
  localStream = stream;
  localVideo.srcObject = stream;
  stream.getTracks().forEach(t => pc.addTrack(t, stream));
  await pc.setLocalDescription();
  document.getElementById('copy-offer').disabled = false;
})
.catch((e) => {
  console.log(e);
  err.innerText = e.toString();
})

document.getElementById('paste-answer').onclick = async () => {
  const sdp = await navigator.clipboard.readText();
  document.getElementById('answer').value = sdp;
  await pc.setRemoteDescription({type: 'answer', sdp});
  document.getElementById('paste-answer').disabled = true;
};

document.getElementById('copy-offer').onclick = () => {
  navigator.clipboard.writeText(pc.localDescription.sdp);
  document.getElementById('paste-answer').disabled = false;
};
</script>