Warm-up with replaceTrack and dummies

by jib1

HTML

<video id="video1" width="320" height="240" autoplay muted></video>
<video id="video2" width="320" height="240" autoplay controls></video><br>
<button id="addMedia">Add Media!</button>
<div id="div">
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://jan-ivar.github.io/blacksilence/blacksilence.js"></script>
<script src="https://rawgit.com/jan-ivar/replacetrack-polyfill/master/replacetrack-polyfill.js"></script>

JavaScript

let constraints = {width: 640, height: 480};
video1.srcObject = blackSilence(constraints);

let pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.oniceconnectionstatechange = e => div.innerHTML += pc1.iceConnectionState +"<br>";
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));

pc1.addStream(video1.srcObject);
pc2.ontrack = e => video2.srcObject = e.streams[0];

addMedia.onclick = () => navigator.mediaDevices.getUserMedia({video: constraints, audio: true})
  .then(stream => {
    video1.srcObject = stream;
    return Promise.all(pc1.getSenders().map(sender =>
        sender.replaceTrack(stream.getTracks().find(t => t.kind == sender.track.kind), stream)));
  });