JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video1" height="240" width="320" autoplay muted></video>
<video id="video2" height="240" width="320" autoplay></video><br>
<button id="replaceButton">Replace </button><br>
<button id="rempteVidRes">Get Resolution </button><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();
var log = msg => div.innerHTML += msg + "<br>";
var steamClone = "";
var video2 = document.getElementById('video2');

document.getElementById('replaceButton').onclick = () => {
	log("Changing Track");
  pc1.getSenders()[1].replaceTrack(streamClone.getVideoTracks()[0]);
}

document.getElementById('rempteVidRes').onclick = () => log(video2.videoWidth + " x " + video2.videoHeight);

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => {
  	pc1.addStream(video1.srcObject = stream)
    streamClone = stream.clone();
    })
  .catch(log);

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

pc2.ontrack = e => video2.srcObject = e.streams[0];
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);