answer.html

<style>
textarea {
  width: 100%;
  height: 20%;
}
video {
  width: 320px;
  height: 240px;
}
</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><button id="paste-offer">Paste offer and set remote description</button><input type="checkbox" id="gum">add stream</input></p>
  <textarea id="offer" disabled></textarea>
</div>
<div>
  <p><button id="copy-answer" disabled>copy answer</button></p>
  <textarea id="answer" disabled></textarea>
</div>
<div id="ice"></div>
<div id="err"></div>
<script>
var pc = new RTCPeerConnection();
var localStream;
pc.onicegatheringstatechange = (event) => {
  if (pc.iceGatheringState !== 'complete') return;
  document.getElementById('answer').value = pc.localDescription.sdp;
}
pc.oniceconnectionstatechange = () => {
  ice.innerText = pc.iceConnectionState;
};
pc.onaddstream = (event) => {
    remoteVideo.srcObject = event.stream;
};

document.getElementById('paste-offer').onclick = async () => {
  const sdp = await navigator.clipboard.readText();
  document.getElementById('offer').value = sdp;
  await pc.setRemoteDescription({type: 'offer', sdp})
  if (document.getElementById('gum').checked) {
    localStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
    localVideo.srcObject = localStream;
    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
  }
  await pc.setLocalDescription();
  document.getElementById('paste-offer').disabled = true;
  document.getElementById('copy-answer').disabled = false;
}

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